HTML

HyperText Markup Language bdo element.

bdo 要素

　bdo要素は、テキストの方向性書式を明示的に指定するために使います。通常、日本語のサイトで、この要素を使うことは稀だと言えますが、ページの一部に、アラビア語など右から左へ読む言語をマークアップしたい場合に、この要素を使うことができます。

　ただし、ブラウザ内部では Unicode が使われていますが、Unicode はテキストの方向性に関する情報を含んでいます。これを Unicode 双方向性アルゴリズムと言います。私達が使う日本語や英語であれば、左から右へ向かう方向として扱われます。アラビア語であれば、右から左へ向かう方向として扱われます。

　例えば、日本語のドキュメントの中に、アラビア語を入れたとしましょう。実は、アラビア語の部分については、bdo要素を使わなくても、自動的に右から左にひっくり返してレンダリングされます。

　このマークアップ例で使われている数値参照とアラビア文字の対応は、次の通りとなります。

　ご覧の通り、マークアップで表された文字の順番と、実際のレンダリングの順番は逆になっています。lang属性に "ar" がセットされていますが、セットされていなくても、結果は同じになります。このように、近年のブラウザであれば、Unicode 双方向性アルゴリズムによって適切にレンダリングされます。

　しかし、近況によっては、必ずしもすべてのブラウザで期待通りにレンダリングされるとは限りません。そのため、強制的にテキストの方向性を指定することが、bdo要素なのです。

　bdo要素に dir属性を指定することで、Unicode 双方向性アルゴリズムにおける方向性に関わらず、その属性に指定された方向が優先されることになります。bdo要素に dir属性は必須です。

　dir属性に "ltr" を指定すると、左から右に向かう方向を、"rtl" を指定すると、右から左に向かう方向を表すことになります。

　先ほどのマークアップを、bdo要素を使って表すと、次のようになります。

　このマークアップも、先程と同じ様にレンダリングされ、違いはありません。しかし、Unicode 双方向性アルゴリズムをサポートしていないブラウザでも、bdo要素に対応していれば、適切にレンダリングされます。bdo要素の特徴を、もう少しわかりやすくするために、日本語の文章を使って見てみましょう。

　マークアップでは、通常通り、左から右に向かって文字を記述しています。しかし、ブラウザでは、逆向きにレンダリングされます。

　この例では、あくまでも bdo要素の特徴を見せるために、あえて日本語を使っていますが、基本的には、このようなシーンはあり得ないはずですので注意してください。デコレーションのために文字を逆向きにしたいのであれば、スタイルシートを使うべきです。

　基本的には、bdo要素は、日本語のドキュメントの中に、アラビア文字のような方向性が逆向きの言語を使いたい場合に使います。そのため、bdo要素には、lang属性を使って、言語を明示的に指定しましょう。

　この要素は以前から規定されていた要素ですので、Internet Explorer、Firefox、Safari、Chrome、Operaなど近年のブラウザは対応しています。

　ただし、前述の通り、現在は、どのブラウザでも Unicode 双方向性アルゴリズムをうまく実装しているため、この要素を使うシーンは限られていると言えるでしょう。ほとんどの場合、グローバル属性の dir属性を使ってコンテンツの方向性を指定し、個々の文字の順番は Unicode 双方向性アルゴリズムに任せておけば、問題なくレンダリングされます。また、dir属性なら、フレージング・コンテンツに限らず、あらゆる要素で利用することができます。

bdo 要素の概要

カテゴリー

フロー・コンテンツ

フレージング・コンテンツ

コンテンツ･モデル

フレージング・コンテンツ

利用可能な場所

フレージング・コンテンツが期待される場所。

タグの省略

不可。開始と終了タグの両方が必要。

Attribute 「属性」

なし

標準的なスタイル

bdo[dir=ltr], bdo[dir=rtl] {
	unicode-bidi: bidi-override;
}