書字方向が異なるテキストを表す

bdi

< bdi 【 バイディレクショナル 】 >〜</bdi >

bdi要素は、文字列の適切な書字方向が自動的に判別される「双方向アルゴリズム」の適用される範囲を指定します。例えば、日本語の文章に書字方向の異なるアラビア語を混在させるときに、その範囲を指定することで書字方向の誤判断を防げます。

なお、この要素に対してdir属性が省略された場合は、初期値としてautoが与えられます。

カテゴリー ・パルパブルコンテンツ
・フレージングコンテンツ
・フローコンテンツ
コンテンツモデル フレージングコンテンツ
使用できる文脈 フレージングコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

サンプルコード

コロン（:）やセミコロン（;）などの記号や英数字は、書字方向が異なる言語間でも同じように使用される場合があります。一方でコンピューターは、本文中の言語の使い分けや単語の切れ目を判断できないので、意図通りにテキストが表示されない場合があります。以下の例では、bdi要素を使って「:3」がアラビア語と同じ右から左への表示になる問題を解消しています。

<ul>
  <li>投稿者 jcranmer: 12件の投稿</li>
  <li>投稿者 hober: 5件の投稿</li>
  <li>投稿者 （アラビア語） : 3件の投稿</li>
</ul>
<ul>
  <li> 投稿者 <bdi>jcranmer</bdi>: 12件の投稿</li>
  <li> 投稿者 <bdi>hober</bdi>: 5件の投稿</li>
  <li> 投稿者 <bdi>（アラビア語）</bdi>: 3件の投稿</li>
</ul>
Google Chrome

関連記事