<bdi>双方向アルゴリズムからの分離

<bdi>タグは、双方向テキスト内から、その範囲が分離・独立している事を表す要素です。

例えば英語などの左から右に書く言語と、アラビア語・ヘブライ語などの右から左に書く言語とを混在させた場合、通常は双方向アルゴリズムによって適切に表示されます。 しかし場合によっては、本来とは逆の方向で配置されるなど、意図しない順序で表示される事があります。 このような場合にbdi要素を用いて双方向アルゴリズムの適用から分離させる事で、意図した配置で表示させることができるようになります。

このようにbdi要素は、前後のテキストに双方向アルゴリズムの影響を与えないようにする目的で使用します。 ただし主要なブラウザではbdi要素に対応していないようです。

なおbdi要素のdir属性の標準値は「auto」となります。

書式

  • <bdi 属性="値">~</bdi> ……… 隔離されたテキストを表す

使用した時の例

<p>User <bdi>ميسير</bdi>: 2016/12/15<p>

ブラウザ上の表示例

User ميسير: 2016/12/15

※bdi要素を使用しない場合、User ميسير: 2016/12/15と表示される

対応ブラウザなどのデータ

形式 <bdi>~</bdi> カテゴリ フローコンテンツ, フレージングコンテンツ, パルパブルコンテンツ
親要素 フレージングコンテンツが期待される場所 子要素 フレージングコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Google Chrome16~ , Firefox10~