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

関連情報