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 短縮プロパティの影響を受けない唯一のプロパティです。

構文

/* 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;
}

仕様

ブラウザ実装状況

関連情報

• unicode-bidi
• writing-mode