【46】テキストの方向性を操作する unicode-bidi と direction

英語や日本語などの言語は横書きでは「左から右」にテキストが流れますが、アラビア語やヘブライ語などは「右から左」に書きます。

これらを混在させた（英語や日本語の中にアラビア語とか）書字方向が混在しているテキストは「双方向テキスト（Bi-directional text）」や「BiDi（バイダイ）」と呼ばれます。

「双方向テキスト」を正しく処理するアルゴリズムを「双方向アルゴリズム」と言い、ブラウザはこのアルゴリズムに従って書字方向を決めて表示するんだそうです。

HTML の <bdo>要素・<bdi>要素は、この「双方向アルゴリズム」を操作できます。
<bdo>要素は「dir属性」を使って書字方向を「右から」か「左から」と決めます。
W3C は、HTMLでは この <bdo>要素と「dir属性」の使用を推奨しています。
CSSはユーザーがオフにすることができるので unicode-bidi・directionプロパティはあまり使うべきでないんだそうです。

＊<bdo>要素・dir属性・<bdi>要素についてはこちらをご覧ください。
　[34] 書字方向を指定する bdo要素と 書字方向を隔離する bdi要素

ということで、めったに使う機会はないかもしれませんが、2つのプロパティとその値について書いておきます。
unicode-bidiプロパティは「双方向アルゴリズム」を上書きするなどの操作ができます。
directionプロパティは書字方向を決めます。値は「ltr（左から右）」「rtl（右から左）」の2つだけです。
unicode-bidiプロパティは IE, Edge が未対応です。（参考：Can I Use 2019年1月記）
directionプロパティは ほぼすべてのブラウザが対応しています。

本日のINDEX

1. directionプロパティの値
   1. ストロング文字とニュートラル文字
2. unicode-bidiプロパティの値

参考：
・CSS Writing Modes Level 3 | W3C Candidate Recommendation
・CSS Writing Modes Level 4 | Editor’s Draft
・unicode-bidi - CSS | MDN
・direction - CSS | MDN

directionプロパティの値

directionプロパティは書字方向を決めます。
directionプロパティの値は以下のものがあります。

directionプロパティの値
キーワード	ltrがデフォルト値。左から右（left to right）です。 rtl 右から左（right to left）です。

値の継承	あり	適用できる要素	すべての要素

ストロング文字とニュートラル文字

directionプロパティの値を2つとも使ってみます。

direction: 未指定（ = ltr） 要素内のテキスト全体の書字方向を決めます。12１２
@ * - + ? # ! $ % & = { } [ ] 「」（）。

direction: rtl 要素内のテキスト全体の書字方向を決めます。12１２
@ * - + ? # ! $ % & = { } [ ] 「」（）。

2段目の direction: rtl と指定したサンプルに注目。これは書字方向を右から左（rtl）に指定しています。
日本語の記述は direction: rtl と指定しても「左から右（ltr）」のまま変わりません。数字も「左から右（ltr）」で変わっていませんね。
2行目は全部記号ですが、direction: rtl と指定すると、素直に書字方向は「右から左（rtl）」になっています。

このように、「双方向アルゴリズム」の操作に頑固に従わない文字をストロング文字（strong characters）、素直に従う文字をニュートラル文字（neutral characters）と呼ぶんだそうです。
上のサンプルですと、従わないのは日本語の文字や数字です。素直に従っているのは記号類です。

ストロング文字（strong characters）は、その「文字自身に書字方向がある」もの（日本語なら ltr、ヘブライ語なら rtl とか）
その中には、アラビア数字（半角でも全角でも）や、括弧（）「」{} の「開き括弧と閉じ括弧の組み合わせ」も含まれているのが、サンプルでもわかります。
サンプル（2段目）の括弧は、「開き括弧（ 」と「閉じ括弧　）」の書き順が入れ替わって「 ）（ 」になったりしていませんね。

ニュートラル文字（neutral characters）は「書字方向がニュートラル（どっちでもイケる=自分自身に書字方向は無い）」なもの。@*-+ などの記号や半角スペースとかですね。

