CSS ルビ注釈レイアウトモジュール レベル 1

1. はじめに

1.1. ルビとは何か？

この小節は規定ではない。

ルビは、 あるテキスト列 の傍らに表示される別のテキスト列（「基底」と呼ぶ）の一般的な名称であり、 そのテキスト列に関連付けられた注釈または発音ガイドとして機能する。

次の図は、ルビの2つの例、 単純な場合と、より複雑な構造を持つ場合を示す。

この例では、単一の注釈が 複数の文字で 構成される基底テキストに注釈を付けるために使用されている。

日本語で使用されるルビの例（単純な場合）

日本語の組版では、この場合を 対語ルビ（日本語: 対語ルビ、すなわち単語単位のルビ）またはグループルビと呼ぶことがある。 これは、注釈全体が 複数文字の単語（全体）に関連付けられているためである。

この2番目の例では、 2つのレベルの注釈が基底テキストに付けられている: 上側の平仮名は各基底漢字の発音を示し、 下側の「Keio」と「University」という単語は英訳を示している。

基底文字の上側と下側に注釈テキストがある複雑なルビ

平仮名とそれに対応する漢字の基底文字との正しい関連付けを反映するために、 基底レベルのテキスト内の 間隔が調整されていることに注意されたい。 （これは上の図の4番目の漢字の周辺で発生しており、 その漢字には3文字の音声注釈が付いている。） 上の例で基底テキストの間隔が変動するのを避けるため、 平仮名の注釈を結合注釈としてスタイル指定できる。 その場合、先のグループルビの例により近い外観になる。 ただし、基底と注釈のペアリングはルビ構造に記録されているため、 テキストが複数行に分割されても、注釈文字は 対応する各基底文字と正しくペアリングされたままとなる。

HTML におけるルビ構造およびそれを表現するマークアップは、 ルビマークアップ拡張仕様で説明されている。 このモジュールでは、そのようなマークアップのルビレイアウトに関連する CSS レンダリングモデルおよび書式設定制御について説明する。

ルビとその書式設定に関するさらに詳しい 入門は、 「ルビとは何か」記事 [QA-RUBY]で確認できる。 日本語においてルビが伝統的に 書式設定されてきた主な方法についての詳細な情報は、 JIS X-4051 [JIS4051]（日本語） および日本語組版処理の要件 [JLREQ]の「ルビと圏点」（英語および日本語）で確認できる。 日本語ルビの簡易配置規則 [SIMPLE-RUBY]も、 日本語のルビを配置する方法の1つを（英語で）説明している。「行間注釈」は、 中国語組版の要件 [CLREQ]において、中国語組版に関連する慣行を （中国語および英語で）説明している。

1.2. モジュール間の相互作用

このモジュールは、ルビをサポートするために CSS レベル2 [CSS2]のインラインボックスモデルを拡張する。

このモジュールのプロパティはいずれも、::first-lineまたは::first-letter疑似要素には適用されない。 ただし、ruby-positionは、::first-lineを介して継承され、 先頭行のルビ注釈に影響を与えることができる。

1.3. 値の定義

この仕様は、CSS プロパティ 定義の表記規則を [CSS2]から採用し、値定義構文を [CSS-VALUES-3]から使用する。 この仕様で定義されていない値型は、CSS 値と単位 [CSS-VALUES-3]で定義される。 他の CSS モジュールと組み合わせることにより、これらの値型の定義が拡張される場合がある。

各プロパティの定義に記載されているプロパティ固有の値に加えて、 この仕様で定義されるすべてのプロパティは、 プロパティ値としてCSS 全域キーワードも受け入れる。 読みやすさのため、それらは明示的に繰り返し記載していない。

1.4. 図の表記規則

この小節は規定ではない。

東アジアの組版における多くの表記規則は、 レンダリングされる文字が幅広（CJK）か幅狭（非 CJK）かによって異なる。 この文書には、 次の凡例を使用する図がいくつかある:

テキスト列のn番目の文字である幅広セルグリフ（漢字など）。 注釈として使用する場合、通常は50%のサイズになる。

テキスト列のn番目のグリフである幅狭セルグリフ（欧文など）。

上記の記号が図内で取る向きは、 それらが表すグリフをユーザーエージェントがレンダリングするときに 取ることが意図されている向きに対応する。 図内のこれらの文字間の間隔は、 ある点を示すために意図的に変更されている場合を除き、付随的なものである。

2. ルビボックスモデル

CSS のルビモデルは、 W3C HTML5 ルビ マークアップモデル およびXHTML ルビ注釈勧告 [RUBY]に基づいている。 このモデルでは、ルビ構造は、 基底（注釈対象）テキストを表す1つ以上のルビ基底要素と、 注釈を表す1つ以上のレベルのルビ注釈要素との関連付けによって構成される。 ルビの構造は表の構造に似ている: 「行」（基底テキスト レベルと各注釈レベル） および「列」（各ルビ基底とそれに対応するルビ注釈）がある。

連続する基底とそれらの連続する注釈の集合は、ルビセグメントとしてまとめられる。 ルビセグメント内では、ルビ注釈が複数のルビ基底にまたがる場合がある。

注記: HTML では、単一の <ruby> 要素に 複数のルビセグメントを含めることができる。 （XHTML ルビモデルでは、単一の <ruby> 要素に含められるのは1つのルビセグメントのみである。）

2.1. ルビ固有の display 値

事前定義されたルビ要素を持たない文書言語（XML アプリケーションなど）では、 文書言語の要素をルビ要素に対応付けなければならない。 これは、display プロパティを使用して行う。

次の新しい display 値は、任意の要素にルビレイアウトの役割を割り当てる:

ruby

要素がルビコンテナー ボックスを生成することを指定する。 （HTML/XHTML の <ruby> 要素に対応する。）

ruby-base

要素がルビ基底 ボックスを生成することを指定する。 （HTML/XHTML の <rb> 要素に対応する。）

ruby-text

要素がルビ注釈ボックスを生成することを指定する。 （HTML/XHTML の <rt> 要素に対応する。）

ruby-base-container

要素がルビ基底コンテナーボックスを生成することを指定する。 （XHTML の <rbc> 要素に対応し、HTML では無名ボックスとして生成される。）

ruby-text-container

要素がルビ注釈コンテナーボックスを生成することを指定する。 （HTML/XHTML の <rtc> 要素に対応する。）

専用のルビマークアップをサポートする言語（HTML など）を使用する著者は、 任意の要素（<span> など）を ルビの display 値でスタイル指定するのではなく、 そのマークアップを使用するべきである。 正しいマークアップを使用することで、スクリーンリーダー および CSS 非対応のレンダラーがルビ構造を解釈できるようになる。

注記: 置換 要素で、display 値が ruby-base、ruby-text、ruby-base-container、 および ruby-text-container であるものは、インラインレベルボックスとして扱われる。 これは、CSS Display 3 § 2.4 レイアウト内部の display 型: table-* および ruby-* キーワードに従う。置換要素で、display 値が ruby または inline ruby であるものは、その外部 display 型に従って動作する。 これは、CSS Display 3 § 2.1 フローレイアウトの外部 display の役割: block、inline、および run-in キーワードに従う。 （§ 2.1.2 非インラインルビも参照。）

2.1.1. ルビ整形コンテキスト

ルビコンテナーは、非アトミックな インラインレベルボックスである。 通常のインラインボックスと同様に（CSS Inline Layout 3 § 2 インラインレイアウト モデルを参照）、 複数行にわたって分割され、 その包含ブロックは、最も近いブロック コンテナーの祖先である。 また、インラインボックスの内容が、そのインラインボックス自体を含むものと同じインライン整形コンテキストに関与するのと同様に、 ルビコンテナーとその基底レベルの内容は、 そのルビコンテナー自体を含むものと同じインライン整形コンテキストに関与する。

ただし、ルビコンテナーは、 注釈を収容するために、そのインライン整形コンテキストのセグメントの周囲に追加の構造を構築するルビ 整形コンテキストも確立する。注記: この整形コンテキストは、独立した整形コンテキストではない。 ルビ基底、ルビ注釈、 ルビ基底 コンテナー、およびルビ注釈コンテナーは、内部ルビボックスである: 内部テーブル要素と同様に、 これらはルビレイアウトにおいて特定の役割を持ち、 そのルビコンテナーのルビ整形コンテキストに関与する。 ルビ整形コンテキストにおける役割に加えて、 ルビ基底は同時に、 ルビコンテナーと同じ基底レベルのインライン整形コンテキストに 関与する。一方、ルビ注釈は、 ルビコンテナーによって確立された 個別の注釈レベルのインライン整形コンテキストに関与する。

