TeXユーザの集い2014　発表資料（W3C Ruby）

Copyright©2014 NTT corp. All Rights Reserved.

ルビのWeb標準化における現状と課題

年月日

未来ねっと研究所

川幡太一

1 Copyright©2014 NTT corp. All Rights Reserved.

ルビとは

•  ルビ（英語: ruby）　文章内の任意の文字に対しふりがな／説明／異なる読み方といった役割の文字をより小さな文字で、通常縦書きの際は文字の右側／横書きの際は文字の上側に記されるもの。

きょう　　　おととい　　　あさって

今日は一昨日の明後日です。


テキストの直列構造と並列構造

「ルビ」は従来の直列的なテクストを並列化する。

振り仮名ふ　　り　　が　　な

fu　　 ri　　　gana

外国語の翻訳、障害者用の補助情報など、様々な応用が考えられる。


並列テクストの可能性

歴史的文書における正文と写本・下書き等の対照のデジタル化など。

大日本維新史料類纂之部井伊家史料


外国語の教科書（例）

外国語を学習する際に補助情報として別言語を付記するなど。

etān na hantum iccāmi

彼らをない殺すこと　　私は欲する

視線の移動が少なく、理解が早い


ルビのデータ構造

モノルビグループルビ両側ルビ熟語ルビ

※HTML5の新機能

『《親文字群》《ルビ文字群》』

『《親》《ルビ》』・・・『《親》《ルビ》』・・・・

『《親》《親》・・・　〔《ルビ》《ルビ》・・・〕　〔《ルビ》《ルビ》・・・〕・・』

『《親》《親》・・・《ルビ》《ルビ》・・・』

【データ構造】


長いルビ

古い作品では「黒死館殺人事件」が有名。ラノベ等でも利用例。（改行処理の考慮が必要）

黒死館殺人事件（青空文庫）・（社会思想社）


ボポモフォ・ルビ（台湾）

　


HTMLとCSSにおけるルビ

W3Cのルビに関する標準化は、HTMLとCSSに分かれ、それぞれ以下の役割を分担する。 •  HTML5 ルビ •  テキストの並列構造のデータ表現 •  DOM木の構築（パーズ）と解釈方法

•  CSS ルビ •  一般XML文書のルビ指定方法 •  ルビの表示方法


HTML5 におけるルビ


ルビの標準化の経緯

•  ISO 6429 (JIS X 0211) … PTX符号 (1986年) •  ISO/IEC 10646 / Unicode … Interlinear

AnnotaXons （1990年代） •  HTML •  XHTML Ruby (2001) •  初期のHTML5 Ruby

•  EPUB3 にて採用 •  両側ルビ・熟語ルビに未対応

•  HTML5 Ruby Extension •  両側ルビ・熟語ルビに対応


これまでのルビのHTML提案

