HTML Living Standard/bdi
bdi 要素
編集bdi 要素（Bi-directional Isolation）は、HTMLの要素の中で双方向テキストを適切に処理するために使用されます。特に、右から左（RTL）と左から右（LTR）のテキストが混在している場合に、bdi はその範囲を個別に分けて、テキストの方向が他の部分に影響を与えないようにします。この要素は、特に多言語対応のウェブページやアプリケーションで重要です。
概要
編集bdi 要素は、テキストの順序や方向を一時的に隔離するために使用されます。デフォルトでは、ブラウザはテキストの方向を文脈に基づいて決定しますが、bdi 要素を使用することによって、特定の部分においてはその方向が他のコンテンツから影響を受けないようにすることができます。
使用例
編集bdi 要素は、特定のテキスト部分が逆方向のテキスト（例えば、アラビア語やヘブライ語）と混在している場合に特に有効です。以下に簡単な使用例を示します。
<p>これは日本語のテキストです。<bdi>1234</bdi>の部分が反転しません。</p>
この例では、bdi 要素内の「1234」の部分は、周囲のテキストが右から左に変更された場合でも、そのまま左から右の順序を保持します。
- 双方向テキストの隔離:
bdi要素は、その内部に配置されたテキストが他のテキストと異なる方向性を持っている場合でも、その影響を受けずに処理されます。 - 適用範囲の指定:
bdi要素は、HTML内のどんなテキストでも包み込むことができ、対象となる部分だけに影響を与えます。これにより、アラビア語やヘブライ語などの右から左に書かれたテキストが、周囲の左から右に書かれたテキストに誤って影響を与えるのを防ぐことができます。 - CSSでのスタイリング:
bdi要素は、通常のHTML要素と同様にCSSでスタイリングすることができます。これにより、デザインの一貫性を保ちつつ、方向の隔離を行うことができます。
注意点
編集- bdi 要素は、単独でテキストの方向を変更することはできません。代わりに、外部の文脈やCSSのdirectionプロパティと組み合わせて使用することで、その効果が最適に発揮されます。
- 特に双方向テキストが混在するコンテンツで使用することが推奨されます。例えば、アラビア語のテキストが英語と一緒に表示される場合、bdi を使うことで、順序の入れ替えや方向の混乱を防ぐことができます。
まとめ
編集bdi 要素は、HTML文書内で双方向テキストが混在する場合に、テキストの方向性を個別に管理できる便利なツールです。特に、複数の言語が混在するウェブページにおいて、正しいテキストの表示を確保するために不可欠な要素となります。
関連項目
編集- HTML Living Standard/双方向テキスト
- HTML Living Standard/文書の方向性
- HTML Living Standard/span
- HTML Living Standard/bdi