directionプロパティ。

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

directionプロパティとは。

directionプロパティは、書字方向です。

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

このため、書字方向を設定するプロパティとしてdirectionプロパティが用意されております。

directionプロパティの扱い。

読み飛ばす

directionプロパティの書式。

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

direction: 値

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

読み飛ばす

inherit: 一番近い上位要素で指定された値を継承します。
ltr: 左から右に書きます(デフォルト)。
rtl: 右から左に書きます。

尚、directionプロパティが、下位要素となるインライン要素に影響を与えるには、併せてunicode-bidiプロパティの値がembedまたはbidi-overrideのいずれかとなっている必要があります。

directionプロパティの記述例。

読み飛ばす

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

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

と記述します。

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