bdiタグ 書字方向を分離する

HTMLの<bdi>ビーディーアイタグは、書字方向（文字が表示される方向）を周囲から切り離したいときに使います。<bdi>の中に右から左へと進む言語が入っていたとしても、周囲のテキストの方向には影響を与えません。

bdiタグの使い方

使いどころ：どんな言語が入るか分からないテキストに

<bdi>は、アラビア語やヘブライ語のように、右から左へと表示される言語がふくまれる可能性がある部分に使います。たとえば、投稿サービスの「名前」欄には、もしかするとアラビア語が入力されるかもしれません。

bdiタグを使わない場合

<h2>現在の状況</h2>
<ul>
  <li><span>John</span> - 1位</li>
  <li><span>Lee</span> - 2位</li>
  <li><span>まさし</span> - 3位</li>
  <li><span> إيان</span> - 4位</li>
</ul>

👆アラビア語の後に書かれた「4」が不自然に前に出てきてしまっているのが分かるかと思います。このように、書字方向が逆の言語が含まれると、その周囲の書字方向まで変わってしまいます。

bdiタグを使う場合

<h2>現在の状況</h2>
<ul>
  <li><bdi>John</bdi> - 1位</li>
  <li><bdi>Lee</bdi> - 2位</li>
  <li><bdi>まさし</bdi> - 3位</li>
  <li><bdi> إيان</bdi> - 4位</li>
</ul>

👆アラビア語を<bdi>タグ内に含めるようにすれば、この問題を解決できます。<bdi>は、書字方向を周囲から分離するからです。周囲には影響を与えないようにできるわけですね。

このように、ユーザー投稿サービスやコメント欄などで「どんな言語が入るか分からない」ところに<bdi>タグを使いましょう。

bdi内のテキストは、周囲に影響を与えない＆受けない

<bdi>内のテキストの書字方向は、周りのテキストに影響を与えないだけでなく、周りからの影響も受けません。

<p>
  إيان<bdi> - 4位</bdi>
</p>

👆つまり、アラビア語自体に<bdi>を使わなくても、その周辺のテキストに<bdi>を使ってもOKです。

bdi内のテキストの書字方向は、自動で判別される

ブラウザは<bdi>内のテキストから自動的に表示する書字方向を決めます。<bdi>アラビア語</bdi>なら、自動でアラビア語の書字方向（右から左）に表示してくれます。

✍️「このテキストは右から左に表示したい」というように、書字方向を自分で指定したい場合は<bdi>ではなく<bdo>タグを使います。

関連するページを読む

bdoタグの使い方 - HTML

bdiとbdoの違いと使い分け

<bdi>と同じく、<bdo>はテキストの書字方向に関わるタグです。これらの違いは以下のようになります。

bdi

その部分の書字方向を周囲のテキストから切り離すために使う。主に、ユーザーによる投稿など、何が入るか分からないテキストに使う

bdo

その部分の書字方向を指定するために使う。bdiと同じく周りの書字方向には影響を与えない。主に、自分自身で文章を書く中で「アラビア語を含めたい」というような場合に使う

詳しくはbdoタグの使い方を参考にしてみてください。