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 の定義
勧告 初回定義

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
directionChrome 完全対応 2Edge 完全対応 12Firefox 完全対応 1IE 完全対応 5.5Opera 完全対応 9.2Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報