【unicode-bidi】文字表記の方向の組込みと上書き

unicode-bidiプロパティでは、Unicodeの文字方向に関する指示を新たに組込んだり、上書きしたりすることができます。

Unicodeとは、世界で使われる全ての文字を同一の文字コードで収録しようとする規格で、日本語や英語などは左から右、アラビア語、ヘブライ語などは右から左というように、言語によって表記される方向が決まっています。 ですがunicode-bidiプロパティを使う事で、この表記方向の設定を新たに組込んだり、強制的に上書きしたりすることができます。

また一般的なブラウザでは、右から左や、左から右に記述する言語が混在する場合、適切に表記方向を設定する双方向アルゴリズムが組まれています。 ですがこのアルゴリズムでは思うように表示されない場合があります。

そういった場合、directionプロパティとunicode-bidiプロパティで言語の表記方向を指定することにより、表記方向の異なる言語が混在するページでも思うように表示できるようになります。

なおunicode-bidiでの組み込みや上書きの文字表記の方向は、directionプロパティで指定した方向となります。

書式

  • unicode-bidi : ……… 文字方向の組み込みや上書き

★:normal、embed、bidi-override、inherit

normal
文字の表記方向に関する設定を新たに組み込まないで、そのまま表記します。
embed
指定した要素がインライン要素の場合、文字の表記方向に関する設定を新たに組み込みます。その場合、directionプロパティで指定された値が文字表記の方向となります。なおUnicodeの特殊文字でLRE、またはRLEを要素の先頭に、PDFを最後に付けた場合と同じになります。
bidi-override
指定した要素がインライン要素、あるいはインライン要素のみを含むブロックレベル要素の場合に、Unicodeによる文字表記の方向に関する設定を無効にし、directionプロパティで指定された方向に上書きします。なおUnicodeの特殊文字でLRO、またはRLOを要素の先頭に、PDFを最後に付けた場合と同じになります。

使用した時の例

.sample1 {direction: rtl; unicode-bidi: bidi-override;}
.sample2 {direction: ltr; unicode-bidi: normal;}
 
span {background:#F48282;}
<div>
昔は日本でも<span class="sample1">右から左へと文字</span>が書かれていましたね
</div>
<div class="sample2">
でも最近はまったく見かけません。たまに<span class="sample1">トラックの文字が
右から左</span>になってるくらいです。
</div>

ブラウザ上の表示例

昔は日本でも右から左へと文字が書かれていましたね
でも最近はまったく見かけません。たまにトラックの文字が 右から左になってるくらいです。

対応ブラウザなどのデータ

初期値 normal 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual / writing mode
対応ブラウザ Internet Explorer5~ , Google Chrome2~ , Firefox1~ , Opera9.2~ , Safari1.3~

関連情報