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

最終更新日:2019年02月13日  (初回投稿日:2019年02月13日)

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

これらを混在させた(英語や日本語の中にアラビア語とか)書字方向が混在しているテキスト「双方向テキスト(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) 要素内のテキスト全体の書字方向を決めます。1212
@ * - + ? # ! $ % & = { } [ ] 「」()。

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

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プロパティを使ってみよう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2019/09 | 10
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.