【HTML Living Standard】bdo要素の使い方
bdo要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
bdoオブジェクトは、HTMLドキュメント内でテキストの表示方向を明示的に上書きするために使用されるオブジェクトです。これは「Bi-directional Override」の略であり、主に左書き（LTR）と右書き（RTL）のテキストが混在する双方向テキストにおいて、標準的なアルゴリズムでは正しく表示できない場合に利用されます。
bdo 要素を使用する際には、テキストの表示方向を指定するために dir 属性が必須となります。dir 属性には、テキストを左から右へ表示する ltr（left-to-right）と、テキストを右から左へ表示する rtl（right-to-left）のいずれかの値を指定します。これにより、囲まれたテキストブロック内での文字の表示順序が、通常の方向ルールに従わず、指定された方向に強制的に変更されます。
例えば、英語の文章中に、ヘブライ語のように右から左へ記述される言語の単語を、その記述順序を維持したまま挿入したい場合に役立ちます。通常、ブラウザはUnicodeの双方向アルゴリズムに基づいてテキストの表示方向を自動的に処理しますが、bdo 要素はこの自動処理を強制的に上書きする役割を持っています。
しかし、表示方向の制御はCSSの direction プロパティを使用する方が一般的に推奨されています。bdo 要素は、CSSが適用できない状況や、特に強力な方向のオーバーライドが必要な場合に限定して使用することが推奨されます。この要素は、HTMLのセマンティクス（意味）を直接変更するものではなく、純粋に表示の方向性を制御するためのものです。
構文(syntax)
1<bdo dir="ltr">テキスト</bdo>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML bdo要素でテキスト方向を上書きする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>bdo要素のサンプルコード</title> 7 <style> 8 body { 9 font-family: Arial, sans-serif; 10 margin: 20px; 11 } 12 p { 13 margin-bottom: 10px; 14 } 15 .normal-text { 16 border: 1px solid #ccc; 17 padding: 5px; 18 display: inline-block; 19 } 20 .bdo-rtl-text { 21 border: 1px solid red; 22 padding: 5px; 23 display: inline-block; 24 } 25 </style> 26</head> 27<body> 28 <h1>bdo要素 (Bi-directional Override) の使用例</h1> 29 30 <p> 31 これは通常のテキスト表示です (左から右へ): 32 <span class="normal-text">Hello World! こんにちは世界！</span> 33 </p> 34 35 <p> 36 <bdo dir="rtl" class="bdo-rtl-text"> 37 <!-- bdo要素とdir="rtl"属性により、テキストの表示方向を右から左へ上書きします --> 38 Hello World! こんにちは世界！ 39 </bdo> 40 これはbdo要素で方向を上書きしたテキストです。 41 </p> 42 43 <p> 44 数字の例 (通常): 45 <span class="normal-text">12345</span> 46 </p> 47 <p> 48 <bdo dir="rtl" class="bdo-rtl-text"> 49 <!-- 数字も右から左に表示されます --> 50 12345 51 </bdo> 52 これはbdo要素で方向を上書きした数字です。 53 </p> 54</body> 55</html>
HTMLのbdo要素は、ウェブページ上でテキストの表示方向を強制的に上書きするために使用されます。bdoは「Bi-directional Override（双方向上書き）」の略で、主にアラビア語やヘブライ語のように右から左へ書く言語（RTL言語）と、英語や日本語のように左から右へ書く言語（LTR言語）が混在する際に、意図しない表示順序になることを防ぎ、特定のテキストブロックの表示方向を確実に制御したい場合に役立ちます。
この要素は、dir属性と組み合わせて使用することが一般的です。dir属性に「rtl」（right-to-left、右から左）を指定すると、要素内のテキストコンテンツは右から左へと表示されます。一方、「ltr」（left-to-right、左から右）を指定すると、左から右へと表示されます。
サンプルコードでは、通常「Hello World! こんにちは世界！」と左から右へ表示されるテキストや数字「12345」が、<bdo dir="rtl">で囲むことによって、強制的に右から左へと表示方向が上書きされている様子を確認できます。これにより、テキストの単語や数字の並び順が反転して表示されることが特徴です。
bdo要素自体は、特定の引数を受け取ったり、値を戻したりするものではなく、その内部のテキストコンテンツの表示挙動を制御する役割に特化しています。
bdo要素は、テキストの表示方向（左右どちらから書くか）を強制的に上書きするための特別な要素です。通常のレイアウトやデザイン目的でテキストの順序を逆にするために使うべきではありません。必ずdir属性と組み合わせて、rtl（右から左）またはltr（左から右）の方向を指定します。この要素は、複数の異なる記述方向のテキストが混在する際に、ブラウザの自動的な双方向性アルゴリズムが意図通りに機能しない、ごく稀な状況で利用されます。不適切な利用は、テキストの論理的な意味を損ねたり、スクリーンリーダーなどの補助技術による読み上げ順序に影響を与えたりする可能性があるため、慎重な検討が必要です。多くの場合、CSSのdirectionプロパティで十分であり、bdo要素の利用は極力避けることが推奨されます。
HTML bdo要素でテキスト方向を上書きする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>bdo要素のサンプル</title> 6</head> 7<body> 8 <h1>bdo要素 (Bi-directional Override) の使用例</h1> 9 10 <p> 11 これは通常のテキスト表示です。 12 <br> 13 例: Hello World! 14 </p> 15 16 <p> 17 以下のテキストは、<b>bdo</b>要素を使って「右から左へ」強制的に表示方向を上書きしています。 18 <!-- bdo要素は、テキストの方向性を明示的に上書きするために使用します。 19 dir="rtl" は「右から左へ」 (Right-To-Left) を意味します。 --> 20 <bdo dir="rtl">Hello World!</bdo> 21 </p> 22 23 <p> 24 結果として、「Hello World!」というフレーズが逆順（!dlroW olleH）に表示されます。 25 これは、通常の左から右へのテキストの流れを無視し、強制的に右から左へテキストの並び順を変更するためです。 26 </p> 27</body> 28</html>
HTMLのbdo要素は、テキストの表示方向を強制的に上書きするための要素です。Webページでは通常、テキストは左から右へ（LTR: Left-To-Right）と表示されますが、アラビア語やヘブライ語のような右から左へ（RTL: Right-To-Left）記述される言語のテキストを正確に表示したり、意図的に表示方向を変更したい場合に利用されます。
この要素は、dir属性と組み合わせて使用することで、要素内のテキストの表示方向を明示的に指定します。サンプルコードでは、<bdo dir="rtl">Hello World!</bdo>と記述されており、ここでdir="rtl"が「右から左へ」という表示方向を指示しています。その結果、「Hello World!」というフレーズは通常の左から右への順序ではなく、強制的に右から左への順序で並べ替えられ、「!dlroW olleH」のように逆順に表示されます。
bdo要素は、プログラミング言語の関数とは異なり、引数や戻り値を持つものではありません。HTMLの要素としてコンテンツに構造や意味を与える役割を持ち、ブラウザがその指示に従ってテキストの表示を行います。主に国際化対応において、特定のテキストブロックの表示方向を制御する際に用いられる要素です。
bdo要素は、テキストの表示方向を強制的に上書きするものです。サンプルコードのように、通常の左から右へのテキスト（例：英語）を逆順に表示する例は、この機能を示すためのデモンストレーションですが、一般的なウェブサイトで視覚的なデザイン目的でテキストを逆順に表示するために使うべきではありません。
この要素は主に、アラビア語やヘブライ語のように右から左へ書く言語のテキストを、左から右へ書く言語のページ内で、文字の並び順が正しく表示されるように調整したい場合に利用します。不必要な使用は、スクリーンリーダーなどのアクセシビリティツールで読み上げられた際にユーザーを混乱させたり、文書の意味構造を損なったりする恐れがあります。テキストの見た目や並び順を変更したい場合は、通常、CSSのdirectionやunicode-bidiプロパティを使用することを検討してください。