<ruby></ruby>
更新日 | |
---|---|
仕様 | HTML Living Standard |
分類 | フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ |
利用場所 | フレージング・コンテンツが置ける場所 |
内容 | 本文参照 |
ruby要素は、ルビ(ふりがな)を振るテキストの範囲を表します。
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
<ruby>今日<rt>きょう</rt></ruby>
<ruby>
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
<rt>Kanji</rt>
</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つ以上配置します。
- 次のどちらか一方
- フレージング・コンテンツ(ただし、ruby要素およびruby要素の子孫は含められない)
- 単一のruby要素(ただし、子孫にruby要素を含めてはならない)
- 次のどちらか一方
使用例
- ruby要素に対応しているブラウザでは、どちらも同じように表示されます。