<ruby>タグは、ルビ注釈を表す際に使用します。
ルビ注釈とは、ベーステキストに添えて表示される短いテキストのことです。
日本語の場合には、フリガナを振る際にも使用されます。
ruby要素とrt要素は、さまざまな種類の注釈に使用できます。
ベーステキストの内容に注釈を添えたり、その部分の発音を示したり、漢字にフリガナを振ったりできます。
現時点ではまだ、HTMLのruby要素のスタイルを
CSSで完全に制御する方法は提供されていません。
やがてCSSが拡張されて、仕様通りのスタイルに指定できる方法がサポートされることが期待されます。
以下のサンプルは、漢字１文字ごとにそれぞれruby要素にしたものと、
漢字２文字をまとめて１つのruby要素にしたものです。
どちらも正しい書き方です。
<p>
<ruby>君<rt>くん</rt></ruby><ruby>子<rt>し</rt></ruby>は
<ruby>和<rt>わ</rt></ruby>して<ruby>同<rt>どう</rt></ruby>ぜず。
</p>
<p>
<ruby>君<rt>くん</rt>子<rt>し</rt></ruby>は
<ruby>和<rt>わ</rt></ruby>して<ruby>同<rt>どう</rt></ruby>ぜず。
</p>
君子は
和して同ぜず。
君子は
和して同ぜず。
以下のサンプルは、熟語単位で１つのruby要素に指定して、漢字のふりがなを振っています。
<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の
<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を
<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する鬼門の
方角を
凝視する
以下のサンプルは、漢字の単語に対応するカタカナが注釈として与えられています。
<ruby>境界面<rt>インターフェース</ruby>境界面
以下のサンプルは、漢字の単語に対応する英訳が注釈として与えられています。
<ruby lang="ja">編集者<rt lang="en">editor</ruby>編集者
以下のサンプルは、漢字で書いた花の読み方を指定しています。
どの字がどの発音ということではなく、「紫陽花」の３字で「あじさい」と読みます。
<ruby>紫陽花<rt>あじさい</ruby>紫陽花
以下のサンプルは、１つのベーステキストに２つのルビ注釈を指定しています。
<ruby>鬱金香<rt>うっこんこう<rt>チューリップ</ruby>鬱金香
以下のサンプルは、２つのルビ注釈でシンボルマークの英語とフランス語の名前を与えています。
<ruby>
♥ <rt> Heart <rt lang=fr> Cœur </rt>
☘ <rt> Shamrock <rt lang=fr> Trèfle </rt>
✶ <rt> Star <rt lang=fr> Étoile </rt>
</ruby>
♥
以下のサンプルでは、ruby要素を入れ子にして、読み方と意味の両方がルビ注釈で示されています。
内側のruby要素は、読み方をルビ注釈として与えています。
外側のruby要素は、意味をルビ注釈として与えています。
<ruby>
<ruby>東<rt>とう</rt>南<rt>なん</rt></ruby>
<rt>たつみ</rt>
</ruby>の方角
東南
の方角
以下のサンプルは上記サンプルと同じような使用例ですが、意味を英語で与えています。
<ruby>
<ruby>東<rt>とう</rt>南<rt>なん</rt></ruby>
<rt lang=en>Southeast</rt>
</ruby>の方角
東南
の方角
以下のサンプルでは、ruby要素を入れ子にして、言語の簡単な説明と、”HT”、”M”、”L”の正式名称がルビ注釈で示されています。
<ruby>
<ruby>HT<rt>Hypertext</rt>M<rt>Markup</rt>L<rt>Language</rt></ruby>
<rt>ドキュメントとアプリケーションを記述するための抽象言語
</ruby>
HTML