インラインボックスの内容と同様に、 ルビコンテナー（およびそのすべての内部ルビ ボックス）の内容に対する包含ブロック は、そのルビコンテナーの包含ブロックである。 したがって、例えばフロートは、いずれかのルビボックス型ではなく、ルビコンテナーの包含ブロックによって閉じ込められる。

2.1.2. 非インラインルビ

要素の内部 display 型が ruby であり、外部 display 型が inline 以外である場合、 その要素は2つのボックスを生成する: 必要な外部 display 型の主ボックスと、 インラインレベルのルビ コンテナーである。 要素に指定されたすべてのプロパティは主ボックスに適用される （継承可能な場合は、ルビコンテナーボックスに継承される）。 これにより、内部のルビ構造を正しく維持しながら、 要素をブロックとしてスタイル指定できる。

注記: 要素を絶対位置に配置するかフロートさせると、そのdisplay 値は、 ブロックレベルの同等値として算出される。（[CSS-DISPLAY-3]または[CSS2]の第9.7節を参照。） 内部ルビ display 型の場合、 これにより、そのdisplay 値は block として算出される。

2.2. 無名ルビボックスの生成

CSS モデルでは、文書言語に これらの各構成要素に対応する要素を含める必要はない。 構造内の欠落している部分は、テーブルの正規化に使用されるものと同様の 無名ボックス生成規則によって暗黙的に補われる。[CSS2]

1. ブロックレベルボックスをインライン化する: ルビ コンテナー、ルビ基底コンテナー、ルビ注釈 コンテナー、ルビ基底 ボックス、 またはルビ注釈 ボックスに直接含まれるすべてのインフローボックスは、[CSS-DISPLAY-3]に従って「インライン化」される）。 また、そのdisplay 値もそれに応じて算出され、 インラインレベルの内容のみを含むようになる。 例えば、 display: ruby-text の要素を親に持つ、 display: block のインフロー要素のdisplay プロパティは、inline-block として算出される。
2. 無名ルビコンテナーを生成する: 不適切に包含されたルビ基底コンテナー、ルビ注釈 コンテナー、ルビ 基底、 および／またはルビ 注釈（およびその間にある空白）の連続したシーケンスは、 無名のルビコンテナーで包まれる。 この手順において:
   • 不適切に包含されたルビ基底とは、ルビ基底 コンテナーまたはルビコンテナーを親に持たないものをいう
   • 不適切に包含されたルビ注釈とは、ルビ注釈コンテナーまたはルビコンテナーを親に持たないものをいう
   • 不適切に包含されたルビ基底コンテナーまたはルビ 注釈コンテナーとは、ルビコンテナーを親に持たないものをいう
3. 誤った親を持つインラインレベルの 内容を包む: ルビ コンテナーまたはルビ基底コンテナーを直接の親に持つテキストおよびインラインレベルボックスの連続したシーケンスは、無名のルビ基底で包まれる。 同様に、ルビ注釈コンテナーを直接の親に持つテキストおよびインラインレベルボックスの連続したシーケンスは、無名の ルビ 注釈で包まれる。 （この目的では、誤った親を持つ内部テーブル要素は、ルビボックスを親に持つため、 最終的にインラインレベルのテーブルラッパーボックスによって包まれることから、インラインレベルの内容として扱われる。）

   ただし、このように構築された無名ボックスに空白のみが含まれる場合、 それはルビ内空白とみなされ、 以下で説明するように破棄 または保持される。

4. 先頭／末尾の 空白を除去する: 親の唯一のインフロー子ではなく、 ルビコンテナー、ルビ注釈コンテナー、またはルビ基底 コンテナーの最初または最後のインフロー子である ルビ内空白は、display: none であるかのように除去される
5. レベル間空白を除去する: 直前および直後のインフロー兄弟が次のいずれかのパターンに一致するルビ内空白は、 レベル間空白であり、display: none であるかのように除去される。

   前のボックス	次のボックス
   任意	ルビ注釈コンテナー
   ルビ注釈以外	ルビ注釈

6. レベル内 空白を解釈する: 直前および直後のインフロー兄弟が次のいずれかのパターンに一致するルビ内空白ボックスには、 次の表で定義するボックス型およびサブタイプが割り当てられる:

   前のボックス	次のボックス	ボックス型	サブタイプ
   ルビ 基底	ルビ 基底	ルビ 基底	基底間空白
   ルビ注釈	ルビ注釈	ルビ注釈	注釈間空白
   ルビ注釈またはルビ注釈コンテナー	ルビ 基底またはルビ基底コンテナー	ルビ基底	セグメント間空白
   ルビ 基底またはルビ基底コンテナー	ルビ基底コンテナー
   ルビ基底コンテナー	ルビ 基底またはルビ基底コンテナー

   上で定義したレベル内 空白ボックスは、 ペアリングおよびレイアウトにおいて特別に扱われる。 以下を参照。
7. 改行を抑制する: ルビ注釈内のすべての強制改行を（white-space 値にかかわらず）、 CSS Text レベル3 § 4.1.2の折り畳み可能なセグメント区切りに対して定義されているとおりに変換する。

   これの目的は、 ルビ注釈内のすべての改行を抑制することで、レイアウトモデルを単純化することである。 あるいは、それらについて何らかの許容可能な動作を定義することもできる。

8. 無名の レベルコンテナーを生成する: ルビ基底および基底間空白（セグメント間空白ではないもの）の連続したシーケンスで、 ルビ基底コンテナーを親に持たないものは、無名のルビ基底コンテナーで包まれる。 同様に、ルビ注釈および注釈間 空白の連続したシーケンスで、ルビ注釈コンテナーを親に持たないものは、無名の ルビ注釈コンテナーで包まれる。

すべてのルビレイアウト構造が適切な親を持つようになると、 UA は基底とその注釈との関連付けを開始できる。

注記: UA は、その内部構造内にこれらの無名ボックス （または§ 2.3 注釈の ペアリングにある無名で空のレベル内空白ボックス）のいずれも作成する必要はない。 ただし、ペアリングおよびレイアウトが、 それらが存在するかのように動作しなければならない。

<ruby>×<rbc>×<rb></rb>⬕<rb></rb>×</rbc>☒<rtc>×<rt></rt>⬔<rt></rt>×</rtc>◼<rbc>×<rb></rb>…</rtc>×</ruby>

2.3. 注釈のペアリング

注釈のペアリングとは、 ルビ注釈をルビ基底に関連付ける処理である。 各ルビ注釈は1つ以上のルビ基底に関連付けられ、 それらの基底にまたがるという。 （複数の基底にまたがるルビ注釈を、 範囲 注釈という。）

ルビ基底は、 各注釈レベルにつき、 1つのルビ 注釈とのみ関連付けることができる。 ただし、複数の注釈レベルがある場合、 複数のルビ注釈に関連付けることができる。

ペアリングが完了すると、ルビ 列が定義される。 各列は、単一のルビ 基底と、そのルビセグメント内の各行間注釈レベルからの1つのルビ注釈（空の無名注釈の場合もある）によって表される。

2.3.1. セグメントのペアリングと注釈レベル

ルビ構造は複数のルビセグメントに分割される。 各セグメントは、単一のルビ基底コンテナーと、それに続く1つ以上のルビ注釈コンテナーで構成される。 ルビセグメント内の各ルビ注釈コンテナーは、基底テキストに対する注釈の1つの レベルを表す: 最初のものは注釈の第1レベルを表し、 2番目のものは注釈の第2レベルを表す。 以下同様である。 ルビ基底コンテナーは、基底レベルを表す。 したがって、各セグメントのルビ基底コンテナーは、 そのセグメント内の各ルビ注釈コンテナーとペアリングされる。

退化した場合を処理するため、いくつかの空の無名コンテナーが存在すると仮定する:

• ルビコンテナーの最初の子がルビ注釈 コンテナーである場合、 その前に空の無名ルビ基底コンテナーが存在すると仮定する。
• 同様に、ルビ コンテナーが連続するルビ基底コンテナーを含む場合、 それらの間に空の無名ルビ注釈コンテナーが存在すると仮定する。

セグメント間空白は、実質的にそれ自体が1つのルビセグメントである。

2.3.2. 単位のペアリングと範囲注釈