過去の３提案 XHTML Ruby :: h[p://www.w3.org/TR/2001/REC-‐ruby-‐20010531/ •  2001年提案。多対多対応（rpspan属性あり）。

旧HTML5 Ruby :: h[p://www.w3.org/TR/2012/CR-‐html5-‐20121217/ • 　　低限の機能を持った単純ルビ。EPUB3などで採用。

Ruby Extenxion Spec :: h[p://darobin.github.io/html-‐ruby/ ・　熟語ルビ・両側ルビに対応し、HTML5 Rubyと互換性を維持。rbspanなし

<ruby><rb> 法</rb><rt> ほ</rt></ruby><ruby><rb> 華</rb> <rt> け</rt></ruby><ruby><rb> 経</rb><rt> きょう</rt></ruby>

<ruby> 法<rt> ほ</rt> 華<rt> け</rt> 経<rt> きょう</rt><ruby>

<ruby><rb> 法<rb> 華<rb> 経<rt> ほ<rt> け<rt> きょう</ruby> <ruby><rb> 法<rt> ほ<rb> 法<rt> け<rb> 経<rt> きょう</ruby>


HTML5 （CSS)ルビの特徴

<ruby>振<rb>り<rb>仮<rb>名</rb> <rp>(</rp> <rt>ふ<rt>り<rt>が<rt>な</rt> <rp>)</rp> <rtc>fu<rt>ri<rt>gana</rtc> <ruby>　

閉じタグを入れれば、間に空白・改行を挿入可能

開きタグ（一部）省略可能

親文字とルビを分離して入れられる。

親文字に対して、複数のルビを指定可能

閉じタグ省略可能

振り仮名ふ　　　が　な

fu ri gana

複数の親文字に対して、ルビをまとめて振ることができる

対応する親文字とルビが同じ場合、表示させないことができる。（CSS）

未対応ブラウザ用に括弧を用意可


ルビの閉じタグの省略

閉じタグは一般的に省略可能。

開きタグ直後のタグ親が閉じた rb rt rtc rp その他

ruby なしなしなしなしなし rb 閉じる閉じる閉じる閉じるなし閉じる rt 閉じる閉じる閉じる閉じるなし閉じる rtc 閉じる閉じる閉じる閉じるなし閉じる rp 閉じる閉じる閉じる閉じるなし閉じる

<ruby> <rb>法<rt> ほ<rb>華<rt> け<rb>経<rt> きょう</ruby> 　　　　　　　　　　　　　　　　　　↓ <ruby> <rb>法</rb><rt> ほ</rt><rb>華</rb><rt> け</rt><rb>経</rb><rt> きょう</rt></ruby>


閉じタグの省略例

東京とうきょう

<ruby><rb>東<rb>京<rt>とう<rt>きょう </ruby>

<ruby>東<rb>京<rp>(<rt>とう<rt>きょう<rp>)</ruby>

<ruby>東<rt>とう<rb>京<rt>きょう</ruby>

Tokyo

<ruby>東<rb>京<rt>とう<rt>きょう<rtc>Tokyo</ruby>


例

•  正しいマークアップ

•  間違ったマークアップ

<ruby> 法<rt> ほ</rt> 華<rb> 経<rt> け<rt> きょう</ruby> <ruby> 法<rt> ほ<rb>華<rt> け<rb> 経<rt> きょう</ruby> <ruby> 法<rtc> ほ<rb>華<rb> 経<rtc> け<rt> きょう</ruby>

<ruby> 法<rt> ほ</rtc> 華<rb> 経<rt> け<rt> きょう</ruby> <ruby> 法<rtc> ほ</rt>華<rt> け<rb> 経<rt> きょう</ruby> <ruby> 法<rt> ほ</rt>華</rb> 経<rt> け<rt> きょう</ruby>

※ 開きタグの省略を前提とした閉じタグの設定はできない


HTML5 ルビとDOM木

•  <rb>は、<ruby>の直接の子供の場合は省略可能。 •  <rtc>は、<rt>が一つしかない場合は省略可能。 •  ただし、この「省略可能」というのは、DOM木で補完される

ことではない。（JavaScriptは注意が必要。） <ruby>東<rb>京 <rt>とう<rt>きょう</ruby>

<ruby><rb>東<rb>京 <rtc>とう<rt>きょう</ruby>

<ruby>

東 rt rb rt

きょう京

<ruby>

rb rtc rb

rt

きょう

東京とう

両方とも同じ「東京」を意味する。→DOM木のどれが親文字で、どれがルビかを分類するアルゴリズムが必要。

とうきょう

とう


ルビの分類・分割

<ruby>

東 <rt> 都 <ｒｂ> <rt> <rtc> <rt>

Tō <rt>

ルビ親文字グループ：　　　　　　　　　　　　　　　　　　、・・・

ルビ文字コンテナグループルビ文字グループ　　　　　　　、・・・

ルビ文字グループ　　　　　　　　、・・・

左から走査

ルビ親文字グループ

ルビ文字コンテナ処理

ルビ文字処理

ルビ親文字処理

DOMレンジ DOMレンジ

DOMレンジ

DOMレンジ

DOM木

ルビセグメント


京とうきょう

kyō

と

<rtc>

City

<ruby>東<rb>京<rt>とう<rt>きょう<rtc>To<rt>kyo</rt></rtc>都<rt>と<rtc>City</ruby>


ルビの分類・分割

<ruby>

東 <rt> 都 <ｒｂ> <rt> <rtc> <rt>

Tō <rt>

ルビ親文字グループ：　　　　　　　　　　　　　　　　　　、・・・

ルビ文字コンテナグループルビ文字グループ　　　　　　　、・・・

ルビ文字グループ　　　　　　　　、・・・

左から走査

ルビ親文字グループ

ルビ文字コンテナ処理

ルビ文字処理

ルビ親文字処理


DOMレンジ

DOMレンジ

DOM木



京とうきょう

kyō

と

<rtc>

City

<ruby>東<rb>京<rt>とう<rt>きょう<rtc>To<rt>kyo</rt></rtc>都<rt>と<rtc>City</ruby>


ルビのペアリング

ルビ親文字グループ：　　　　　　　　　　　　　　　　　　

ルビ文字コンテナグループ

ルビ文字グループ　　　　　　　


DOMレンジ


東京

DOMレンジ

ルビ文字グループ　　　　　　　 DOMレンジ DOMレンジ

とうきょう

Tō kyō

•  各グループのDOMレンジ配列を左からペアリングする。 •  親が余ったらルビは後の親にまとめて対応させる。 •  ルビが余ったら空の親要素を生成してそれに対応させる。


CSS Ruby Level 1 について


CSS Ruby Level 1

HTML/XMLにおけるルビの指定方法と表示方法を規定。規格の構成は以下の通り 1.  IntroducXon 2.  Ruby Box Model （ボックスモデル） 3.  Ruby Layout （レイアウト） 4.  Ruby Formeng ProperXes （プロパティ） 5.  Edge Effects


ボックスモデル

任意のXML文書でのルビボックスの構成方法

<ルビ付き> 　<親字>東</親字><親字>京</親字> 　<括弧>（</括弧> 　<コンテナ><ルビ>とう</ルビ><ルビ>きょう</ルビ></コンテナ> 　<ルビ>Tokyo</ルビ><括弧>）</括弧> </ルビ付き>

XML文書

ルビ付き { display: ruby; } 親字 { display: ruby-‐base; white-‐space: nowrap; } 括弧 { display: none; } ルビ { display: ruby-‐text; white-‐space: nowrap; font-‐size: 50%; } rbc { display: ruby-‐base-‐container; } コンテナ { display: ruby-‐text-‐container; }

CSS

とうきょう

東京 Tokyo


DOM木とレンダリング木

<ruby>

[Text] [IWS] <span> <rtc>

<img> <rt>

<rbc>

<rb> [IWS]

<span>

<rtc>

<rt> <rt>

DOM木

•  Webページ作成者や、JavaScriptが使用。

•  ノードは JavaScript 等によって自由に組み替えられる。

レンダリング木

•  Webブラウザの表示ルーチンが使用。

•  DOM木がJavaScript等で変更された場合、反映して再構築される。

•  DOMで足りないノードは生成

<ruby>

[Text] <img>


無名ボックス生成

XML/HTML文書において、省略されたボックスをレンダリング木構築の際に補完する。 HTML5の「分割・分類・ペアリング」とは異なるので注意。

ruby

rbc rtc rtc

rb

東 rb

京

rt とう

rt きょう

rt Tokyo

rp （

rp ）

例： <ruby>東<rb>京<rp>（<rt>とう<rt>きょう<rtc>Tokyo<rp>）</ruby>

※　赤い点線が補完されたボックス HTML5ではRBCは規定されていない


ボックス生成における空白処理

<rb>..</rb>空白<rb>…</rb> ↓

<rbc><rb>…</rb>空白<rb>…</rb><rbc>

<rt>..</rt>空白<rt>…</rt> ↓

<rtc><rt>…</rt>空白<rt>…</rt><rtc>

<rb>要素間、<rt>要素間の空白はそれぞれ、<rb>, <rt>と同じ振る舞いとみなし、必要に応じて生成される <rbc>, <rtc> ボックスで全体を囲む。 <rbc>と<rbc>/<rtc>の間の空白はセグメント間空白として<rb>と同じ振る舞いとみなし、必要に応じて生成される<ruby>要素で囲む。（それ以外の rb、rt、rtc 間の空白は無視。）

<rbc>..</rbc>空白<rtc>…</rtc> ↓

<ruby><rbc>…</rbc>空白<rtc>…</rtc></ruby>


振り仮名の自動隠蔽機能

<ruby>振<rb>り<rb>仮<rb>名</rb> <rp>(</rp> <rt>ふ<rt>り<rt>が<rt>な</rt> <rp>)</rp> <ruby>　

振り仮名ふ　　　　が　な

対応する親文字とルビが同じ場合、表示させないことができる。（CSS）

振り仮名ふ　り　が　な


ルビと空白

<ruby> <rb>東</rb><rb>京</rb> <rt>とう</rt><rt>きょう</rt> <rt>Tō</rt><rt>kyō</rt> </ruby>

<ruby> <rb>Aerith</rb><rb> </rb><rb>Gainsboro</rb> <rt>エアリス</rt><rt>・</rt><rt>ゲインズブール</rt> </ruby>

<ruby> <rb>W</rb><rb>W</rb><rb>W</rb> <rt>World</rt> <rt>Wide</rt> <rt>Web</rt> </ruby>

日本語と英語の組み合わせも可能

東京とうきょう

Tōkyō

Aerith Gainsboro エアリス・ゲインズブール

空白入らない

World Wide Web

WWW


CSSプロパティ

•  display •  XML要素のどれが、ルビの何に対応するかを規

定。 •  ruby-‐base, ruby-‐text, ruby-‐text-‐container, ruby-‐

base-‐container •  <rp>要素は、通常は none （表示しない）

•  ruby-‐posiXon •  ruby-‐merge •  ruby-‐align


ruby-‐posiXon プロパティ

ルビの位置を指定するために、<rtc>に適用される。 •  over/under（横書き）

•  right/lei（縦書き） •  inter-‐character（ボポモフォ）

•  縦書き・横書き両方で対応するには、２つを指定。（複数の<rtc>がある場合は、デフォルトでは同方向にスタック。）

しんかんせん

新幹線 shinkansen

← over

← under

新幹線

shinkansen

↑right

↑ lei

例：　rtc {ruby-‐posiXon: over right;}


ruby-‐merge プロパティ

複数の<rt>を含む<rtc>において、ルビの配置方法を指定する。 •  separate :: モノルビ

•  collapse :: グループルビ

•  auto :: 熟語ルビ（エージェント依存）

ご　げん

語源ごげん

語源


プロパティ値親文字が長いルビが長い例

start 　　　ごげん

　　語源 center ごげん

語源 space-‐between インデックス

禁書目録 space-‐around インデックス

禁書目録

ruby-‐align プロパティ

ルビ・親文字の配置方法を<ruby>に対して指定。


今後の課題、展望


W3C標準化プロセス

W3Cの標準化プロセスは「プロセス文書」によって、下記のように定められる。

Last Call Announcement

Candidate RecommendaXon

Proposed RecommendaXon

RecommendaXon （勧告）

Public Working Drai

Editor’s Drai

ワークグループ (WG) において、必要と認められた規格のドラフト案をまずエディタが執筆。

内部の議論が成熟したら一般公開して外部を交えて議論

W3Cの他のグループの確認後、ブラウザ関係者にテストの作成やブラウザの実装を依頼する。

主な課題の解決後、LC宣言をして他のグループにレビュー依頼

実装経験が十分につまれ（2つ以上のブラウザで実装され）、実現性が十分と判断された場合は、PR化してW3C諮問委員会に送付

諮問委員会により正式に勧告

HTML5 CSS Ruby

2014/10/28

2014/8/5

規格の「終勧告」にはテスト作成とブラウザ実装が必要


ルビの標準化の状況

HTML5 ルビ【終勧告】 •  2014年5月 … パーザのテストのコミット •  2014年6月 … Firefox (Gecko）への実装 •  2014年7月 … WebKit （Safari）への実装

CSS Ruby 【草案】現状では、いくつかのブラウザで <ruby> をパーズできるものの、正確に画面に表示はできない。 •  ドラフトの改良

www-‐styles メーリングリストにおいて、議論を行い、ドラフトの改良を推進する

•  テストの作成 Test the Web Forward 等を経由してW3Cへテストを貢献する

•  ブラウザへの実装


HTML5以外のルビ表記（例）

•  LaTeX Okumacro, 藤田パッケージ

•  青空文庫のルビ •  Unicode Interlinear AnnotaXons

•  Pandoc ML で提案された Markdown ルビ表記方法幾つかは「熟語ルビ」や「両側ルビ」などの配慮は不十分

\ruby{漢字}{かんじ} \ruby[l]{漢字}{かん|じ}

[かんじ](-‐漢字)

｜漢字《かんじ》［＃「漢字」の左に「kanji」の注記］

<U+FFF9>漢字<U+FFFA>かんじ<U+FFFB>


ルビ表記は発展途上

•  CSS Rubyの開発 •  電子書籍でのメタデータの扱い •  非HTML5での表現 •  … まだまだ色々残っています。興味のある方、ぜひ挑戦してみませんか？


後までご清聴、ありがとうございました。


（参考資料）


参考文献

•  JLREQ •  HTML5 Ruby •  CSS Ruby Level 1 •  國語注音符號手冊


W3Cのテスト作成とブラウザ実装

要件定義

設計

実装

単体試験

総合試験想定外の利用

要件定義の修正

試験項目整理

仕様バグの発覚

ユーザやWeb開発者は、規格の範囲内でなんでもする可能性があるので、極端な状態の考慮も必要

静的テスト

動的テスト

アサーション試験

画面確認試験比較対象画面を作成し、ビットマップ比較する

テストの成功・失敗を、true/false で返す関数を作成する。

（必要なら、試験用対抗サーバを用意）

仮想環境で毎日試験を実施　

HTML5 のテスト

CSS のテスト（RefTest)

ブラウザへの実装を貢献する前に、必ずテストを事前に作成する必要がある。

Technology

TeXユーザの集い2014 発表資料（W3C Ruby）

TeXユーザの集い2014　発表資料（W3C Ruby）