前節 では，ルビに関する基本的な要素を解説した。ここでは，ルビの“単純な記法”の詳細，および，“複雑な記法”で使用する要素を説明する。

　ルビの“単純な記法”では，ひとつの rb 要素にひとつの rt 要素を対応させる。記法は，次のようになる。

<ruby><rb>...</rb><rt>...</rt></ruby>

　たとえば，次のように使用する。

<p>　<ruby><rb>紫陽花</rb><rt>あじさい</rt></ruby>の季節が過ぎると，<ruby><rb>向日葵</rb><rt>ひまわり</rt></ruby>が大輪の花を咲かせるようになる。</p>

お手元の環境では次のような出力になる。

　未対応のブラウザ（認識できない要素のタグを無視する），または，ルビをそれとわかる形で出力できないブラウザ（Netscpe 6，7，および，Opera 6，7，8 など）では，上記は“紫陽花あじさい”，“向日葵ひまわり”となってしまい，ベーステキストとルビテキストの区別がつかない。そのような場合，で，“ルビのかっこ”を示すことができる。rp 要素は ruby 要素の内容として必ず 2 回出現し，次のような形式になる。

<ruby><rb>...</rb><rp>...</rp><rt>...</rt><rp>...</rp></ruby>

　1 つめの rp 要素には，“ルビの開きかっこ”，2 つめの rp 要素には，“ルビの閉じかっこ”を記述する。

　rp 要素を用いて先ほどの例を書き直すと，次のようになる。

<p>　<ruby><rb>紫陽花</rb><rp>（</rp><rt>あじさい</rt><rp>）</rp></ruby>の季節が過ぎると，<ruby><rb>向日葵</rb><rp>（</rp><rt>ひまわり</rt><rp>）</rp></ruby>が大輪の花を咲かせるようになる。</p>

これは，お手元の環境では次のように出力される。

　この場合，ルビをそれとわかるように出力できない，または，ルビに関する要素を理解しないブラウザでは“紫陽花（あじさい）”，“向日葵（ひまわり）”と出力される。

　ルビのかっこをたとえば，CSS の自動生成（Let's begin CSS の“4.8 自動生成(1)”“4.9 自動生成(2)”を参照されたい）で，

rt:before { content: "（"; }
rt:after { content: "）"; }

とすれば rp 要素が不要であるとも考えられなくもないが，これでは，ルビをそれとわかる形で出力するブラウザで，余計なかっこがついてしまう。また，かっこの中の語句にルビが振られる場合，“（向日葵（ひまわり））”のようなかっこの使い方を許さないとすれば（たとえばかっこ「（」「）」の中のかっこは山かっこ「〈」「〉」にして，“（向日葵〈ひまわり〉）”とする，など），CSS で決め打ちしてしまうことが難しくなる。

　ルビの体裁の詳細は，CSS2 では指定できないので，rp 要素を利用しておくのが無難であろう。

　1 つのベーステキストに 2 つのルビテキストを対応させる場合，または，ベーステキストを細かく分割してその各部分にルビテキストを対応させる場合は，次節で説明する“複雑な記法”を使う。

　ルビをベーステキストの上に乗せて表現するブラウザとして，2005 年 8 月現在，Windows 版 Internet Explorer 5.5 および 6 を確認している。

　ルビの体裁は，CSS3 で指定可能になる見込みである（CSS1，CSS2 ではルビの体裁に関する指定はできない）。

　ルビの“複雑な記法”では，2 つの要素が新たに導入される。まず，ベーステキストをくくって表す rbc 要素 を紹介する。この要素は，内容として rb 要素のみを含む。

内容モデル

rb+

rb，ただし空ではいけない

　ルビの“複雑な記法”で，rbc 要素対応して使用されるのが rtc 要素である。ruby 要素の内容として，最大 2 回出現できる。この要素は，内容として rt 要素のみを含む。

内容モデル

rt+

rt，ただし空ではいけない

　ルビの“複雑な記法”は，次節で解説することにしよう。