ルビセグメント内では、 ルビ基底 コンテナー内の各ルビ基底が、 そのルビセグメント内の各ルビ注釈 コンテナーからの1つのルビ注釈とペアリングされる。

ルビ注釈コンテナーに、 単一の無名ルビ注釈のみが含まれる場合、 そのルビ注釈は、そのルビセグメント内の すべてのルビ基底とペアリングされる（すなわち、その全体にまたがる）。

それ以外の場合、各ルビ 注釈は、文書順で、 そのセグメント内の対応するルビ基底とペアリングされる。 ルビ注釈コンテナー内のルビ注釈が不足している場合、 残りのルビ基底は、 ルビ注釈 コンテナーの末尾に挿入された空の無名注釈とペアリングされる。 ルビ基底が不足している場合、 残りのルビ注釈は、 ルビ基底コンテナーの末尾に挿入された空の無名基底とペアリングされる。

実装が明示的な範囲指定を持つルビマークアップ （XHTML Complex Ruby Annotations など）をサポートする場合、 範囲 注釈をその基底と適切にペアリングするように、ペアリング規則を調整しなければならない。

レベル内 空白は、標準の注釈ペアリングには関与しない。 ただし、直前および直後のルビ基底またはルビ注釈が、次のようにペアリングされている場合:

• 2つのルビ基底または 注釈が、 別のレベル内で対応するレベル内空白を囲んでいる場合、 そのように対応するレベル内空白 ボックスもペアリングされる。
• 単一の範囲ルビ注釈とペアリングされている場合、 レベル内空白も、そのルビ注釈とペアリングされる
• 2つのルビ基底または 注釈の間に レベル内空白がない場合、 レベル内空白ボックスは、 それらの間に存在すると仮定される空の無名レベル内空白ボックスとペアリングされる。

|[  s p a n n i n g   a n n o t a t i o n ]|
|[ a1 ]|[ws]|[ a2 ]|[  ]|[ a3 ]|[ws]|[ a4 ]|
|[ b1 ]|[ws]|[ b2 ]|[ws]|[ b3 ]|[  ]|[ b4 ]|

2.4. 注釈の非表示: visibility: collapse と自動的に非表示となるルビ

ルビ注釈で、 visibility が collapse であるものは、非表示の注釈である。 さらに、 ルビ注釈のテキスト内容がその基底と完全に同一である場合、 UA によって自動的に非表示にされる（自動非表示）。

非表示にすることは、 ルビ注釈の 注釈ペアリングには影響しない。 ただし、非表示の注釈は可視ではなく、 そのレベル内で隣接するルビ注釈 ボックスのシーケンスを分離することを除いて、レイアウトに影響しない。 これは、それらが別々のセグメントに属し、 非表示の注釈の基底がルビ基底ではなく、間にある インラインであるかのように扱われる。

自動非表示により、漢字と平仮名が混在する 日本語の単語の注釈を正しくインライン表示できる。 例えば、振り仮名という単語は、次のようにインライン化されるべきである:

振り仮名(ふりがな)

したがって、次のようにマークアップされる

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

ただし、ルビとして表示される場合、「り」は非表示にされるべきである

「振り仮名」に付けられた平仮名のルビ。「り」はすでに平仮名であるため、その上に 平仮名の注釈がないことに注意されたい。

この例の日本語の単語は3つの 漢字で構成されており、 そのうち1文字は小学1年生で教えられ、 残りの2文字はより高度なものである。 （基底との対応関係を示すために文字を色分けしている。）

<ruby><rb>昆<rb>虫<rb>記<rt>こん<rt class=easy>ちゅう<rt>き</ruby>

読者によっては3文字すべてについて 発音ガイドを必要とする場合があるが、 他の読者層には、より簡単な文字の注釈を 非表示にする方が適切である。 visibility: collapse を適用すると、この非表示が可能になる:

visibility: collapse の非表示動作は、visibility: hiddenとは異なる。後者は注釈を不可視にするが、 レイアウトへの影響は除去しない:

また、display: none とも異なる。visibility: collapse はペアリング関係を維持するが、 display: none はボックスをツリーから 完全に除去し、 それ以降の注釈のペアリングを乱すためである:

注釈 コンテナー上の ruby-merge の算出値が merge である場合、非表示は無効になる。 その値が auto である場合、 ユーザーエージェントは、その注釈の非表示を無効にするかどうかを 決定してもよい。 ただし、ユーザーエージェントのレイアウトアルゴリズムが separate と同様の結果を生成する場合は、非表示を有効にすることが推奨される。

自動非表示のための内容比較は、空白の折り畳み（white-space）およびテキスト変換（text-transform）より前に行われ、 要素を無視する（ボックスの textContent のみを考慮する）。

注記: CSS Ruby の将来のレベルでは、自動非表示の制御が追加される可能性があるが、 このレベルでは常に強制される。

2.5. 空白の折り畳み

§ 2.2 無名ルビボックスの生成で説明したように、 ルビ構造内の空白は破棄される:

• ルビコンテナー、注釈 コンテナー、または基底コンテナーの先頭および末尾、
• 基底コンテナーと、それに続く注釈 コンテナーとの間、
• 注釈コンテナーの間。

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

ただし、ルビセグメントの間、 ルビ基底の間、およびルビ 注釈の間では、 空白は破棄されず、 基底間、注釈間、 またはセグメント間空白として レンダリング用に維持される。 （上記のレベル内空白を解釈するを参照。）

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

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

破棄されない空白が折り畳み可能である場合、 各行ボックス内の隣接するボックスをまたいで、 標準の空白処理 規則 [CSS-TEXT-3]に従って折り畳まれる。 別々のルビ セグメント内にある注釈、または非表示の注釈によって分離された注釈は、隣接しているとはみなされない。 ただし、すべての基底レベルの内容 （文字間注釈を含み、 これらはアトミックインラインとして扱われる） は隣接しているとみなされる。 ルビセグメント間の折り畳み可能な空白（セグメント間 空白）では、 セグメント 区切り変換を決定するための文脈テキストは、両側のルビ基底によって与えられる。 これは、必ずしもソース文書順で空白の両側にあるテキスト （行間注釈を含む場合がある）ではない。

<ruby>
  屋<rt>おく</rt>内<rt>ない</rt>
  禁<rt>きん</rt>煙<rt>えん</rt>
</ruby>

<ruby>
  屋<rt>おく</rt>  内<rt>ない</rt>
  禁<rt>きん</rt>  煙<rt>えん</rt>
</ruby>

3. ルビレイアウト

ルビ構造がレイアウトされるとき、 その基底レベルは、最初に 行上へレイアウトされる。 これは、そのルビ基底が 通常のインラインボックスのシーケンスであり、ルビコンテナーがその周囲を包む通常のインライン ボックスである場合とまったく同じように行われる。

ルビコンテナーに 文字間注釈がある場合、 それらは§ 3.2 文字間ルビレイアウトで詳述するように、基底 レベルへレイアウトされる。 その後、 基底 コンテナーのサイズが決定され、行間注釈が § 3.1 行間ルビレイアウトで詳述するようにレイアウトされる。

他の CSS レイアウトモデルと同様に、 相対位置指定、変形、およびその他のグラフィック効果は、 このボックスのレイアウト後に適用される。

3.1. 行間ルビレイアウト

あるレベル内の行間 ルビ注釈は、 最初に、同じインライン整形コンテキストに関与する インラインボックスであるかのようにレイアウトされる。 これにより、実質的に、ルビコンテナー内のその注釈レベルに対する行ボックスが確立される。注釈と基底は、 以下で説明するように間隔を調整することで互いに揃えられる。

3.1.1. インライン軸方向の行間レイアウト

インライン軸では、行間ルビ注釈は、 その注釈コンテナーのruby-merge 値に従って、そのルビ基底 ボックスに対して揃えられる。

ruby-merge が separate の場合、 各ルビ列のサイズは、 その列内で最も幅の広い内容（ルビ 基底またはルビ 注釈）に合わせて決定される。 範囲注釈の場合（実際にまたがっている場合も、ruby-merge: merge に従ってまたがるように扱われる場合も）、 範囲注釈の内容が、 その注釈がまたがる列よりも広くなる場合、 その差は、またがる列間に均等に配分される。 ルビセグメントに 複数の範囲注釈が含まれる場合、 この追加空間の配分は、 またがる基底の数が最も少ない範囲注釈から開始され、 その後、またがる基底の数が増える順に行われる。 各ルビ基底およびルビ 注釈は、その列に正確にまたがるようにサイズが決定される。

