チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

HTML5のテキストレベルセマンティクス~ルビ関連~

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

テキストレベルセマンティクス関連

テキストのマークアップに用いるタグ

<ruby><rt>りん</rt><rt></rt></ruby>

りん

<ruby><rb></rb><rt>りん</rt><rb></rb><rt></rt></ruby>

りん

<ruby><rb>林檎</rb><rtc><rt>りんご</rt></rtc><rtc><rt>apple</rt></rtc></ruby>

f:id:chooringo:20190209211634p:plain←FFで表示したとき。

<ruby>林檎<rp>(</rp><rt>りんご</rt><rp>)</rp></ruby>

林檎(りんご)


ruby要素

語句にルビをつける。

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
以下の条件1つ以上から構成される
・1つ以上のフレージングコンテンツまたはrb要素
・rp要素の直前または直後に1つ以上のrtまたはrtc要素

コンテンツ属性
・グローバル属性

タグの記載場所
・フレージングコンテンツを配置できる場所

rb要素

ruby要素のベーステキストを表す。
rb要素の直後にrb、rt、rtc、またはrp要素が続く場合、または親要素にそれ以上の内容がない場合は、rb要素の終了タグを省略することが可能。

カテゴリ
・なし

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
ruby要素の子要素として配置可能

rt要素

ルビテキストを表す。
rt要素の直後にrb、rt、rtc、またはrp要素が続く場合、または親要素にそれ以上の内容がない場合は、rt要素の終了タグを省略することが可能。

カテゴリ
・なし

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
rubyまたはrtc要素の子要素として配置可能


rtc要素

ルビテキストコンテナを表す。
rtc要素の直後にrbまたはrtc要素が続く場合、または親要素にそれ以上の内容がない場合は、rtc要素の終了タグを省略することが可能。
現時点ではFFのみ対応している模様。

カテゴリ
・なし

コンテンツモデル
・フレージングコンテンツ
・rtまたはrp要素

コンテンツ属性
・グローバル属性

タグの記載場所
ruby要素の子要素として配置可能

rp要素

ルビ未対応のブラウザに表示される代替テキストを表示する。多くのケースでは()で囲む。
ルビ対応しているブラウザでは表示されない。
rp要素の直後にrb、rt、rtc、またはrp要素が続く場合、または親要素にそれ以上の内容がない場合は、rp要素の終了タグを省略することが可能。

カテゴリ
・なし

コンテンツモデル
・フレージングコンテンツ
・rtまたはrp要素

コンテンツ属性
・グローバル属性

タグの記載場所
・rt要素またはrtc要素の直前または直後に、ruby要素またはrtc要素の子としてとして配置可能