その他のフレージング・コンテンツ

第六章では、今までに紹介しきれなかったものをまとめて紹介していきます。いよいよ終わりが近いですね。

その中でも、今回はフレージング・コンテンツを紹介します。

abbr要素

まず紹介するのがabbr要素です。これは略語です。略語を使うときそれをabbr要素でマークアップする（abbr要素で囲う）ことができます。

また、その略語の正式名称をtitle属性に書くことができます。普段は補足情報なら何を書いてもいいtitle属性ですが、abbr要素の場合は正式名称しか書いてはいけないことになっています。

次のサンプルを見てみましょう。

Webページは<abbr title="HyperText Markup Language">HTML</abbr>で書かれています。

実際に表示されるのは「HTML」という略語ですが、マークアップによってそれは「HyperText Markup Language」の略語であることを示しています。

例えばこのサイトでは、HTMLとはのページなどで使われています。

cite要素

次に紹介するのはcite要素です。これは作品名を表します。間違えられやすいのですが、人名はマークアップできません。

作品ならどんな作品であっても構いません。とにかく題があれば大抵のものは作品としてみなされることでしょう。

他に注意すべき点は、作品名以外の情報を含んではいけないという点です。

仕様書にも載っている分かりやすい例があります。たとえば、次の例は間違った例です。

<cite>WikipediaのHTMLという記事</cite>によると…（略）

なぜなら、これはWikipediaの記事を作品としてみなしていますが、記事名は「HTML」だけでそれ以外は余計な情報だからです。だから、次のようにする必要があります。

Wikipediaの<cite>HTML</cite>という記事によると…（略）

また、q要素などで引用した場合に引用元の文書名を表示するときにcite要素を使うというのもありがちな話ですが、cite要素そのものは引用には使えないので注意しましょう。

bdo要素・bdi要素

bdo要素・bdi要素は、文字列に対する方向制御を表します。

というのも、世の中には左から右だけでなく、右から左に書く文字も存在します。方向制御するということは、その文字列はどちら向きに書くのかを制御するということです。

まず、実はdir属性というグローバル属性があり、"ltr"（左から右）,"rtl"（右から左）,"auto"（分からないからブラウザに決めて欲しい）があります。autoが便利そうですが、あてにならないのでなるべく使わないべきだとされています。

例えば、サンプルとして、次の段落にdir="rtl"を指定してみます。

<p dir="rtl">これは、右から左に書くサンプルです。</p>

これは、右から左に書くサンプルです。

さて、結果は、文全体が右に寄って丸最後に来ただけで、文字の並び自体に変化はなかったはずです。

これは実は、dirグローバル属性による指定は、その文字（今回の場合ひらがなとか漢字とか）に設定されている向き（日本語の場合は左から右）を上書きすることができないからです。CSSで対処することも可能ですが、ここでは解説しません。ついでに、英語の場合のサンプルも見てみましょう。

<p dir="rtl">This is an example of the dir attribute.</p>

This is an example of the dir attribute.

これも日本語と同じような結果になったと思います。

さて、ここで登場するのがbdo要素です。bdo要素を使うことで、これを上書きすることができるのです。使う属性は同じくdir属性ですが、その性質上dir属性は必須となっています。

<p><bdo dir="rtl">これは、右から左に書くサンプルです。</bdo></p>

これは、右から左に書くサンプルです。

このように、bdo要素を使うと文字の方向を明示的に変更することができるのです。

次に登場するbdi要素はまた少し違うものです。

bdi要素は、方向処理においてテキストを前後から孤立させる際に使うものです。

これがないと困る場合というのは、いいサンプルが無かったので仕様書からの引用ですが、次のような場合です。

<ul>
 <li>User jcranmer: 12 posts.</li>
 <li>User hober: 5 posts.</li>
 <li>User إيان: 3 posts.</li>
</ul>

掲示板か何かの各投稿者の投稿量を示しています。これを実際に表示すると、次のようになります。

• User jcranmer: 12 posts.
• User hober: 5 posts.
• User إيان: 3 posts.

一番下のアラビア語の名前の人が、前の数字を巻き込んで右から左になっているため変な表示になります。

この名前というのは、ページを作った人ではなくページを利用する側が決めるものですから、どんな名前が使われるか予想が付きません。このように、左から右しか想定していないと想定外の状況が発生する可能性があります。

こういうときに使うのがbdi要素なのです。bdi要素は、テキスト中で孤立して扱われます。これは、img要素などと同じ扱われ方になり、例えるなら「箱」のようなものです。

文中に、bdi要素がこのように箱のような形であり、中と外で互いに影響を与えません。

つまり、bdi要素の中がたとえ右から左であろうとその外は影響を受けないということです。つまり、何が入るか分からないところをbdiで囲めばいいのです。

<ul>
 <li>User <bdi>jcranmer</bdi>: 12 posts.</li>
 <li>User <bdi>hober</bdi>: 5 posts.</li>
 <li>User <bdi>إيان</bdi>: 3 posts.</li>
</ul>

これを実際にやってみると、次のようになります。

• User jcranmer: 12 posts.
• User hober: 5 posts.
• User إيان: 3 posts.

残念ながら、現在（2011年4月19日）対応しているブラウザはありませんでしたが、次のような表示が理想です。

• User jcranmer: 12 posts.
• User hober: 5 posts.
• User إيان: 3 posts.

ruby要素

次に紹介するruby要素です。これはルビをつけるための要素です。

ルビとは、文字の上とかに読み方を記したものです。日本語でいうところのふりがなですね。

使い方は、まずルビをつけたい所をruby要素で囲みます。

<ruby>漢字</ruby>

そして、ルビを付ける部分（複数文字でも構いません）の直後にrt要素でルビを書きます。つまりこうなります。

<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>

実際にやってみると、こうなります。漢かん字じ

現在のところOperaは対応していませんでしたが、対応しているChromeで試すとと表示されました。「漢」の上に「かん」が、「字」の上に「じ」が乗っているのが分かると思います。

<ruby>漢字<rt>かんじ</rt></ruby>

のようにすると、漢字かんじとなります。「漢字」の2文字の上に「かんじ」が乗っているようになります。

さて、対応していないブラウザだと「漢字かんじ」のようになり間抜けです。せめて「漢字（かんじ）」と表示されてくれればいいんですが、実はそのための要素があります。

それがrp要素です。rp要素はrt要素と同じくruby要素中で使えるものですが、常に無視されます。しかし、ruby要素に対応していないブラウザはそんなことを知らないので、rp要素の中身も表示します。これを利用しましょう。つまり、rp要素の中にカッコを入れておくのです。

<ruby>漢字<rp>（</rp><rt>かんじ</rt><rp>）</rp></ruby>

その性質上、rp要素はrt要素の直前または直後でしか使えません。このサンプルを表示すると漢字（かんじ）となります。

rubyに対応しているブラウザではrpが無視されるため何も変わりませんが、まだ対応していないOperaではのように表示されます。