注記: 異なるレベルに、同じ数の基底にまたがる 複数の注釈があり、 それらが重なるものの一致しない場合、 空間の配分は未定義である。 これは HTML マークアップでは発生し得ないが、 [RUBY]のように明示的な範囲指定を持つマークアップ言語では発生し得る。

ruby-merge: auto の注釈コンテナー内のルビ 注釈のいずれかが、その基底よりも幅広い場合、 その注釈コンテナー内のルビ注釈は、その列の外側に延びてもよい。 その場合、交差する列の寸法に与える 影響はユーザーエージェントに委ねられる。 ただし、ルビ セグメントは、そのすべての内容を収めるのに十分な幅にしなければならない。

文字間注釈は列の間に挿入される: これは、隣接する両方の列にまたがる注釈の寸法計算には含まれるが、 いずれの列にも含まれず、 行間 注釈のサイズ決定または位置決めの影響を受けることはない。

各基底および注釈ボックス内で、 その内容がボックスの寸法よりも狭い場合に 余分な空間をどのように配分するかは、 その ruby-align プロパティによって指定される。

3.1.2. ブロック軸方向の行間レイアウト

vertical-align がこれらのルビボックスに影響する範囲を定義する。 課題 4987を参照。

次に、各基底 コンテナーのサイズと位置を、 そのすべてのルビ基底のマージンボックスと、関連付けられたすべての文字間ルビ注釈のマージンボックスがある場合にはそれらを、 正確に収容するように決定する。さらに、同じインライン整形コンテキストに関与する子孫ルビコンテナーの基底および注釈 コンテナーも収容する。 （基底コンテナーにインフローの内容がない場合、 単一の空のルビ基底を含むかのように、 そのサイズと位置を決定する。）

各行間注釈 コンテナーのサイズと位置は、 そのすべてのルビ注釈のマージンボックス、 および、この注釈レベルのインライン整形コンテキストにも関与する子孫ルビコンテナーの基底および注釈コンテナーを正確に収容するように決定される。 （注釈コンテナーにインフローの内容がない場合、 単一の空のルビ注釈を含むかのように、 そのサイズと位置を決定する。） 次に、これらの注釈コンテナーを、 対応する基底コンテナーの上側または下側 （ruby-position による）に、 間に空間を置かず外側へ積み重ねる。 これにより、ルビ 注釈のルビ基底に対するブロック軸方向の位置が決定される。

ブロック軸方向のマージンは 相殺するべきか？ これによりレイアウトはより堅牢になるが、 インラインがインライン軸に沿って動作する方法とは一致しない。

3.2. 文字間ルビレイアウト

文字間注釈には特別な レイアウトがある。文字間ルビ注釈 ボックスは、基底レベルのレイアウト内に組み込まれ、その一部として寸法が算出される。 各ルビ注釈は、ペアリングされたルビ基底の右側に挿入される。 範囲文字間注釈は、 それがまたがるすべての基底のうち最も右側のものの後に配置される。文字間ルビ注釈は、 以下で説明する点を除き、インラインブロックとまったく同じようにレイアウトされる。

注記: inter-character の定義により、文字間注釈は常に vertical-rl の writing-mode を持ち、 横書きのルビコンテナー内にのみ存在する。

各ルビ 注釈は、関連するルビ基底のすぐ右側、 基底間空白（またはセグメント間 空白）の前に配置される。 複数の文字間ルビ注釈ボックスが同じルビ基底に対して配置される場合、 それらのマージンボックスは、間に空間を置かず、 レベルの昇順で 右方向へ積み重ねられる。

ルビ注釈ボックスの内容領域の自動高さが、 その直前に配置されたルビ基底の内容ボックスの高さより小さくなる場合、 その内容ボックスの高さは、その高さと正確に一致するように拡大される。

ルビ注釈ボックスの配置は、ルビ注釈の ruby-align プロパティによって決まる:

• ruby-align が start の場合、 ルビ注釈の内容ボックスの上端は、 ルビ 基底の内容ボックスの上端に 揃えられる。
• それ以外の場合、 ルビ注釈の内容ボックスの中心は、 ルビ 基底の内容ボックスの中心に 垂直方向に揃えられる。

文字間注釈のルビ注釈コンテナーボックスは、 その内容ボックスがルビ基底コンテナーボックスの内容ボックスと正確に一致するように、 サイズと位置が決定される。

注記: 文字間ルビ注釈 コンテナーボックスのサイズと位置は、レイアウトに影響しない。 上記の定義は、プログラムからそれらについて問い合わせたときに 決定的な結果が得られるようにするためだけのものである。

配置および列のサイズ決定（§ 3 ルビレイアウトで説明）のために、文字間ルビ注釈は、 それらが付けられる基底と同じ列の 一部であるとはみなされない。 代わりに、それらは実質的に独自の列を形成する。

3.3. ルビボックスのスタイル指定

ルビ基底およびルビコンテナーは、 インラインボックスとして扱われ、 特に指定されていない限り、インラインボックスに適用されるすべてのプロパティが、 同じ方法でそれらにも適用される。 ただし、vertical-align の行相対シフト値（top、bottom）は、 無視しなければならない（ゼロとして扱う）。

特に指定されていない限り、 インラインボックスに適用されるすべてのプロパティは、 ルビ 注釈にも同じ方法で適用される。 ただし、line-height は適用されない。 また、vertical-align の行相対シフト値（top、bottom）も、 無視しなければならない（ゼロとして扱う）。

margin、padding、border プロパティ、 およびインラインボックスに適用されないその他のプロパティは、 基底 コンテナーまたは注釈コンテナーには適用されない。 さらに、line-height は注釈コンテナーには適用されない。

UA は、 背景プロパティ、アウトラインプロパティ、 またはボックスの境界を示すその他のプロパティを、 ルビ基底 コンテナーボックスまたはルビ注釈コンテナーボックスでサポートする必要はない。 UA は、これらのボックスを、継承 およびその内容のレイアウト制御のための抽象概念として単純に実装してもよい。

3.4. 行をまたぐ分割

ルビコンテナー全体が行内に収まるだけの空間がない場合、 すべてのレベルが同時に分割を許可する任意の位置でルビを分割してよい。 （改行の詳細については、CSS Text 3 § 5 改行と 単語境界を参照。） ルビは通常、基底と注釈の集合の間で分割されるが、 改行規則で許可される場合は、ルビ基底内（および並行して、それに関連付けられたルビ注釈 ボックス内）でも分割できる。

ルビが複数行にわたって分割される場合、ルビ注釈は、それぞれ対応するルビ 基底と同じ行に留まらなければならない。 ルビ基底とその注釈との間では、 文字間注釈の場合であっても、行を分割してはならない。

inter-character ルビの改行 可能位置

改行後、 各断片は個別にレイアウトされ、 各断片内でルビの配置が行われる。

3.4.1. 基底間での分割

一般的な場合、ルビ基底 ボックスおよびルビ注釈ボックスは、内部での行の折り返しを禁止するようにスタイル指定され、 強制改行を含まない。 （付録Aを参照。） このような場合、ルビ コンテナーは隣接するルビ基底間でのみ分割でき、 かつ、いずれのルビ注釈も、それらのルビ基底にまたがっていない場合に限られる。

ルビの改行可能位置

隣接する2つのルビ基底間でルビを分割できるかどうかは、 それらのルビ基底が隣接するインラインボックスである場合とまったく同様に、 基底テキストの通常の改行規則によって制御される。 （基底レベルの任意折り返し可能位置を決定するとき、注釈は無視される。）

<ruby>蝴<rt>hú</rt>蝶<rt>dié</rt>

基底間空白は、ルビ基底間の改行可能位置を評価するうえで重要である。 インライン間の空白と同様に、 その位置で改行されると折り畳まれる。 これは、CSS Text 3 § 4.1 空白処理規則で詳述される規則に従う。 同様に、注釈の空白も改行位置で除去される。

<ruby><rb>one</rb> <rb>two</rb> <rt>1</rt> <rt>2</rt></ruby>

3.4.2. 基底内での分割

長い基底テキストでは、基底と注釈のペア内での分割を許可することが適切な場合がある。 例えば、英語の文章に日本語訳を注釈として付ける場合、 テキストの折り返しを許可することで、段落内で妥当な改行動作が可能になる。

これが正気でない仕様作成者の戯言にすぎないと読者が思わないよう、スキャンした例を挿入する。

