HTML & CSS - bdi タグ

基本的な使い方

bdi タグは、文字が表示される方向（書字方向）が異なるテキストを表します。例えば、日本語は左から右に向かって書きますが、アラビア語やヘブライ語などは右から左に向かって書きます。bdi タグで囲まれたテキストは、適切な書字方向を自動的に判別されます。

bdi タグは、どのような言語が入るかわからないテキストに対して使用します。例えば、世界中のユーザが自由に投稿できるサービスなどに使用します。

<bdi>الوعد سحاب و الفعل مطر</bdi>
<!-- 約束は雲、実行は雨。（アラビア語のことわざ）-->

使用上の注意

もしも、書字方向が異なるテキストに bdi タグが使われない場合、そのテキストの周囲の書字方向まで変わってしまう可能性があります。

bdi タグを使うと、書字方向を周囲のテキストから分離することができるため、影響を与えることはありません。また、同時に bdi タグに囲まれたテキストは周囲の書字方向の影響を受けません。そのため、例えばアラビア語自体に bdi タグを使用しなくても、その周囲のテキストを bdi タグで囲んでも正しく表示されます。

bdi と bdo の違い

bdi タグと bdo タグは、書字方向に関するタグです。これらの違いは、以下のようになります。

bdi タグ

テキストの書字方向を周囲のテキストから分離するために使用します。例えば、世界中のユーザが自由に投稿できるサービスなど、何が入るかわからないテキストに対して使用します。

bdo タグ

テキストの書字方向を指定するために使用します。例えば、ドキュメントにアラビア語など書字方向が異なるテキストを明示的に含める場合に使用します。

外部リンク