タイトル: bdo要素
SEOタイトル: HTML bdo要素（双方向テキストの方向を強制 / dir 属性の使い方 / bdi との違い）
| この記事の要点 |
|
bdo 要素とは
<bdo> は Bidirectional Override（双方向上書き）の略です。HTML 内に書かれたテキストの表示方向 (LTR / RTL) を強制的に上書きするためのインライン要素です。
通常、ブラウザは Unicode の双方向アルゴリズムに従って「英字は左から右、アラビア語は右から左」のように自動判定して表示します。これを意図的に上書きしたいときに使うのが <bdo> です。
基本構文
<!-- 通常: 左から右に表示 -->
<p>HELLO WORLD</p>
<!-- bdo で逆順表示 -->
<p><bdo dir="rtl">HELLO WORLD</bdo></p>
<!-- 表示は: DLROW OLLEH -->dir 属性は必須で、次の 2 値のいずれかを指定します。
| 値 | 意味 | 用例 |
|---|---|---|
ltr | Left-To-Right（左から右） | 右書きの中で一部だけ左書きにしたい |
rtl | Right-To-Left（右から左） | 左書きの中で一部だけ右書きにしたい |
典型的な利用シーン
1. 右書きテキストを意図的に左書きで見せる
アラビア語やヘブライ語の文字を、表示は左書きにしたいケース。Unicode の双方向アルゴリズムを強制的に無効化します。
<p>The word in Hebrew is <bdo dir="ltr">שלום</bdo>.</p>2. プレゼンや問題作成での逆順表示
「文字を逆から書いたらどう見える？」のような演出に。
<p>普通: HELLO</p>
<p>逆順: <bdo dir="rtl">HELLO</bdo></p>
<!-- 表示は OLLEH -->bdi 要素との違い
双方向テキスト関連で似た要素に <bdi> (Bidirectional Isolate) があります。性格は真逆です。
| 要素 | 動作 | 用途 |
|---|---|---|
<bdo> | 方向を強制上書き（必須の dir 属性） | 意図的に逆向き表示する |
<bdi> | 双方向アルゴリズムから分離し周囲に影響させない | ユーザー名など混在テキストでレイアウト崩れを防ぐ |
bdi の例
<!-- ユーザー名 (アラビア語) が周囲のレイアウトを崩さないように -->
<p>ユーザー: <bdi>إيان</bdi> が投稿しました。</p>CSS direction との比較
CSS の direction プロパティでも同じ視覚効果を出せますが、意味的には別物です。
| 方法 | 性格 | 使い分け |
|---|---|---|
<bdo dir="rtl"> | HTML 意味タグ | その範囲が「双方向上書き」だと文書構造として明示 |
CSS direction:rtl | 見た目の指定 | レイアウト目的、UI のテーマ切替 |
「双方向テキスト処理の都合で方向を強制している」という意味を込めるなら <bdo>、純粋にスタイル目的なら CSS という棲み分けが基本です。
使用上の注意
dir属性は必須。値なしの<bdo>は仕様違反。- 常用するタグではない。ほとんどの場面で
<bdi>や CSS direction の方が適切。bdo は「強制上書きが本当に必要な場面」専用。 - スクリーンリーダーでは内容が逆順に読まれない場合があるため、アクセシビリティが重要な本文には不向き。
よくある質問
Q: 入力欄にユーザー名を表示するときレイアウトが崩れる
A: それは <bdo> ではなく <bdi> の出番。bdi で囲むと周囲のテキスト方向に影響を与えなくなります。
Q: 単に文字列を逆順にしたいなら JavaScript で良くない？
A: 「視覚的に逆順表示」と「文字列を逆順に変換」は別物です。bdo は表示方向の上書きであって、コピーすれば元の順序で取れます。文字列自体を反転したい場合は JS で [...str].reverse().join("") 的に処理する方が適切。
Q: bdo は SEO 的にマイナス？
A: 適切な用途で使えば問題ありません。検索エンジンは文字列をテキストとして取得するため、表示方向の上書きは順位に直接影響しません。