ルビ 基底内での改行は、 そのルビ基底およびそれと並行するすべての注釈のwhite-space プロパティが 改行を許可し、 各基底／注釈ボックスの内容の内部（すなわち先頭または 末尾ではない）に任意折り返し可能位置が存在する場合にのみ許可される。 ルビ基底内の内容の断片と注釈内の内容の断片には構造的な対応関係がないため、 UA は任意の可能位置の集合で分割してよい。 ただし、UA は各断片内の内容量を 比例的に均衡させるよう試みることが推奨される。

文字間注釈内には改行可能位置がない。

3.5. 双方向の並べ替え

Unicode 双方向アルゴリズムは、方向が対立する用字系の文字が 単一の段落内に混在する場合、 論理順で格納されたテキストを視覚表示用に並べ替える。

ルビ注釈とそれぞれ対応するルビ基底との対応関係を維持するため、 いくつかの制限を課さなければならない:

• ルビ 基底またはルビ注釈の内容は、連続したままでなければならない。
• ルビ 注釈は、それぞれのルビ基底とともに並べ替えなければならない。
• 単一のルビ 注釈がまたがるすべてのルビ基底は、 連続したままでなければならない。

このため、

• すべての内部ルビボックスおよびルビコンテナーには、双方向分離が強制される: unicode-bidi の normal および embed 値は isolate として算出され、 bidi-override は isolate-override として算出される。

  注記: これは、暗黙的な双方向の並べ替えが ルビ基底をまたいで機能しないことを意味する。 したがって著者は、ルビコンテナーに宣言された方向が、 実際にその内容と一致することを保証する必要がある。

• レイアウト中、ルビ セグメントは、そのルビコンテナーのdirection プロパティによって、ルビコンテナー内で順序付けられる。
• セグメント内では、ルビ 基底およびルビ注釈のうち結合されていないものは、 それぞれのコンテナー内で、 セグメントのルビ基底コンテナーのdirection プロパティによって順序付けられる。 結合注釈は、 その注釈コンテナーのdirection プロパティによって、 その注釈コンテナー内のインラインボックスのシーケンスである場合とまったく同じように順序付けられる。

  注記: これは、ルビ 注釈コンテナーのdirection プロパティが、非結合注釈のレイアウトでは無視されることを意味する。 ただし、そのプロパティはコンテナーの子へ継承され、 その中に含まれるルビ注釈のインライン基底方向に影響を与えることができる。

他のインラインレベルの内容と同様に、 内部ルビボックスの双方向の並べ替えは改行後に行われる。 これにより、内容はその論理順に従って複数行へ分割される。

注記: これらの規則をわずかに調整し、 特定の注釈コンテナーで ruby-merge が merge である場合、 個々の注釈に双方向分離を強制せず、 それらをまとめて処理できるようにすると有用かもしれない。 ただし、これは実装に複雑さを加えることになり、 この状況を処理する要求がない限り、正当化されないように思われる。 これを処理する必要がある者は、 CSS ワーキンググループに連絡することが推奨される。

CSS における双方向テキストのより詳しい説明については、[CSS3-WRITING-MODES]を参照。

3.6. 行間隔

line-height プロパティは、CSS における行間の間隔を制御する。 行上のインライン内容がline-heightよりも低い場合、 内容の両側にハーフレディングが追加される。 これは、CSS インラインレイアウト 3 § 5 論理的な高さと行間隔で指定されている。

一貫した行間隔を確保するため、 ルビを含む文書では通常、line-heightを、 テキスト行の間にルビを収容できる十分な大きさにする。 したがって通常、ルビ注釈コンテナーおよびルビ注釈ボックスは、 行のインライン内容の測定高には寄与しない。 すべての配置（vertical-alignを参照）および行高の計算は、 ルビ基底コンテナーのみを使用して、 それが通常のインラインである場合とまったく同じように行われる。

ただし、ルビコンテナーに指定されたline-heightが、 最上部のルビ注釈コンテナーの上端と最下部の ルビ注釈コンテナーの下端との間の距離よりも小さい場合、 追加のレディングが、 ルビ基底コンテナーの適切な側に追加される。これにより、 ブロックが、それぞれにこれと同一のルビを含む3つの行で 構成されている場合、 いずれのルビコンテナーも重ならなくなる。

注記: これは、ルビ注釈が行ボックス内に 収まることを保証するものではない。 単に、すべての行の間隔が等しく、ルビ注釈の量および位置が同等である場合に、 重なりを避けるのに十分な空間が確保されることを保証するだけである。

著者は、ルビを収容するために適切なline-heightおよびpaddingを 確保するべきである。 また、ブロックの先頭または末尾、 および段落のデフォルトフォントサイズよりも高いインラインレベルの内容 （画像、インラインブロック、またはvertical-alignで移動された要素など） が行に含まれる場合には、特に注意するべきである。

ルビ注釈は行からはみ出すことが多い。 著者は、ルビ注釈が付いた行の上側／下側の内容との間に、 ルビ用の十分な空間を確保するべきである。

注記: ルビが配置および行レイアウトに与える影響をより詳細に制御する機能は、 CSS 行レイアウトモジュール レベル3の一部となる予定である。 現在はまだ開発の探索段階にあることに注意されたい。 新機能の説明には、まだ依存するべきではない。

4. ルビ整形プロパティ

ルビの位置指定、テキストの配分、 および配置を制御するために、次のプロパティが導入される。

4.1. ルビの位置指定: ruby-position プロパティ

このプロパティは、基底に対するルビ注釈の位置を制御する。 各値の意味は次のとおり:

alternate

異なる注釈のレベルを、 overとunderとの間で交互に配置する。

注釈コンテナーが、そのルビ セグメント内にある注釈の最初のレベルである場合、 またはそれ以前のすべてのレベルが文字間である場合、 alternateは、単独であるか overと組み合わせた場合、 overと同じように動作する。 一方、underと組み合わせたalternateは、underと同じように動作する。

それ以外の場合、 直前の行間注釈レベルがoverであれば、alternateはunderのように動作し、 その逆も同様である。 （この場合、alternateを単独で指定するか、 overまたは underと組み合わせて指定するかによる違いはない。）

over

ルビ注釈は基底の行上側に表示される。

横書きレイアウトで日本語の基底テキストの上側にあるルビ

縦書きレイアウトで日本語の基底テキストの右側にあるルビ

under

ルビ注釈は基底の行下側に 表示される。 これは、表意文字を使用する東アジアの書記体系で使用される比較的まれな設定であり、 教育用テキストで最もよく見られる。

横書きレイアウトで日本語の基底テキストの下側にあるルビ

縦書きレイアウトで日本語の基底テキストの左側にあるルビ

inter-character

包含するルビコンテナーの書字モードが縦書きである場合、 この値はoverと同じ効果を持つ。

それ以外の場合、ルビ注釈は文字間注釈となる。 注釈は横書きテキストにおいて基底の右側に表示される。 これにより、このルビ注釈コンテナーのルビ注釈の子におけるwriting-modeの算出値は、vertical-rlに強制される。

注記: ルビ 注釈コンテナー自体のwriting-modeの算出値には影響しない。 これは、同じ要素上のwriting-mode、display、およびruby-positionプロパティの算出値間で 循環依存が生じるのを避けるためである。

この値は、特に台湾で使用される 繁体字中国語の特殊な場合のために提供されている: この文脈におけるルビ（注音符号グリフで構成される）は、 基底文字のレイアウトが横書きであっても、 基底グリフの右側に沿って縦方向に表示される:

横書きレイアウトにおける繁体字中国語の「注音符号」ルビ （明確にするため、ルビ注釈を青色で示す）

注記: 継承は、ルビレイアウト用に生成される無名ボックスを考慮せず、 要素ツリー上で機能するため、 文字間注釈を使用する場合、著者は 要素に基づくルビ注釈コンテナー、 無名のルビ注釈、 およびさらにその子孫要素を含むマークアップパターンを避けるよう、 注意する必要がある。 これらの子孫は、writing-modeがvertical-rlに変更されたルビ注釈ではなく、 ルビ注釈コンテナーから書字モードを継承するためである。

ruby { ruby-position: inter-character; }

<ruby>base<rtc><em>problematic</em> annotation</ruby>

