unicode-bidiプロパティ。

CSSに於ける書字方向・unicode-bidiプロパティに関する解説です。

unicode-bidiプロパティとは。

unicode-bidiプロパティは、書字方向です。

ユニコードでは、文字の種類に依り書字方向を指定しておりますが、書字方向の異なる言語が混在する場合、正常に機能しない場合もあります。

このため、書字方向を設定するプロパティとしてdirectionプロパティが用意されておりますが、下位要素への継承などで起こり得る問題を解決するため、更にunicode-bidiプロパティも用意されております。

unicode-bidiプロパティの扱い。

読み飛ばす

unicode-bidiプロパティの書式。

unicode-bidiプロパティの書式は、以下のようになります。

unicode-bidi: 値

値としては、以下のものが取れます。

読み飛ばす

inherit

一番近い上位要素で指定された値を継承します。

normal

特に指定しません(デフォルト)。

embed

インライン要素でのみ有効です。

書字方向を指定しますが、ユニコードにおける文字の順序を書き換えません。従って、文章の並びだけが変わる事になります。

bidi-override

インライン要素
下位にブロックレヴェル要素を含まないブロックレヴェル要素

でのみ有効です。

書字方向を指定し、その際にユニコードにおける文字の順序も無視します。

従って、ラテン文字, CJK漢字及び仮名文字など、左から右に排列する事となっている文字であっても、directionプロパティにrtl値を与えてで右から書くように指定した場合は文字も右から並ぶ事となります。

unicode-bidiプロパティの記述例。

読み飛ばす

例えば、classicクラスを持つ任意の日本語要素に於いて、内容を右から左に書く場合は、

.classic:lang(ja), .classic:lang(ja) * {
    direction: rtl;
    unicode-bidi: bidi-override;
    }

と記述します。

ここでセレクタを「.classic:lang(ja), .classic:lang(ja) *」と書いたのは、classicクラスを持つブロックレヴェル要素が内容にブロックレヴェル要素を含んでいる場合はunicode-bidiプロパティが無効となり、その結果文字が正しく右から並べられないため、下位のあらゆる要素に適用するようにしなければならないからです。