direction

試してみましょう

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: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex: 1;
}

構文

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

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

値

ltr

テキストやその他の要素は左から右へと進みます。これがデフォルト値です。

rtl

テキストやその他の要素は右から左へと進みます。

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

解説

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

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

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

公式定義

形式文法

direction = 
  ltr  |
  rtl  

例

右書きの方向を設定

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

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

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

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

仕様書

ブラウザーの互換性

関連情報

• unicode-bidi
• writing-mode
• SVG の direction 属性
• HTML の dir グローバル属性
• 垂直フォームコントロールの作成
• テキストの様々な方向の扱い