上のマークアップでは、無名のルビ注釈ボックスが、 <rtc>要素の子として生成され、 「problematic annotation」全体を包む。 これは、ruby-positionがinter-characterである注釈コンテナーの子であるため、 そのwriting-modeは、期待どおりvertical-rlとなる。 ただし、<em>要素は、そのwriting-modeを <rtc>要素から直接継承する。 この要素はvertical-rlに強制されていない。

この例では、明示的なルビ注釈コンテナー要素は 必要ではなかったため、 代わりにルビ注釈要素を使用すれば、 問題を回避できる:

<ruby>base<rt><em>problematic</em> annotation</ruby>

明示的なルビ注釈コンテナー要素が 必要な場合は、 ルビ注釈要素も使用することで、 問題に対処できる:

<ruby>base<rtc><rt><em>problematic</em> annotation</ruby>

注釈コンテナーのうち、 文字間注釈ではないものを、行間注釈という。

複数のルビ注釈コンテナーが同じruby-positionを持つ場合、 それらは基底テキストから外側に向かって積み重ねられる。

4.2. 注釈空間の共有: ruby-merge プロパティ

このプロパティは、ルビコンテナーボックス内に複数のルビ注釈ボックスがある場合に、 それらをどのようにレンダリングするべきかを制御する: 各ペアを別々に維持するか、 注釈を結合してグループとしてレンダリングするか、 または利用可能な空間に基づいて分離方法を決定するかを指定する。

注記: 文字間注釈は常に 分離され、このプロパティは適用されない。

指定可能な値:

separate

各ルビ注釈ボックスは、 対応する基底ボックスと同じ列内でレンダリングされる。 すなわち、いずれの側でも隣接する基底と重ならない。 このスタイルは、[JLREQ]で「モノルビ」と呼ばれている。

例えば、次の2行は同じように レンダリングされる:

<p><ruby>無<rt>む</ruby><ruby>常<rt>じょう</ruby>
<p><ruby style="ruby-merge:separate"><rb>無<rb>常<rt>む<rt>じょう</ruby>

merge

同じ行上にある同じルビセグメント内のすべてのルビ 注釈ボックスは、 その注釈 コンテナー内のインラインボックスとして連結され、 関連付けられたすべてのルビ基底ボックスにまたがる 単一の無名ルビ注釈ボックス内にレイアウトされる。 単一の行上にレイアウトされる場合、 このスタイルは[JLREQ]の「グループルビ」と同様にレンダリングされる。 ただし、複数行にわたって分割される場合、ルビ注釈は、 それぞれ対応するルビ基底と同じ行に維持される。

両方の文字が1行に収まる場合、 次の2行は同じようにレンダリングされる:

<p><ruby>無常<rt>むじょう</ruby>
<p><ruby style="ruby-merge:merge"><rb>無<rb>常<rt>む<rt>じょう</ruby>

ただし、2つの基底が複数行に分割される場合、2番目のものはruby-position: separateと同じようにレンダリングされる。

auto

ユーザーエージェントは、各ルビ注釈ボックスを 対応する基底ボックスに対してどのようにレンダリングするかを決定するために、任意のアルゴリズムを使用してよい。 その意図は、すべての注釈がそれぞれ対応する基底の上に収まる場合、 結果がseparateと同一になり、 一部の注釈がその基底よりも幅広い場合には、 基底間に空間を設けることを避けるため、 何らかの方法で空間を共有することである。

注記: この動作は熟語を対象としている。 「ルビとは何か」の「熟語 ルビ」を参照。[QA-RUBY]

この種類のルビをレンダリングするための表記規則は複数存在する。 熟語ルビの 配置（[SIMPLE-RUBY]）、熟語ルビの 基底文字に対する配置（[JLREQ]）、 および[JISX4051]の4.12.3(c) 熟語ルビの処理で、 さまざまな複雑さの例を参照されたい。

これらのうち最も単純な方法は、 すべてのルビ注釈ボックスが対応する基底ボックスの送り幅内に収まる場合は separateとしてレンダリングし、 それ以外の場合はmergeとしてレンダリングすることである。

注記: テキストは、 ルビ 注釈または基底をまたいで 字形形成や合字形成を行わない。 結合されている場合も同様である。 これは双方向分離による。 § 3.5 双方向の並べ替えおよびCSS Text 3 § 7.3 要素境界をまたぐ 字形形成を参照。

4.3. ルビテキストの配分: ruby-align プロパティ

このプロパティは、各種ルビボックスの内容が それぞれのボックスを正確に満たさない場合に、テキストをその内部でどのように配分するかを指定する。 ruby-alignによって配分される空間は、 両端揃えによって配分される空間とは無関係であり、独立していることに注意されたい。

文字間注釈の場合、 このプロパティはボックス自体の配置にも影響を与えることができる （§ 3.2 文字間ルビレイアウトを参照）。 それ以外の場合は、ボックス自体のサイズまたは位置ではなく、 ボックス内の内容の配置にのみ影響する。

各値の意味は次のとおり:

start

ルビの内容をボックスの始端に揃える。

start によるルビの配分

「Katatsuki ruby」 （肩付きルビ）は、 この start 値に近いが、 完全に同じではない。 特に、 基底からはみ出す場合の動作は、 周囲の文脈に応じて 始端揃えと異なる場合がある。 JLREQを参照。 また、肩付きルビは縦書きでのみ使用され、 JLTF はこれを特に重要とはみなしていない。 したがって、この値を肩付きルビに対応できるほど高度にすることは、 労力に見合わない可能性がある。 start が他の 目的に必要であれば、 維持するべきである。 そうでなければ、単に削除してもよいのではないか？

center

ルビの内容をボックス内で中央揃えする。

center によるルビの配分

space-between

ルビの内容は、通常のテキストの両端揃えに対して定義されるとおりに拡張される （text-justifyによって定義される）。 ただし、両端揃え可能位置がない場合、内容は中央揃えされる。

space-between によるルビの配分

space-around

space-betweenの場合と同様だが、追加の両端揃え可能位置があり、その空間が ルビ内容の前後に半分ずつ配分される。

space-around によるルビの配分

デフォルト UA スタイルシートは、 text-justify: rubyをルビ注釈に適用し、 隣接する各 CJK 文字のペアの間には両端揃え可能位置を定義するが、 隣接するラテン文字または注音符号の文字のペアの間には定義しない。 したがって、space-aroundおよびspace-between 値であっても、 ラテン文字または注音符号文字は中央揃えになる:

space-aroundおよびspace-betweenによるルビの配分では、非 CJK ルビテキストは中央揃えされる

空間の配分はtext-justifyによって制御できる。[CSS-TEXT-3]

ルビ基底およびルビ 注釈の内容は、 ruby-merge: mergeによって範囲注釈となるものを除き、 そのボックスのruby-alignの値に基づいてボックス内に配置される。 結合 注釈内の内容は、ルビ注釈コンテナー内で、 注釈コンテナーのruby-alignの値に基づいて配置され、 個々のルビ注釈のruby-alignの値は 無視される。

結合注釈によって ルビセグメントが より幅広くなる場合はどうするか？ 現在指定されているように、各基底が範囲注釈の対象であるかのように拡張されるのか？ この方法では、例えば、結合注釈の方が長い場合、 複数の基底を持つ基底コンテナー内でテキストを中央揃えできない。 代わりに、ruby-merge を基底コンテナーにも適用できるようにするべきかもしれない。 ただし、これには、単一の基底が複数の注釈にまたがることを許可する （基底は結合されているが、一部の注釈レベルは結合されていない場合）か、 基底が結合されている場合はすべての注釈レベルも結合されなければならないと要求する必要がある。

ruby-mergeがautoである場合の内容の配置方法は、ユーザーエージェントに委ねられる。 ただし、すべての注釈がそれぞれ対応する基底の上に収まる場合は、ruby-merge: separateの場合と同一でなければならない。

4.4. ルビのテキスト装飾

テキスト装飾は、基底テキストから注釈へ伝播しない。

ルビの祖先にテキスト装飾が指定されている場合、 その装飾はルビ基底コンテナーの内容領域全体に描画される。 これには、長い注釈を収容するためにルビ基底の内容の両側へ追加された空間も含まれる。 ルビ基底自体にテキスト装飾が指定されている場合、 この追加空間には装飾が描画されない。 これは、ボックス自体にテキスト装飾を直接指定したとき、そのボックス自身のパディングに装飾が描画されないことと同様である。 [CSS3-TEXT-DECOR]

