概要

CSS の direction プロパティは文章の記述方向にあわせて設定されるべきです。ヘブライ語やアラビア語のテキストでは rtl を、それ以外では ltr を使います。通常、この設定は CSS から直接行うのではなく、文書の一部として HTML の dir 属性を使うなどして行うほうがよいでしょう。

このプロパティは基本的な文章の方向と unicode-bidi プロパティで作られた 埋め込み (embeddings) の方向を設定します。また、テキストやブロックレベル要素のデフォルトの文字揃えや、テーブルの行内にセルが流し込まれる方向を決めます。

HTML の dir 属性と違って、direction プロパティはテーブルの列からテーブルのセルに継承されません。これは CSS の継承が文書木に従うためで、テーブルセルはテーブルの列の中ではなく、行の中にあるからです。

初期値ltr
適用対象全要素
継承継承する
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

形式文法: ltr | rtl
direction: ltr
direction: rtl

direction: inherit

ltr
デフォルト値です。テキストと他の要素は左から右に進みます
rtl
テキストと他の要素は右から左に進みます

インラインレベル要素で direction プロパティに効果を持たせたいときは、unicode-bidi プロパティの値が embed もしくは override である必要があります。

blockquote {
  direction: rtl;
}

仕様

仕様書 策定状況 コメント
CSS Writing Modes Module Level 3
direction の定義
勧告候補 変更なし
CSS Level 2 (Revision 1)
direction の定義
勧告 初回定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: SphinxKnight, Sebastianz, ethertank, sosleepy
最終更新者: SphinxKnight,