文字の書き始めの位置を左右指定する
CSSの書き方
direction:値 ;
unicode-bidi:値 ;
|
|||||||||||||||||||||||||||||||||||||||||
解説
文字の横書きに対する方向を指定するスタイルシートです。日本語では、文章は左側から書き始めるのが普通ですが、アラビア語など中には右側から書き始める言語もあります。これらに対応するため、CSSでは文字の方向を指定するプロパティがあります。
値（direction）
「direction」プロパティで文字の方向を指定します。「direction:ltr;」は左から右へ文字を並べます。一方、「direction:rtl;」とすると、文字が逆転し、右側から左側へ文字が表示されます。
ただし、IEでは日本語の文章に「direction」プロパティを適用しても文字が逆転しません。そこで、ユニコードに対応する「unicode-bidi」プロパティを併用します。
値（unicode-bidi）
「unicode-bidi」プロパティは、Unicodeで定められた規格に対して「direction」プロパティの内容を割り当てるスタイルシートです。「unicode-bidi:normal;」とすると、Unicodeの規格が優先され、「direction」プロパティの値は無視されます。
また、「unicode-bidi:embed;」とすると、この「unicode-bidi」プロパティに対し、「direction」プロパティの値が追加されます。一方、「unicode-bidi:bidi-override;」とすると、Unicodeの規格が無効になり、変わりに「direction」プロパティの値が上書きされます。
したがって、IEでも日本語の文章を反転させるには、「direction:rtl;」、「unicode-bidi:bidi-override;」とします。
文字の方向を変えたときの動作
文字の方向をこれら2つのプロパティによって変えた場合、文章の書き始めは画面の右側になることに注意してください。（サンプル参照）
インライン要素への適用
「direction」プロパティをインライン要素に適用させる場合、「unicode-bidi」プロパティを併用し、かつ値を「embed」もしくは「bidi-override」とする必要があります。
Safariは一部非対応
「unicode-bidi」プロパティはSafariには対応していません。
CSS/HTMLサンプル
p { direction:rtl; unicode-bidi:bidi-override; }
段落要素の文字列を反転させる サンプル
