[34] 書字方向を指定する bdo要素と 書字方向を隔離する bdi要素

<bdo>要素を使うと、横書きの書字方向（文字の表示方向）を指定する事ができます。
ヘブライ語などの表記のページで、英語などを 右から左に表示できます。

<bdi>要素は、テキストの「双方向アルゴリズム」の中で、前後のテキストと書字方向が異なる可能性のあるテキストを隔離します。この要素で隔離されたテキストは、周囲の書字方向に影響を及ぼさなくなります。

使用する要素	<bdo dir="rtl（またはltr）"> 〜 </bdo> <bdi> 〜 </bdi>

本日のINDEX

1. <bdo>要素は「双方向アルゴリズム」を上書きします
   1. <bdo>要素は「dir属性」が必須。値「auto」は使えません
   2. <bdo dir="rtl">で、右から左に表示してみよう
   3. 「書字方向」は「書字を始める位置」も含む
2. 書字方向の範囲を隔離する <bdi>要素
   1. <bdi>要素の「dir属性」は無指定でOK！ブラウザが自動判定します

参考：
The bdo element - HTML 5.1 2nd Edition | W3C Recommendation
The bdi element - HTML 5.1 2nd Edition | W3C Recommendation

● 2017年11月：本記事に <bdi>要素を追加しました。

<bdo>要素は「双方向アルゴリズム」を上書きします

<bdo>要素は、表示方向を変えたい部分をマークアップします。
「bdo」は「Bi-Directional Override（双方向オーバーライド）」の略。

「Bi-directional text」とは「双方向テキスト」「BiDi（バイダイ）」とも呼ばれ、左横書き・右横書きの混在するテキスト形式。
「双方向テキスト」を正しく処理するアルゴリズムを「双方向アルゴリズム」と言います。

「オーバーライド」とは、プログラミング用語で 上位クラスで定義された事を下位クラスで再定義して上書きすること。

この <bdo>要素は、Unicode（ユニコード）の「双方向アルゴリズム」を上書きします。

<bdo>要素は「dir属性」が必須。値「auto」は使えません

<bdo>要素は、単独ではテキストの方向を変えられません。
必ず「dir属性」を一緒に使います。

使い方はこんなかんじ。

<bdo dir="rtl">〜右から左に表示したいテキスト〜</bdo>
<bdo dir="ltr">〜左から右に表示したいテキスト〜</bdo>

「dir」は「directional」の略です。「方向」ってことですね。
「dir属性」の値は、「rtl」と「ltr」です。
「rtl」は「right to left（右から左）」「ltr」は「left to right（左から右）」の略です。

<bdo>要素では、「dir属性」のデフォルト値「auto」は使えません。
必ず「rtl」か「ltr」を指定します。

<bdo dir="rtl">で、右から左に表示してみよう

サンプルです。

HEBREW（ヘブライ語）は右から左に読みます。

HTMLはこちらです。

<p>
<bdo dir="rtl">HEBREW</bdo>（ヘブライ語）は右から左に読みます。
</p>

HTMLでは「HEBREW」と書いている部分が、プレビューでは「WERBEH」になっていますね。

<bdo>要素の使いどころですが、日本語や英語のサイトでは、あまり頻繁に使うものでは無さそうです。
右横書きが必要な文字体系にはヘブライ文字、アラビア文字、シリア文字、ターナ文字などがありますが、その言語で作られているサイトで、英語などの単語が出てきた時に、全体が「右横書き」なのに、英単語だけ「左横書き」だと読みにくい。
そんなとき、強制的に <bdo>要素で「右横書き」に変える（ブラウザの双方向性アルゴリズムを上書きする）ことができるというわけです。

「書字方向」は「書字を始める位置」も含む

ちょっと実験です。
全体を <bdo dir="rtl"> で囲み、真ん中あたりに デフォルトの「<bdo dir="ltr">」を、ネスト（入れ子）してみます。

HTMLはこちら。

<p>
<bdo dir="rtl">あいうえお0123456789
<bdo dir="ltr" style="color:red">──ここだけ左から右へ0123456789──</bdo>
0123456789かきくけこ</bdo>
</p>

プレビューでは、<bdo dir="ltr">で囲んだ部分が、一番左（先頭）に来ていますね。
（わかりやすいように文字色を赤にしています）

あいうえお0123456789 ──ここだけ左から右へ0123456789── 0123456789かきくけこ

<bdo>要素をネストすると、書字方向だけでなく、そのテキストの「位置」まで変えることがわかります。
「双方向アルゴリズム」の「書字方向」とは「書字を始める位置」も含まれているんですね。

コレを知っとくと、次の <bdi>要素の便利さがわかります。

書字方向の範囲を隔離する <bdi>要素

<bdi>要素は、テキストの「双方向アルゴリズム」の中で、前後のテキストと書字方向が異なる可能性のあるテキストを隔離します。この要素で隔離されたテキストは、周囲の書字方向に影響を及ぼさなくなります。

「bdi」は「Bi-directional Isolation（双方向アイソレーション）」の略。
「Isolation（アイソレーション）」は、分離、独立、絶縁などの意味。

<bdi>要素の「dir属性」は無指定でOK！ブラウザが自動判定します

<bdi>要素の「dir属性」は、ほかの要素と違って親要素から値を継承しません。

<bdi>要素で「dir属性」を指定しなければ、値は「auto」になり、<bdi>要素の内容によって ブラウザが 左横書き・右横書きかを自動判定してくれます。
ですので、<bdi>要素で「dir属性」は指定しなくてOK。

サンプルです。
わかりやすいように <bdi>要素のテキストを太字でグリーンにしています。

• User jcranmer : 12 posts.
• User hober : 5 posts.
• User إيان : 3 posts.

サンプルのHTMLです。
アラビア語の名前が入る可能性があるので、人の名前の部分だけ <bdi>要素を使っています。

<ul class="smp_bdi">
  <li>User <bdi>jcranmer</bdi> : 12 posts.</li>
  <li>User <bdi>hober</bdi> : 5 posts.</li>
  <li>User <bdi>إيان</bdi> : 3 posts.</li>
</ul>

<bdi>要素なしのプレビューはこちら。

• User jcranmer : 12 posts.
• User hober : 5 posts.
• User إيان : 3 posts.

リストの最後の「إيان 」さんの名前は、ブラウザの「双方向アルゴリズム」に従って、「:」や「3」より右にきてしまいます。
こうならないために <bdi>要素を使うんですね。

WordPressなどで組んでいるページで、アラビア語などの名前が入りそうな部分に、この <bdi>要素を使っておけば、正しい書字方向で 位置が変わらずに表示できます。

次回予告

今回で、テキストに関する要素は終わりです。
次回から「グルーピングのための要素」で、もれていたものを2回ほどでまとめます。

次回は、<hr>要素を紹介します。
これは大昔からある要素で、以前は区切り線（罫線）のための要素でしたが、HTML5では「内容的な区切りを示す要素」として残っています。