<bdi>: BDI 要素
最終更新：2026-10-13
<bdi>BDI 要素
双方向分離（Bi-directional isolation）：テキストを独立した方向セグメントとして扱い、方向の混在を防ぎます。
| カテゴリ | テキスト内容 |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </bdi> タグ |
| ステータス | 標準 |
📝 構文
<bdi>ユーザー名</bdi>▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <bdi> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： bdi は dir="auto" と似ていますが、強い分離境界を作ります。信頼できないユーザー入力に最適です。
❓ よくある質問
Qbdi タグは何に使うものですか？
A
<bdi>（Bi-Directional Isolation）は、その部分の文字の方向を周囲から隔離し、混在テキストで順序が崩れるのを防ぎます。典型的なのは、ユーザー名やコメント欄にアラビア語・ヘブライ語の内容が混ざったとき、句読点や数字の表示順が巻き込まれるのを防ぐ場面です。Qbdi と unicode-bidi プロパティの違いは何ですか？
A
<bdi> は意味づけ済みの即戦力で、ブラウザが内部の文字方向を自動判定して隔離します。CSS の unicode-bidi: isolate は下位の仕組みで、効果は似ていますが direction を手動指定する必要があります。楽で意味も明確な <bdi> を優先しましょう。Qbdi が必須になるのはどんなときですか？
A「制御できない第三者のテキスト」を表示するときです。コメントの投稿者名・チャットのニックネーム・ファイル名の一覧などが該当します。たとえば
<li><bdi>أحمد</bdi>：コメント本文</li> のように書けば、ユーザー名がどの言語でも行全体のレイアウト方向には影響しません。静的で自分の書いた混在テキストなら、通常は不要です。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
