<ruby> - ルビ
概要
- 形式
<ruby>～</ruby>- サポート
- https://caniuse.com/ruby
- カテゴリ
- フローコンテンツ
- フレージングコンテンツ
- パルパブルコンテンツ
- 親要素
- フレージングコンテンツ を子要素として持てるもの
- 子要素
- rb, rt, rp, rtc 要素, テキスト
- タグの省略
- 開始タグ:必須 / 終了タグ:必須
- 属性
- グローバル属性
説明
ruby、rb、rbc、rp、rt、rtc は、日本語などの言語で「ルビ」をふるための要素です。2001年5月31日にW3Cから勧告(http://www.w3.org/TR/ruby/)されました。rbc を除く要素は HTML5 でも採用されました。HTML Living Standard では、rt, rp, ruby のみを採用しています。
属性
使用例
シンプルな使用方法(ruby, rt)
ルビのシンプルな利用方法を下記に示します。rt はルビテキスト(Ruby Text)を意味します。
<ruby> 紫陽花 <rt>あじさい</rt> </ruby>
ルビに対応したブラウザでは、次のように表示されます。
ただし、ルビに未対応のブラウザでは、次のように表示されます。
ルビボディ(rb)
HTML Living Standard では採用されていませんが、HTML5 では、ルビをふる対象を明確にする rb を採用しています。rb はルビボディ(Ruby Body)を意味します。
<ruby> <rb>紫陽花</rb> <rt>あじさい</rt> </ruby>
ルビ未対応ブラウザへの配慮(rp)
ルビに未対応のブラウザに対応するために、rp要素を用います。rp はルビ括弧(Ruby Parentheses)を意味します。
<ruby> 紫陽花 <rp>(</rp> <rt>あじさい</rt> <rp>)</rp> </ruby>
ルビに対応したブラウザでは、rp要素は無視され、次のように表示されます。
ルビに対応していないブラウザでは、ruby, rb, rt, rp タグが無視され、次のように表示されます。
文字毎にルビを振る(rb, rt)
下記の様にすることで、文字毎にルビをふることができます。ただし、この場合、ルビ未対応のブラウザでは「山やま田だ太た郎ろう」と表示されてしまいます。
<ruby> <rb>山</rb> <rt>やま</rt> <rb>田</rb> <rt>だ</rt> <rb>太</rb> <rt>た</rt> <rb>郎</rb> <rt>ろう</rt> </ruby>
HTML5 では下記の様に表記することもできるようになりました。Firefox でサポートされていますが、Chrome 62 ではまだサポートされていないようです。
<ruby> <rb>山</rb><rb>田</rb><rb>太</rb><rb>郎</rb> <rt>やま</rt><rt>だ</rt><rt>た</rt><rt>ろう</rt> </ruby>
意味上の注釈(rtc)
発音上の注釈(<rt>)に加えて、意味上の注釈(<rtc>)を付加することもできます。rtc は Ruby Text Container の略称です。HTML5 や HTML Living Standard には採用されていません。
<ruby> <rb>英</rb> <rb>国</rb> <rt>えい</rt> <rt>こく</rt> <rtc>United Kingdom</rtc> </ruby>
ルビボディコンテナ(rbc)
rbc はルビボディコンテナ(Ruby Body Container)の略でルビの対象を示します。<ruby>～</ruby> の中には、ひとつの rbc要素と、ひとつかふたつの rtc要素を含むことができます。通常、ひとつ目の rtc は横書きの場合はルビの主体の上側、縦書きの場合はルビの主体の右側に表示されます。ふたつ目の rtc は横書きの場合はルビの主体の下側、縦書きの場合はルビの主体の左側に表示されます。rbspan属性には、対応する rb要素の数を指定します。HTML5 や HTML Living Standard では <rbc> や rbspan属性は採用されていません。
<ruby>
<rbc>
<rb>山</rb>
<rb>田</rb>
<rb>太</rb>
<rb>郎</rb>
</rbc>
<rtc>
<rt>やま</rt>
<rt>だ</rt>
<rt>た</rt>
<rt>ろう</rt>
</rtc>
<rtc rbspan="4">
<rt>Yamada Taro</rt>
</rtc>
</ruby>
関連項目
リンク
- https://html.spec.whatwg.org/#the-ruby-element
- https://developer.mozilla.org/ja/docs/Web/HTML/Element/ruby
- https://caniuse.com/ruby