<bdi>タグの解説
<bdi>は、ページに指定されている書字方向と分離させて別の書字方向を与えたい範囲を指定します。文章の一部を他の部分から切り離して、異なる書字方向のアルゴリズムを反映させる場合に使用します。
「書字方向」とは、文字を書き進める方向の事です。通常、HTMLで書かれた文書は左横書き（LTR）を想定しています。制作者が英文や日本語を使う限り、特に意識することはありません。しかし、内容の一部にアラビア語などの右横書き（RTL）が存在する場合は、その部分だけを分離する必要があります。
「bdi」とは「Bi-Directional Isolation」の略で、「分離双方向要素」というような意味を持っています。この要素によって隔離されたテキストは、周囲の書字方向から影響を受けず、周囲の書字方向に影響を及ぼしません。
<bdi>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることは適切ではありません。
<bdi>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<bdi>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。文章の中で書字方向が異なる部分を分離します。LTRは「Left to Right」の略で、反対にRTLは「Right to Left」の略です。
LTR <bdi>RTL</bdi> LTR.
文章の書字方向はブラウザが自動的に判断してくれます。書字方向の異なる文字が混在している部分は、これを分離する必要があります。以下の例では、LTRの書式にアラビア語が混ざっている場合に、表示される順番が変わってしまう現象を表しています。
<p>Player <bdi>ارقام عربية</bdi> 123 points.</p>