direction

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

direction は CSS のプロパティで、テキスト、表の列、水平方向のはみ出しの方向を設定します。右書きの言語（ヘブライ語やアラビア語など）では rtl を、左書きの言語（英語やそれ以外の多くの言語）では ltr を使います。

試してみましょう

direction: ltr;

direction: rtl;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  width: 80%;
  max-height: 300px;
  display: flex;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex: 1;
}

なお、テキストの方向はふつうは文書内で（例えば HTML の dir 属性で）定義するものであり、 direction プロパティ直接使用して行うものではありません。

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

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

direction プロパティと unicode-bidi プロパティのみが、 all 一括指定プロパティの影響を受けません。

構文

css

/* キーワード値 */
direction: ltr;
direction: rtl;

/* グローバル値 */
direction: inherit;
direction: initial;
direction: revert;
direction: unset;

値

ltr: テキストやその他の要素は左から右へと進みます。これが既定値です。
rtl: テキストやその他の要素は右から左へと進みます。

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

公式定義

初期値	`ltr`
適用対象	すべての要素
継承	あり
計算値	指定通り
アニメーションの種類	アニメーション不可

形式文法

direction = 
  ltr  |
  rtl

例

右書きの方向を設定

以下の例では、 2 つのテキスト文字列があり、どちらも direction: rtl を使って表示されています。アラビア語のテキストはこの設定で正しく表示されますが、日本語のテキストは句点が異常な位置に表示されるようになりました。

css

blockquote {
  direction: rtl;
  width: 300px;
}

html

<blockquote>
  <p>この段落は日本語ですが、間違って右から左へ書かれています。</p>
</blockquote>

<blockquote>
  <p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
</blockquote>

仕様書

Specification
CSS Writing Modes Level 4 # direction
Scalable Vector Graphics (SVG) 2 # DirectionProperty