HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<bdi>
双方向テキスト隔離（Bidirectional Isolation）要素。周囲のテキストから隔離し、そのテキストの方向性（RTL/LTR）が影響しないようにします。
info
概要
<bdi> 要素は、**双方向テキストの隔離**（Bidirectional Isolation）のために使われます。
この要素で囲まれたテキストブロックは、その方向性が周囲のテキストの流れに影響を与えないように隔離されます。主に、ユーザーが入力したコンテンツや、既知の方向性がない外部のテキストを挿入する際に、レイアウトの崩れを防ぐために役立ちます。
play_circle
デモ (静的表示)
HTML (Source)
<p>
ユーザー1: <bdi>Hello World</bdi>
</p>
<p>
ユーザー2: <bdi>مرحبا بالعالم</bdi>
</p>
Preview (Result)
ユーザー1: Hello World
ユーザー2: مرحبا بالعالم
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| dir | グローバル属性。要素内のテキストの方向性を明示的に指定します。ltr: 左から右（Left-to-Right）rtl: 右から左（Right-to-Left）通常、<bdi>は自動双方向アルゴリズムにテキストの方向性を任せるため、明示的な指定は稀です。 |
code
実用例
1. RTL言語のユーザー名とスコアの表示
アラビア語などのRTL（右から左）のユーザー名が、周囲のLTR（左から右）のスコア表示に影響を与えないように隔離します。
<ul>
<li><bdi>Player 1</bdi>: 100 points</li>
<li><bdi>شخص عربي</bdi>: 95 points</li> <!-- アラビア語のユーザー名 -->
<li><bdi>Player 3</bdi>: 120 points</li>
</ul>
2. bdiなしの比較（問題が発生する例）
アラビア語のテキスト（RTL）が、コロン（:）や数字などの周囲の文字（自動でLTRとして解釈されることが多い）の順序に影響を与える様子を示します。
<div style="text-align: left;">
<span>ユーザー: مرحبا بالعالم : 100</span> <!-- コロンの位置などが意図せず右に寄る可能性がある -->
</div>
ユーザー: مرحبا بالعالم : 100
上記で意図せぬ表示の可能性があるテキストに対し、以下の様に<bdi>で隔離することで、ユーザー名のRTL方向が「: 100」の表示順序を混乱させることを防ぎます。
<div style="text-align: left;">
<span>ユーザー: <bdi>مرحبا بالعالم</bdi> : 100</span>
</div>
lightbulb
知っておくべき重要事項
security
<bdi>と<bdo>の違い
<bdi> は、テキストの**方向性を知らない**場合に、そのテキストが周囲に影響を与えないよう隔離するために使用されます。一方、<bdo> は、**方向性を知っている**場合に、それを明示的に上書きするために使用されます。通常、ユーザー生成コンテンツには <bdi> が適しています。
accessibility_new
自動的な解決
多くのブラウザやレンダリングエンジンは、双方向テキストの問題を自動的に解決するためのヒューリスティック（推論）を持っていますが、
多くのブラウザやレンダリングエンジンは、双方向テキストの問題を自動的に解決するためのヒューリスティック（推論）を持っていますが、
<bdi> を使用することで、特に複雑な多言語の組み合わせにおいて、意図しないテキストの並び順を防ぎ、**確実な表示**を実現できます。