direction
CSS の direction プロパティは文章の記述方向にあわせて設定されるべきです。ヘブライ語やアラビア語のテキストでは rtl を、それ以外では ltr を使います。
通常、この設定は CSS から直接行うのではなく、文書の一部として HTML の dir 属性を使うなどして行うほうがよいでしょう。
このプロパティは基本的な文章の方向と unicode-bidi プロパティで作られた 埋め込み (embeddings) の方向を設定します。また、テキストやブロックレベル要素のデフォルトの文字揃えや、テーブルの行内にセルが流し込まれる方向を決めます。
HTML の dir 属性と違って、direction プロパティはテーブルの列からテーブルのセルに継承されません。これは CSS の継承が文書木に従うためで、テーブルセルはテーブルの列の中ではなく、行の中にあるからです。
direction プロパティと unicode-bidi プロパティは、 all 短縮プロパティの影響を受けない唯一のプロパティです。
| 初期値 | ltr |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
構文
/* Keyword values */
direction: ltr;
direction: rtl;
/* Global values */
direction: inherit;
direction: initial;
direction: unset;値
ltr- デフォルト値です。テキストと他の要素は左から右に進みます
rtl- テキストと他の要素は右から左に進みます
インラインレベル要素で direction プロパティに効果を持たせたいときは、unicode-bidi プロパティの値が embed もしくは override である必要があります。
形式文法
ltr | rtl
例
blockquote {
direction: rtl;
}
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Writing Modes Module Level 3 direction の定義 |
勧告案 | 変更なし |
| CSS Level 2 (Revision 1) direction の定義 |
勧告 | 初回定義 |
ブラウザ実装状況
BCD tables only load in the browser