書字方向を変えるために directionプロパティを使っても、自分自身に書字方向があるストロング文字には効かない というルールです。

これをどうにかする（=双方向アルゴリズムを上書きする）ために unicode-bidiプロパティがあります。↓

unicode-bidiプロパティの値

unicode-bidiプロパティは「双方向アルゴリズム」を上書きするなどの操作ができます。
unicode-bidiプロパティの値は以下のものがあります。

unicode-bidiプロパティの値
キーワード	normalがデフォルト値。 embed、isolate、bidi-override、isolate-override、plaintext
グローバル値	unicode-bidi: inherit; 親の値を継承（コレ書かなくても継承するけど） unicode-bidi: initial; 継承した親の値を解消しデフォルト値に戻す unicode-bidi: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	しない	適用できる要素	すべての要素 （ただし インラインの要素のみに使える値もあります）

unicode-bidiプロパティのそれぞれのキーワードは、以下の意味があります。

normal

ブラウザの「双方向アルゴリズム」のまま。

embed

ブラウザの「双方向アルゴリズム」の中に、追加のアルゴリズムを 埋め込み（embed）、directionプロパティで指定した方向に並べ替えます。
この値は インライン要素やテキストにしか効果がありません。

isolate

ブラウザの「双方向アルゴリズム」の中で、指定した要素だけ他のアルゴリズムから「隔離（isolate）」します。要素の外側のテキストには影響しません。

bidi-override

ブラウザの「双方向アルゴリズム」を、インライン要素に対しては「上書き（override）」します。
ブロックレベル要素に対しては、他のブロックレベル要素ではなく、その子孫のインラインレベルに対して上書きします。

isolate-override

これは、Writing Modes Level 4 で草案になっている値です。
isolate（隔離）と bidi-override（上書き）の組み合せだそうです。

plaintext

インライン要素では「isolate」と同じ効果（隔離）で、書字方向は「direction」の値ではなく、「UnicodeアルゴリズムのルールP2とP3」に従うんだとか。

サンプルです。ハンナさんと アイーシャさんの得点の表示なのですが、アイーシャの名前をアラビア語にしたら、2人の表示が揃いません。

direction: 未指定（ = ltr） User Hanna : 95 points
User عائشة : 97 points

direction: rtl User Hannna : 95 points
User عائشة : 97 points

span に unicode-bidi:isolate User Hannna : 95 points
User عائشة : 97 points

サンプルの最後の段はアイーシャさんの名前を <span>要素で囲み、そこに「unicode-bidi: isolate」と指定しています。これで表示が揃いました。

2段目の direction: rtl では、確かに右から左に「User」「ユーザー名」「：」「ポイント数」「points」と並び替わりましたがこれだと1行目のハンナさんと揃わない。（それぞれ「ストロング文字」なので、単語内の書字方向は変わっていません）
こんな時は、unicode-bidiプロパティの「isolate」（隔離）を指定してやればOK。

上のサンプルのソースコードはこちら。

<div class="mihon">
  <p>
    <b>direction: 未指定（ = ltr）</b>
    User Hanna : 95 points<br>
    User عائشة : 97 points <!--←ソースコード上でもこう表示されます（編集できない）-->
  </p>
  <p style="direction:rtl">
    <b>direction: rtl</b>
    User Hannna : 95 points<br>
    User عائشة : 97 points
  </p>
  <p>
    <b>span に unicode-bidi:isolate</b>
    User Hannna : 95 points<br>
    User <span style="unicode-bidi:isolate">عائشة</span> : 97 points
  </p>
</div>

次回予告

unicode-bidi、directionプロパティは、アラビア語などと英語や日本語などを混在させるサイトを作るんじゃなければ、めったに使う機会がないプロパティですね。
一応こんなプロパティも「ライティングモード」の中にあるということで書いておきました。

さて今回で「ライティングモード」に関する記事は終了です。

次回からは、テキストデコレーションのためのCSSを見ていきましょう。
次回は、テキストに付ける「下線」などのライン装飾の「種類」を指定する text-decoration-lineプロパティを使ってみよう。