いまさらHTML,CSS入門講座 | HTML5｜rt要素 - テキスト・レベル -

いまさらHTML,CSS講座 > HTML5 > rt要素 - テキスト・レベル -

rt要素

rt要素は、ruby要素の子要素として、または、ruby要素の子要素にrtc要素がある場合のその子要素としてルビテキストを表します。

ruby要素のコンテンツ・モデルは以下の順序の1つ以上で構成されます。

1. 1つ以上のテキスト（フレージング・コンテンツ）またはrb要素。
2. rp要素の直前または直後のいずれかの、1つ以上のrt要素またはrtc要素。

<ruby>漢字<rt>ふりがな</rt></ruby>

モノルビ

モノルビは、漢字とふりがなを個別に関連づけて記述する書式です。

例a）

<ruby>日<rt>に</rt></ruby><ruby>本<rt>ほん</rt></ruby><ruby>語<rt>ご</rt></ruby>で<ruby>話<rt>はな</rt></ruby>します。

表示）

例b）例aは以下のようにもマークアップできます。語とrt要素（ふりがな）が連続する場合のruby要素の開始タグ、終了タグをまとめることができます。以下の例では、「日（に）」「本（ほん）」「語（ご）」のruby要素が1つにまとめられています。

<ruby>日<rt>に</rt>本<rt>ほん</rt>語<rt>ご</rt></ruby>で<ruby>話<rt>はな</rt></ruby>します。

表示）

グループルビ

グループルビは、ふりがなを分割できない（2つの漢字にまたがるふりがななど）単語を記述する書式です。また、未対応のブラウザのレンダリングが「漢字 ふりがな」であるならば、例えば、「日本 にっぽん」となるほうが好ましいケースにもグループルビは有用です。同様のレンダリングを行うブラウザでは、モノルビを適用した場合は「日 に 本 っぽん」とレンダリングされます。

例a）

<ruby>今日<rt>きょう</rt></ruby>
<br>
<ruby>日本<rt>にっぽん</rt></ruby>の<ruby>昨今<rt>さっこん</rt></ruby>

表示）

例b）グループルビの例aのふりがなに括弧を加えた書式です。括弧はrt要素でマークアップされたふりがなを囲い、開き、閉じともにrp要素でマークアップします。なお、ruby要素に対応しているブラウザでは括弧は表示されません。

<ruby>今日<rp>(</rp><rt>きょう</rt><rp>)</rp></ruby>
<br>
<ruby>日本<rp>(</rp><rt>にっぽん</rt><rp>)</rp></ruby>の<ruby>昨今<rp>(</rp><rt>さっこん</rt><rp>)</rp></ruby>

表示）Firefox 33.1.1の場合

熟語ルビ

四字熟語など、漢字が2つ以上連続する場合はrb要素で漢字をそれぞれひらがなに対応するようまとめてマークアップし、続けてrt要素で漢字に対応するひらがなをマークアップします。

例）

<ruby>七<rb>転</rb><rb>八起</rb><rt>しち</rt><rt>てん</rt><rt>はっき</rt></ruby>
<br>
<ruby>山<rb>田</rb><rb>太</rb><rb>郎</rb><rt>やま</rt><rt>だ</rt><rt>た</rt><rt>ろう</rt></ruby>

表示）ただし、rb要素はブラウザのレンダリングに差があります。rp要素で括弧を指定しておいたほうが良いかもしれません。Chrome 39.0の場合、Firefox 33.1.1の場合

ルビコンテナ

ひらがなや、ローマ字など2つのルビを配置する場合はrtc要素でそれぞれのルビを囲います。

例a）モノルビの場合。

<ruby>上<rb>手</rb><rtc><rt>じよう</rt><rt>ず</rt></rtc><rtc><rt>jou</rt><rt>zu</rt></rtc></ruby>

表示）

例b）グループルビの場合。

<ruby>上手<rtc><rt>じようず</rt></rtc><rtc><rt>jouzu</rt></rtc></ruby>

表示）

例c）rtc要素は未対応のブラウザが多いので、rp要素で括弧をマークアップします。

<ruby>上手<rtc><rp>(</rp><rt>じようず</rt><rp>)</rp></rtc><rtc><rp>(</rp><rt>jouzu</rt><rp>)</rp></rtc></ruby>

表示）