ruby  new : ふりがな・ルビ全体

カテゴリ

デモ

<p><ruby>base<rt>annotation</rt></ruby></p>
<p><ruby>東<rb>京</rb><rp>(</rp><rt>とう</rt><rt>きょう</rt><rp>)</rp></ruby></p>
<p><ruby><rb>旧</rb><rb>金</rb><rb>山</rb><rt>jiù</rt><rt>jīn</rt><rt>shān</rt><rtc>San Francisco</rtc></ruby></p>
↑この領域は編集できます(シンタックスハイライトは同期しません)。

説明

ふりがな・ルビ。 長らくInternet Explorerの独自拡張だったものが正式に採用された。 それに伴って実装も進み、基本的なモダンブラウザはすべて対応している。

基本的にruby要素内の先頭のテキストがルビをふる対象(暗黙的にruby開始タグの直後にrb開始タグが省略されている)、続くrt要素内のテキストがルビになる。
<ruby>base<rt>annotation</rt></ruby>

ちょっと長いが、rpを用いて非対応ブラウザ向けの対応をしておくとよりアクセシビリティが高まる。
<ruby>東<rb>京</rb><rp>(</rp><rt>とう</rt><rt>きょう</rt><rp>)</rp></ruby>

rtcを用いて、1つの文字列に2つのルビを触れるようになっている。
<ruby><rb>旧</rb><rb>金</rb><rb>山</rb><rt>jiù</rt><rt>jīn</rt><rt>shān</rt><rtc>San Francisco</rtc></ruby>
複数ルビに関しては、HTML5.3で実装が変更予定の模様。