テキスト装飾は、ルビ基底コンテナー およびルビ注釈コンテナーに直接指定してもよい: この場合、それぞれコンテナー内のすべての基底または注釈へ伝播し、 連続性を保つためにそれらの間にも描画される。

ルビ注釈の位置は、 基底テキストに適用された上線および下線の装飾との 潜在的な衝突を避けるために調整される場合がある。 フォントサイズおよびベースライン配置が一貫している基本的な場合、 下線または上線は、 基底レベルと、その側にある 注釈との間に配置される。

この節では、 隣接する基底／注釈の内容間に 装飾を描画することについて、さらに明確にする必要がある。 これは、それらのボックスが列と同じ幅であるかどうかによって異なる。

5. 端部での効果

5.1. ルビのはみ出し: ruby-overhang プロパティ

ruby-overhang プロパティは、ルビ注釈が ルビ コンテナーの外側にある隣接テキストと重なってよいかどうかを制御する。 各値の意味は次のとおり:

auto

ルビ注釈コンテナーが 対応するルビ基底コンテナーよりも長い場合、 ルビ注釈コンテナーは、 隣接するボックスと部分的に重なってよい。

はみ出しを許可するか、どの程度許可するか、およびどのような条件で許可するかは、 UA によって決定される。

none

ルビ注釈コンテナーが、 ルビ注釈コンテナーを越えて延びることは決して許可されない。

ルビ 注釈のはみ出しが許可されない場合、 ルビコンテナーは 従来のインラインボックスのように動作する。 すなわち、その境界内には自身の内容のみがレンダリングされ、 隣接する要素はボックスの境界を越えない:

テキストが隣接テキスト上へはみ出すことを許可されていない単純なルビ

ただし、ルビ注釈コンテナーのはみ出しが許可される場合、 隣接する内容はルビコンテナーボックスと重なってよい。 これにより、そのルビ 注釈を、 周囲のインラインレベルの内容の上側／下側に部分的にレンダリングできる。 はみ出しは、 隣接する内容と、 ルビコンテナーの注釈ボックスまたは重なった 基底の内容との間に 衝突を生じさせない範囲でのみ許可される。

テキストが隣接テキスト上へはみ出すことを許可された単純なルビ

注記: ルビ基底に関連付けられたルビ注釈が別のルビ基底上へはみ出せるかどうかは、ruby-mergeによって制御される。

通常、 基底または注釈の内容の配置は、 はみ出し動作の影響を受けない: はみ出しが許可されるかどうかにかかわらず、配置および空間配分（ruby-alignを参照）は 同じ方法で行われ、 重なりに利用できる空間が決定される前に算出される。 ただし、UA は注釈および基底の空間配分や配置を決定するとき、 許可されたはみ出しを考慮してもよい。

はみ出しは、 場合によって配置と相互作用すると思われる。 後でこれについて調査する必要があるかもしれない。

5.2. 行端の配置

そのルビ基底よりも長いルビ 注釈ボックスが行の始端または終端にある場合、 ユーザーエージェントは、行端に接するルビ 注釈の側を、 対応する基底の端に強制的に揃えてよい。 この種類の配置は、[JLREQ]で説明されている。

この仕様レベルでは、この動作を制御する仕組みは提供されない。

行端の配置

付録A: スタイル シートの例

この節は参考情報である。

A.1 デフォルト UA スタイルシート

次に、HTML および XHTML のルビマークアップをルビレイアウトとしてレンダリングするための デフォルト UA スタイルシートを示す:

ruby { display: ruby; }
rp   { display: none; }
rbc  { display: ruby-base-container; }
rtc  { display: ruby-text-container; }
rb   { display: ruby-base; white-space: nowrap; }
rt   { display: ruby-text; }
ruby, rb, rt, rbc, rtc { unicode-bidi: isolate; }

rtc, rt {
  font-variant-east-asian: ruby;  /* [[CSS-FONTS-3]] を参照 */
  text-justify: ruby;             /* [[CSS-TEXT-4]] を参照 */
  text-emphasis: none;            /* [[CSS-TEXT-DECOR-3]] を参照 */
  white-space: nowrap;
  line-height: 1; }

rtc, :not(rtc) > rt {
  font-size: 50%; }
rtc:lang(zh-TW), :not(rtc) > rt:lang(zh-TW),
rtc:lang(zh-Hanb), :not(rtc) > rt:lang(zh-Hanb), {
  font-size: 30%; }               /* 注音符号 */

注記: 著者は上記の規則を使用するべきではない: ルビレイアウトをサポートする UA は、これらをデフォルトで提供するべきである。

ユーザーが制御できる「最小フォントサイズ」機能を実装する UA は、 ルビ注釈に対してその最小値を縮小することを検討するべきである。

A.2 ルビ注釈のインライン化

次に、HTML および XHTML のルビマークアップをインライン注釈としてレンダリングするための スタイルシートの例を示す:

ruby, rb, rt, rbc, rtc, rp {
  display: inline; white-space: inherit;
  font: inherit; text-emphasis: inherit; }

A.3 丸括弧の生成

残念ながら、セレクターはテキストノードに照合できないため、 HTML で考えられるすべてのルビマークアップパターンについて、 丸括弧が付いていないルビ注釈へ 自動的かつ正確に丸括弧を追加する規則を CSS で表現することはできない。 （これは、HTML のルビでは、対応する要素を使用せずにルビ基底を生のテキストから暗黙的に生成できるためである。）

ただし、<rb>または<rtc>のいずれかを厳密に使用する場合、 次の規則により各注釈シーケンスを丸括弧で囲むことができる:

/* <rtc> を囲む括弧 */
rtc::before { content: "（"; }
rtc::after  { content: "）"; }

/* <rtc> 内にない最初の <rt> の前の括弧 */
rb  + rt::before,
rtc + rt::before { content: "（"; }

/* <rtc> 内にない <rt> の後の括弧 */
rb ~ rt:last-child::after,
rt + rb::before  { content: "）"; }
rt + rtc::before { content: "）（"; }

または、純粋に交互となる形式のマークアップが使用され、 （<ruby>A<rt>a</rt>B<rt>b</rt>C<rt>c</rt><ruby>） 隣接するルビ注釈がないことが分かっている場合、 次の規則により各注釈を丸括弧で囲むことができる:

/* 各 <rt> を囲む括弧 */
rt::before { content: "（"; }
rt::after  { content: "）"; }

6. 用語集

ボポモフォまたは注音符号 （中国語: ㄅㄆㄇㄈ、注音符號、または注音符号）

中国語、特に標準中国語の表音表記として使用するために開発された 文字および声調記号。 これらは多くの場合、ルビ注釈に使用されるが、用途はそれに限定されない。

中国語で音声文字間注釈として使用される注音符号の例

注音符号の声調 記号は、 （メモリー内で） 各注音符号音節の末尾に現れる空間を占める文字である。 通常、他の注音符号文字の右側または上側にある 別の列に表示され、 声調記号の位置は 音節内の文字数によって異なる。 ただし、軽声記号は、 注音符号の傍らではなく、その前に（同じ行で）配置される。

注記: ユーザーエージェントおよびフォントサブシステムは、 テキストを表示するとき、そのテキストがルビ注釈内にあるか通常のインライン内容であるかにかかわらず、 注音符号の声調記号を含むグリフの正しい相対配置および位置決めを 保証する責任を負う。 このようなグリフの配置は、CSS ルビレイアウトの機能ではない。

注音符号の文字は、Bopomofo Unicode 用字系に属する（現在は U+3100–312F および U+31A0–31BF ブロックに割り当てられている）。 注音符号の 声調記号は、 U+02C9 (ˉ)、U+02CA (ˊ)、U+02C7 (ˇ)、U+02CB (ˋ)、U+02EA (˪)、U+02EB (˫)、U+02D9 (˙) である。 CSS において、これらはすべてまとめて注音符号文字とみなされる。

漢字（韓国語: 漢字）

中国語の書記体系から借用または適応された表意文字を使用する、 韓国語の書記体系の一部。 日本語の漢字も参照。

平仮名（日本語: 平仮名）

日本語の音節文字、またはその用字系の文字。 丸みを帯びた草書体の外観を持つ。 日本語の書記体系の一部であり、 漢字および片仮名とともに使用される。 現代では、 主に漢字を使用できない、または使用することが適切でない場合に 日本語の単語、 語尾、および助詞を書くために使用される。 片仮名も参照。

表意文字

アルファベット文字または音節文字とは異なり、 概念、単語、または単語の構成要素を表すために使用される文字。 最もよく知られている表意文字体系は、多少の違いを伴いながら 東アジア（中国、日本、韓国など）で使用されている。

