概要
CSS の direction
プロパティは文章の記述方向にあわせて設定されるべきです。ヘブライ語やアラビア語のテキストでは rtl
を、それ以外では ltr
を使います。通常、この設定は CSS から直接行うのではなく、文書の一部として HTML の dir
属性を使うなどして行うほうがよいでしょう。
このプロパティは基本的な文章の方向と unicode-bidi
プロパティで作られた 埋め込み (embeddings) の方向を設定します。また、テキストやブロックレベル要素のデフォルトの文字揃えや、テーブルの行内にセルが流し込まれる方向を決めます。
HTML の dir
属性と違って、direction
プロパティはテーブルの列からテーブルのセルに継承されません。これは CSS の継承が文書木に従うためで、テーブルセルはテーブルの列の中ではなく、行の中にあるからです。
初期値 | ltr |
---|---|
適用対象 | 全要素 |
継承 | 継承する |
メディア | visual |
計算値 | 指定値 |
アニメーションの可否 | 不可 |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
形式文法: ltr | rtl
direction: ltr direction: rtl direction: inherit
値
ltr
- デフォルト値です。テキストと他の要素は左から右に進みます
rtl
- テキストと他の要素は右から左に進みます
インラインレベル要素で direction
プロパティに効果を持たせたいときは、unicode-bidi
プロパティの値が embed
もしくは override
である必要があります。
例
blockquote { direction: rtl; }
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Writing Modes Module Level 3 The definition of 'direction' in that specification. |
勧告候補 | 変更なし |
CSS Level 2 (Revision 1) The definition of 'direction' in that specification. |
勧告 | 初回定義 |
ブラウザ実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
基本サポート | 2.0 | 1.0 (1.7 or earlier) | 5.5 | 9.2 | 1.3 |
機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | 1.0 | 1.0 (1.0) | 6 | 8 | 3.1 |