ルビを振るテキストの範囲を表す

ruby要素は、ルビ（ふりがな）を振るテキストの範囲を表します。

ruby要素は、テキストにルビを振りたい場合に使用します。この要素内にベーステキストを配置して、rt要素でルビテキストを記述します。必要に応じてrp要素も使用することができます。

• ruby要素 … ルビを振るテキストの範囲
• ベーステキスト … ルビの対象となるテキスト
• rt要素 … ルビテキスト（ふりがなの文字列）
• rp要素 … 未対応ブラウザで表示される記号（括弧など）

次の例では、太郎にルビを振っています。

<p>私の名前は<ruby>太<rt>た</rt>郎<rt>ろう</rt></ruby>です。</p>

上記の場合は、太と郎がベーステキスト、たとろうがルビテキストとなります。

未対応ブラウザ向けの指定

ルビに対応していないブラウザでは、ルビテキストが次のように表示されてしまいます。

しかし、rp要素を使って次のように記述すると、ルビテキストが括弧付きで表示されるようになります。（rt要素の前後にrp要素を配置します）

<p>私の名前は<ruby>太<rp>（</rp><rt>た</rt><rp>）</rp>郎<rp>（</rp><rt>ろう</rt><rp>）</rp></ruby>です。</p>

分かりやすくするために改行を入れてみます。

<p>
私の名前は
<ruby>
太<rp>（</rp><rt>た</rt><rp>）</rp>
郎<rp>（</rp><rt>ろう</rt><rp>）</rp>
</ruby>
です。
</p>

• ルビに対応しているブラウザでは、rp要素の内容（括弧）は表示されません。

rp要素の詳細については、下記のページを参考にしてください。

• ルビテキストを囲む括弧を表す

ルビの振り方に関して

ルビの振り方には複数の方法が用意されていますが、ここでは3種類の振り方に絞って以下にご紹介します。

• 詳細な情報は仕様書でご確認ください。

モノルビ

モノルビは、1文字ごとにルビを振りたい場合の書き方です。これは、文字ごとの読み方などを伝えたい場合に使用します。

<ruby>
漢<rt>かん</rt>
字<rt>じ</rt>
</ruby>

※rp要素は省略しています。

グループルビ

グループルビは、テキスト全体にルビを振りたい場合の書き方です。これは、1対1の関連付けが困難な場合の読み方、意味的な読み方、または翻訳などを伝えたい場合に使用します。

<ruby>
今日<rt>きょう</rt>
</ruby>

<ruby>
幸運<rt>ラッキー</rt>
</ruby>

<ruby>
編集者<rt lang="en">editor</rt>
</ruby>

※rp要素は省略しています。

両側ルビ

両側ルビは、対象のテキストに対して2種類のルビを振ることができます。これは、読み方と意味の両方を伝えたい場合や、読み方と翻訳を伝えたい場合などに使用します。

次の例では、ruby要素を入れ子にして読み方と翻訳を伝えています。

<ruby>
<ruby>辞<rt>じ</rt>書<rt>しょ</rt></ruby>
<rt lang="en">dictionary</rt>
</ruby>

※rp要素は省略しています。

上記の場合、対応しているブラウザでは辞書の上にじしょが表示され、更にその上にdictionaryが表示されます。

両側ルビには以下のような書き方もありますが、意図したとおり（？）に表示されるブラウザは確認できませんでした。（2022年1月現在）

この書き方では、ベーステキストの後に2つのrt要素を配置しています。

<ruby>
今日<rt>きょう</rt><rt lang="en">today</rt>
</ruby>

※rp要素は省略しています。

要素の内容に関して

ruby要素の内容には、以下の順序の組を1つ以上配置します。

1. 次のどちらか一方
   • フレージング・コンテンツ（ただし、ruby要素およびruby要素の子孫は含められない）
   • 単一のruby要素（ただし、子孫にruby要素を含めてはならない）
2. 次のどちらか一方
   • 1つ以上のrt要素
   • rp要素の後に1つ以上のrt要素が続き、その後にrp要素が続く