仮名（日本語: 仮名）

平仮名および片仮名の総称。

漢字（日本語: 漢字）

表意文字を指す日本語の用語。日本語で使用される表意文字。 日本語の書記体系の一部であり、 平仮名および片仮名とともに使用される。 韓国語の漢字も参照。

片仮名（日本語: 片仮名）

日本語の音節文字、またはその用字系の文字。 角張った外観を持つ。 日本語の書記体系の一部であり、 漢字および平仮名とともに使用される。 現代では、主に外来語を書くために使用される。 平仮名も参照。

謝辞

この仕様は、次の方々の協力なしには実現しなかった:

David Baron, Robin Berjon, Susanna Bowen, Stephen Deach, Martin Dürst, Hideki Hiura (樋浦 秀樹), Masayasu Ishikawa (石川雅康), Taichi Kawabata, Chris Pratley, Xidorn Quan, Takao Suzuki (鈴木 孝雄), Frank Yung-Fong Tang, Chris Thrasher, Masafumi Yabe (家辺勝文), Boris Zbarsky, Steve Zilles.

以前の編集者である Microsoft の Michel Suignard および Marcin Sawicki、 ならびに W3C の Richard Ishida に特に感謝する。

変更点

この節では、以前の公開版からの変更点を記録する。

2021年12月2日付 作業草案以降の変更点

• 文字間注釈におけるwriting-modeの算出値調整を、 ルビ注釈コンテナーボックスではなく、ルビ注釈 ボックスに適用するよう変更した。
• HTML のルビ注釈にfont-size: 30%を適用する規則へ zh-Hantを追加した。
• UA のデフォルトスタイルシートに text-justify: ruby を追加した。 （課題 771 課題 779）

2020年4月29日付 作業草案以降の変更点

• ruby-positionにalternateキーワードを追加し、それを初期 値とした。
• ruby-mergeのcollapse値の名前をmergeに変更した。 （課題 5004）
• visibility: collapseが、 非表示により、 自動非表示の注釈と同じ方法で 注釈を明示的に非表示にするものと定義した。 （課題 5927）
• 各種ルビ display 型にどのプロパティが適用されるかをより正確に指定し （§ 3.3 ルビボックスのスタイル指定）、 ルビ、ルビ基底、およびルビ注釈ボックスを、 特に指定されていない限り通常のインラインボックスと 同じように動作するものと定義した。 （課題 4935、課題 4936、課題 4976、課題 4979）
• § 3 ルビレイアウトを大幅に改訂し、行間および文字間ルビレイアウト と、それらのruby-alignとの相互作用をより明確に定義した。文字間ルビは、現在ではインラインブロックレイアウトに基づき、 行間ルビとの相互作用も 明確に定義されている。 行間ルビのインライン軸方向の空間配分は、 範囲注釈についてより正確に定義された （max-contentグリッドトラックをモデルとしている）。
• 入れ子になったルビの処理を、 行間ルビのブロック軸方向のサイズ決定で、 その基底および注釈コンテナーを考慮することにより定義した。 （課題 4986、課題 4980）
• ruby-alignの動作をより正確に指定した。
• ルビのはみ出しがルビ内容の配置に影響を与えないという要件を緩和し、 ルビ内容と隣接する内容との衝突を生じさせてはならないという要件を追加した。
• 双方向の並べ替えと結合注釈との相互作用を明確にした。 （§ 3.5 双方向の並べ替え）
• 全体にわたって規定の文章を厳密化した。
• はじめに、例、およびその他の参考情報を改善した。

注記: 未解決の課題が多数残っている。コメントの処理状況および GitHub で追跡されている新しい課題を参照。

2014年8月5日付 作業草案以降の変更点

• ルビのはみ出し動作を基本的に制御するため、 ruby-overhang: auto | noneを復活させた。
• インライン化をCSS Display モジュールと調和させた。
• ルビ／圏点が下線／上線と衝突する場合、UA がそれらを移動できるようにした。
• ruby-mergeの算出値が collapseである場合、自動非表示を無効にした。
• デフォルトスタイルシートを調整した。
• テキスト装飾との相互作用を定義する節を追加した。
• ruby-positionのrightおよびleft値を 次のレベルへ延期した。
• ルビのペアリング規則を変更し、 無名注釈（すなわち、 rtcに直接含まれる内容）に対してのみ範囲指定を適用するようにした。
• 余分な基底／注釈を、自動生成された空の無名基底／注釈とペアリングするようにした。
• ruby-positionを::first-lineに適用した。 （課題 2998）
• 他のインラインボックスの場合と同様に、ルビボックスおよび内容の包含ブロックが 最も近いブロックコンテナーであることを明確にした。
• 親が不適切な内部テーブル要素の処理を明確にした。
• ペアリングへの干渉を防ぐため、ルビコンテナー、基底基底コンテナー、および注釈コンテナーの 先頭／末尾の空白を除去するようにした。
• 空の基底コンテナーおよび注釈コンテナーのレイアウトへの影響を定義した。
• ルビ基底コンテナーおよびルビ注釈コンテナーでは、マージン、パディング、およびボーダーを無効にした （ルビ基底およびルビ注釈では無効にしない）。

2013年9月19日付 作業草案以降の変更点

• 無名ボックス生成規則および空白処理規則を書き直し、 無名空白ボックスに特化したペアリングを 定義した。
• 入れ子になったルビの処理をペアリングから除外した。 （サイズ決定／レイアウトによって処理する。）
• ルビ構造の双方向レイアウトを定義した。

2011年6月30日付 作業草案以降の変更点

ruby-spanおよびrbspanへの言及を削除した。

HTML のルビでは、明示的な範囲指定ではなく暗黙的な範囲指定を使用する。 これは、両側にまたがる一部の特殊な病的ケースを処理できないが、 現時点ではこれらに対する要件はないように思われる。 （完全な複雑 XHTML ルビをサポートする実装では、 テーブルのセルの範囲指定を処理するのと同じ特別な方法で、 マークアップから範囲指定を暗黙的に導出できる。 この制御をレベル1に含める必要はないように思われる。）

ruby-overhangおよびruby-align: line-endをレベル2へ延期した。

これは、ある程度複雑で高度な機能である。 この動作を UA 定義とし、許容可能な選択肢の例をいくつか示すことを提案する。

display: rpを要求する課題を終了した: display: noneを使用する。

国際化ワーキンググループは、 rp 要素用の display 値を 要求する課題を追加した。 ruby がルビとして表示される場合、それらは非表示になることが意図されている。 ただし、これはすでに display: none で簡単に実現できる。

ruby-positionの値を、text-emphasis-positionと一致するように変更した。

維持する必要があるinter-characterを除き、 ルビの位置をtext-emphasis-positionと揃える方が理にかなっている。 これは、横書き／縦書きのさまざまな指定の組み合わせを正しく処理できるためである。

ruby-alignの未使用の値を削除した。

left、right、およびendは 必要ない。

ruby-alignのauto、distribute-letter、およびdistribute-spaceを、space-betweenおよびspace-aroundに置き換えた。

auto値は、動作を決定するために内容を調べることに依存していた。 これは、標準の両端揃え規則 （CJK 間では間隔を設けられるが、ラテン文字間では設けられない）とともに、 space-aroundを使用するだけで回避できる。 distribute-letterおよびdistribute-spaceを、 space-betweenおよびspace-aroundに置き換えた。これは、[CSS-FLEXBOX-1]および[CSS-ALIGN-3]の配分 キーワードとの一貫性を確保し、 text-justify: distributeの定義への依存を避けるためである。

熟語のレンダリングを制御するruby-mergeプロパティを追加した。

これはスタイル上の効果であり、構造上の効果ではない。 以前のモデルでは構造上の効果であると仮定し、 マークアップを変更して処理することを提案していた。:(

ruby-positionからinlineを削除した。

これは、すべてのルビ関連要素に display: inline を指定することで実現できる。 付録Aを参照。

デフォルトスタイル規則を追加した

国際化ワーキンググループからの要請による。

無名ボックス生成規則を作成した

また、基底と注釈のペアリングを定義した。 これで、提案されている HTML ルビマークアップのあらゆる複雑な順列を処理できるはずである。

ルビのレイアウトを定義した

空間配分、空白処理、 改行、行の積み重ねなどを詳細に定義した。 双方向については未解決の課題を残した。