株式会社K-fix

テキストの意味づけ要素（4/4）

ruby要素（ルビ）

カテゴリ	フロー・コンテンツ、フレージング・コンテンツ
コンテンツモデル	フレージング・コンテンツの後に、rt要素1つだけ、またはrp要素、rt要素、rp要素の順番で並んだ塊が続く。この一連のグループを1つ以上入れなければならない。
利用可能な場所	フレージング・コンテンツが期待される場所
開始タグ	必須
終了タグ	必須
要素固有のコンテンツ属性	なし
デフォルトスタイル	ruby{ display:ruby; }

ruby要素は、ルビを伴ったテキストを表します。ルビ・テキストにはrt要素を使います。基本的には、HTML5のruby要素は単純ルビをサポートします。

■利用例

  <p>作者の名前は
  	<ruby>
		江戸川<rt>えどがわ</rt>
		乱歩<rt>らんぽ</rt>
    </ruby>
  </p>

利用例をブラウザ上で表示すると次の図のようになります。

ルビの意味合いからするとruby要素で囲みますが、実際の読み仮名は、rt要素で囲みます。

ruby要素のレンダリングをサポートしていないブラウザでは、非常に読みにくく、分かりづらいものになります。したがって、それを考慮すればルビを括弧で囲んだ表記にすることで、まだ分かりやすくなります。古いブラウザを意識しないのであれば、そのままruby要素を使っても構いませんが、それらはWeb制作者の判断に任すしかないようです。

rt要素（ルビのテキスト）

カテゴリ	なし
コンテンツモデル	フレージング・コンテンツ
利用可能な場所	ruby要素の子として
開始タグ	必須
終了タグ	該当のrt要素の直後にrt要素またはrp要素が来る場合、または該当のrt要素が親要素の中で最後の要素となる場合は省略ができる。
要素固有のコンテンツ属性	なし
デフォルトスタイル	rt{ display:ruby-text; }

rt要素は、ruby要素の中だけで利用できるルビ・テキストを表します。

rp要素（ルビの括弧）

カテゴリ	なし
コンテンツモデル	フレージング・コンテンツ
利用可能な場所	ruby要素の子として、rt要素の直前か直後でなければならない。
開始タグ	必須
終了タグ	該当のrp要素の直後にrt要素またはrp要素が来る場合、または該当のrp要素が親要素の中で最後の要素となる場合は省略ができる。
要素固有のコンテンツ属性	なし
デフォルトスタイル	rp{ display:none; }

rp要素は、ruby要素に対応していないブラウザに対して、ルビに括弧を付けるために使います。

■利用例

  <p>作者の名前は
  	<ruby>
		江戸川<rp>(</rp><rt>えどがわ</rt><rp>)</rp>
		乱歩<rp>(</rp><rt>らんぽ</rt><rp>)</rp>
    </ruby>
  </p>

ブラウザ上では次の図のように表示されます。

ruby要素に対応したブラウザは、このrp要素は無視されます。見た目はルビそのものではありませんが、日本語の文章として不自然さはありません。

bdo要素（方向性書式制御）

カテゴリ	フロー・コンテンツ、フレージング・コンテンツ
コンテンツモデル	フレージング・コンテンツ
利用可能な場所	フレージング・コンテンツが期待される場所
開始タグ	必須
終了タグ	必須
要素固有のコンテンツ属性	なし
デフォルトスタイル	bdo[dir=ltr],body[dir=rtl]{ unicode-bidi:bidi-override; }

bdo要素は、テキストの方向性書式を明示的に指定するために使います。

通常、日本語のサイトで、この要素を使うことは稀です。ページの一部に、アラビア語など右から左へ読む言語をマークアップする時にこの要素を使います。

■利用例

  <p><bdo dir="rtl">逆向きにレンダリングされます。</bdo></p>

利用例をブラウザ上で表示すると次の図のようになります。

基本的には、bdo要素は、日本語のテキストの中にアラビア文字などのように右から左にテキストの向きがなされる場合に使います。よって、bdo要素には、langコンテンツ属性を使って、言語を明示的に指定します。

span要素（一般的なテキスト範囲）

カテゴリ	フロー・コンテンツ、フレージング・コンテンツ
コンテンツモデル	フレージング・コンテンツ
利用可能な場所	フレージング・コンテンツが期待される場所
開始タグ	必須
終了タグ	必須
要素固有のコンテンツ属性	なし
デフォルトスタイル	-

span要素は、それ自身が何か意味を持つわけではありません。コンテンツ属性を組み合わせることで、他のテキストと区別するために使います。

■利用例

  <p>英語で<span class="word">Rinse</span>は、<b>洗い流す</b>
  という意味です。</p>

利用例の中で、「Rinse」という単語は、強調や重要性を持たせているのではありません。別の国の言葉ということを表すために、何かしらの要素でマークアップをしたいときに、他の文章と区別したいにもかかわらず、適切な要素がない場合にspan要素を使います。また、classコンテンツ属性を使って、スタイルシートにフックすることもできます。