bdiタグ -方向テキスト（Bidirectional Text）を扱う｜HTML辞典
<bdi>タグとは？
<bdi> タグは、双方向テキスト（Bidirectional Text）を扱うためのタグです。
右から左（RTL）や左から右（LTR）のテキストを混在させても、文字の順序が正しく表示されるように制御します。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。
閉じタグの有無
<bdi> は 開始タグ（<bdi>）と閉じタグ（</bdi>）の両方が必要 です。
基本的な記述方法
<p>ユーザー名: <bdi>أحمد</bdi></p>
使用できる主な属性
<bdi> タグ自体には特別な属性はありませんが、自動的に双方向テキストを処理 します。
CSSを使ったデザイン変更
<bdi> タグのテキストは通常のテキストと同じ扱いですが、スタイルを適用できます。
bdi {
font-weight: bold;
color: blue;
}
適切な使用例
✅ 異なる言語のユーザー名を正しく表示する
<p>ユーザー名: <bdi>أحمد</bdi></p>
✅ LTR（左から右）と RTL（右から左）を混在させる
<p>新しいメッセージ: <bdi>علي</bdi></p>
✅ 変数名などを正しく表示する
<p>ユーザー <bdi>משה</bdi> のスコアは 95 です。</p>
適切でない使用例（誤った使い方）
❌ <bdi> を使用しないと混在テキストが崩れる
<!-- NG: LTR と RTL の混在 -->
<p>新しいメッセージ: علي</p>
✅ 正しい書き方（<bdi> でテキストの方向を適切に制御）
<p>新しいメッセージ: <bdi>علي</bdi></p>
<bdi>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<bdi> | 双方向テキストを制御 | RTL / LTR の混在に対応 | ユーザー名、動的テキスト |
<bdo> | テキストの方向を指定 | dir="rtl" で強制変更 | 文章全体の方向制御 |
<span> | インラインテキストの装飾 | 方向制御なし | スタイリングのみ |
使用上の注意点
✅ 異なる言語のテキストを適切に表示する
- アラビア語やヘブライ語など、RTL テキストを含む場合に使用する。
✅ bdi は bdo とは異なり、自動で双方向テキストを処理する
bdoはテキストの方向を強制的に指定するが、bdiは自動で処理する。
関連タグ
まとめ
<bdi> タグは、HTML文書内で 双方向テキストを適切に表示するためのタグ です。
RTL（右から左）と LTR（左から右）のテキストを混在させても、正しい順序で表示できます。
