direction
CSS の direction
プロパティは文章の記述方向にあわせて設定されるべきです。ヘブライ語やアラビア語のテキストでは rtl
を、それ以外では ltr
を使います。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
通常、この設定は 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