見出し画像

ルビ関連要素(HTML)

以前、「ruby」について こちらの記事で書いたものの(↓)

関連する要素が理解できていなかったので、まとめ。


(1)ruby要素

(2)以降の要素の「親」となる要素。

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

(例)

<ruby>
朝寝坊
<rt>あさねぼう</rt>
</ruby>



(2)rb要素

Ruby Baseの略で、ruby要素の子要素として使用する。

ルビが難しくない場合は、ruby要素を使って記述すれば良いので
特にrb要素を使わなくとも記述することができる。

rb要素が必要となるのは、漢字ごとにルビを分けたい場合など。

(例)

<ruby>
<rb>朝</rb><rb>寝</rb><rb>坊</rb>
<rt>あさ</rt><rt>ね</rt><rt>ぼう</rt>
</ruby>


(3)rp要素

Ruby Parenthesesの略で、ruby要素の子要素として使用する。

ルビテキストを囲む括弧記号などを指定する。
(未対応ブラウザでも分かりやすくしたい場合など)

(例)

<ruby>
朝寝坊<rp>(</rp><rt>あさねぼう</rt><rp>)</rp>
</ruby>


(4)rt要素

Ruby Textの略で、ruby要素の子要素として使用する。いわゆるルビ。


(5)rtc要素

ルビが1種類(rt要素のコンテナが1つ)の場合は、
rt要素を使って記述すれば良いので
特にrtc要素を使わなくとも記述することができる。

rtc要素が必要となるのは、rt要素のコンテナを2つ設定したい場合など。
(rt要素に加えて、明示的にルビテキスト欄を用意するイメージ)

(例)

<ruby>
<rb>朝</rb><rb>寝</rb><rb>坊</rb>
<rt>あさ</rt><rt>ね</rt><rt>ぼう</rt>
<rtc>Oversleeping</rtc>
</ruby>


rtc要素のルビテキストを分割する場合は、rtc要素内にrt要素をネストして記載する。

(例)

<ruby>
<rb>朝</rb><rb>寝</rb><rb>坊</rb>
<rt>あさ</rt><rt>ね</rt><rt>ぼう</rt>
<rtc><rt>asa</rt><rt>ne</rt><rt>bou</rt></rtc>
</ruby>


【出典】



いいなと思ったら応援しよう!