direction/unicode-bidi
CSSの書き方
direction:値 ;
unicode-bidi:値 ;
| CSSの詳細情報 | |||||
|---|---|---|---|---|---|
| プロパティ名 | direction/unicode-bidi | 読み方 | ディレクション/ユニコード・ビディ | ||
| 初期値 | direction:ltrunicode-bidi:normal | 意味 | 文字の方向 | ||
| 値 | direction:ltr/rtlunicode-bidi:normal/embed/bidi-override | ||||
| 対象 | すべての要素 | ||||
| CSSレベル | CSSレベル2 | 対応ブラウザ | Windows | MAC | |
| 継承 | する | IE 5.5以上/FF1.0/NS7.1/OP8.0 | SF（※） | ||
解説
文字の横書きに対する方向を指定するスタイルシートです。
日本語では、文章は左側から書き始めるのが普通ですが、アラビア語など中には右側から書き始める言語もあります。
これらに対応するため、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; }
段落要素の文字列を反転させる サンプル
