◀ 17.

HTML bdo要素（双方向テキストの方向を強制 / dir 属性の使い方 / bdi との違い）

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

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 値のいずれかを指定します。

値意味用例
ltrLeft-To-Right（左から右）右書きの中で一部だけ左書きにしたい
rtlRight-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: 適切な用途で使えば問題ありません。検索エンジンは文字列をテキストとして取得するため、表示方向の上書きは順位に直接影響しません。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. h1～h6要素
  2. p要素
  3. blockquote要素
  4. q要素
  5. cite要素
  6. ins要素
  7. del要素
  8. HTML em 要素（強調）の使い方と strong との違い
  9. br要素
  10. abbr要素
  11. dfn要素
  12. pre要素で整形済みテキストを表示する
  13. code要素
  14. samp要素
  15. kbd要素
  16. var要素
  17. bdo要素
  18. sup要素で上付き文字を表示する
  19. sub要素
  20. mark要素
  21. data要素
  22. time要素
  23. wbr要素
  24. bdi要素
2026-06-11 07:12:00 guest 204

人気ページ

最近更新/作成されたページ