bdoタグ -テキストの表示方向を強制的に変更する｜HTML辞典
<bdo>タグとは？
<bdo> タグは、テキストの表示方向を強制的に変更するためのタグです。
通常の HTML ではテキストの方向は言語に応じて自動で設定されますが、<bdo> を使うと左から右（LTR）や右から左（RTL）の順序を明示的に指定できます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。
閉じタグの有無
<bdo> は 開始タグ（<bdo>）と閉じタグ（</bdo>）の両方が必要 です。
基本的な記述方法
<p>この単語を逆向きに表示: <bdo dir="rtl">Hello</bdo></p>
使用できる主な属性
<bdo> タグには、テキストの方向を指定する dir 属性があります。
| 属性名 | 説明 | 例 |
|---|---|---|
dir | テキストの方向を指定（ltr または rtl） | <bdo dir="rtl">テスト</bdo> |
CSSを使ったデザイン変更
<bdo> タグのテキストは通常のテキストと同じ扱いですが、スタイルを適用できます。
bdo {
font-weight: bold;
color: red;
}
適切な使用例
✅ 右から左（RTL）のテキストを強制的に適用
<p>これは <bdo dir="rtl">Hello</bdo> という単語を逆向きに表示します。</p>
✅ 左から右（LTR）のテキストを強制適用（通常の英語の並び）
<p><bdo dir="ltr">مرحبا</bdo> は左から右に表示されます。</p>
適切でない使用例（誤った使い方）
❌ dir 属性を指定しないと動作しない
<!-- NG: dir 属性なし -->
<bdo>こんにちは</bdo>
✅ 正しい書き方（dir を指定）
<bdo dir="rtl">こんにちは</bdo>
❌ <bdo> を不適切な用途で使用する
<!-- NG: 通常のテキストに使用 -->
<p><bdo dir="ltr">今日は月曜日です。</bdo></p>
✅ 正しい書き方（特定の用途で使用）
<p>これは <bdo dir="rtl">Hello</bdo> という単語を逆向きに表示します。</p>
<bdo>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<bdo> | テキストの方向を強制変更 | dir で LTR / RTL を指定 | アラビア語、ヘブライ語の制御 |
<bdi> | 双方向テキストを自動処理 | 自動で適切な方向を適用 | ユーザー名、動的テキスト |
<span> | インラインテキストの装飾 | 方向制御なし | スタイリングのみ |
使用上の注意点
✅ dir 属性を必ず指定する
ltr（左から右）またはrtl（右から左）のどちらかを設定する。
✅ bdi との違いを理解する
bdiは自動で方向を調整するが、bdoは明示的に方向を指定する。
関連タグ
まとめ
<bdo> タグは、HTML文書内で テキストの方向を強制的に変更するためのタグ です。dir 属性を適切に設定し、アラビア語やヘブライ語などのテキストを明示的に調整できます。
