過去バージョン

この記事の要点

はBidirectional Override の略。中身のテキスト方向を強制的に上書きするインライン要素 必須の dir 属性で方向を指定。dir="ltr"（左→右）/ dir="rtl"（右→左） 主用途はアラビア語・ヘブライ語などの右書きテキストを左書きで見せたい、デモンストレーションのために逆向きにしたい等 似た要素 は分離 (Isolate)。混在テキストでレイアウト崩れを防ぐ、性格が異なる CSS の direction プロパティでも同じことができるが、意味付けとして HTML 要素を使う方が明確

bdo 要素とは

は Bidirectional Override（双方向上書き）の略です。HTML 内に書かれたテキストの表示方向 (LTR / RTL) を強制的に上書きするためのインライン要素です。

通常、ブラウザは Unicode の双方向アルゴリズムに従って「英字は左から右、アラビア語は右から左」のように自動判定して表示します。これを意図的に上書きしたいときに使うのが です。

基本構文

HELLO WORLD


HELLO WORLD

dir 属性は必須で、次の 2 値のいずれかを指定します。

値	意味	用例
ltr	Left-To-Right（左から右）	右書きの中で一部だけ左書きにしたい
rtl	Right-To-Left（右から左）	左書きの中で一部だけ右書きにしたい

典型的な利用シーン

1. 右書きテキストを意図的に左書きで見せる

アラビア語やヘブライ語の文字を、表示は左書きにしたいケース。Unicode の双方向アルゴリズムを強制的に無効化します。

The word in Hebrew is שלום.

2. プレゼンや問題作成での逆順表示

「文字を逆から書いたらどう見える？」のような演出に。

普通: HELLO
逆順: HELLO

bdi 要素との違い

双方向テキスト関連で似た要素に (Bidirectional Isolate) があります。性格は真逆です。

要素	動作	用途
	方向を強制上書き（必須の dir 属性）	意図的に逆向き表示する
	双方向アルゴリズムから分離し周囲に影響させない	ユーザー名など混在テキストでレイアウト崩れを防ぐ

bdi の例

ユーザー: إيان が投稿しました。

CSS direction との比較

CSS の direction プロパティでも同じ視覚効果を出せますが、意味的には別物です。

方法	性格	使い分け
	HTML 意味タグ	その範囲が「双方向上書き」だと文書構造として明示
CSS direction:rtl	見た目の指定	レイアウト目的、UI のテーマ切替

「双方向テキスト処理の都合で方向を強制している」という意味を込めるなら 、純粋にスタイル目的なら CSS という棲み分けが基本です。

使用上の注意

• dir 属性は必須。値なしの は仕様違反。
• 常用するタグではない。ほとんどの場面で や CSS direction の方が適切。bdo は「強制上書きが本当に必要な場面」専用。
• スクリーンリーダーでは内容が逆順に読まれない場合があるため、アクセシビリティが重要な本文には不向き。

よくある質問

Q: 入力欄にユーザー名を表示するときレイアウトが崩れる
A: それは ではなく の出番。bdi で囲むと周囲のテキスト方向に影響を与えなくなります。

Q: 単に文字列を逆順にしたいなら JavaScript で良くない？
A: 「視覚的に逆順表示」と「文字列を逆順に変換」は別物です。bdo は表示方向の上書きであって、コピーすれば元の順序で取れます。文字列自体を反転したい場合は JS で [...str].reverse().join("") 的に処理する方が適切。

Q: bdo は SEO 的にマイナス？
A: 適切な用途で使えば問題ありません。検索エンジンは文字列をテキストとして取得するため、表示方向の上書きは順位に直接影響しません。