direction：文書の水平方向の書字方向を指定する

X
f
LINE
B!
p

初期値	`ltr`
適用対象	全ての要素
継承	する
アニメーション	離散値
対応ブラウザ	caniuseで確認

directionプロパティの説明

directionは、文書の水平方向の書字方向を指定します。指定できる値は二種類で、ltr（Left To Right）と指定すると左から右へ、rtl（Right To Left）と指定すると右から左へ表記されます。

directionをインライン要素に指定する際には、unicode-bidiを合わせて指定し、その値をembed、またはoverrideにする必要があります。

通常、テキストの書字方向はHTMLのdir属性で定義します。このプロパティは、unicode-bidiで埋め込みテキストを制御したり、表の行内にセルが流し込まれる方向を決める祭に使用します。

また、directionプロパティは一括指定プロパティのallの影響を受けません。

directionに指定できる値

ltr: 書字方向は左から右へと進みます。左書きと呼ばれるもので、英語やスペイン語、横書きの中国語や日本語などがこれに該当します。これが初期値です。
rtl: 書字方向は右から左へと進みます。アラビア語やヘブライ語などがこれに該当します。

directionの使い方とサンプル

directionプロパティの構文は以下の通りです。

CSS

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

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

directionの実例

それでは実際にdirectionプロパティの書き方を見ていきましょう。書字方向のアルゴリズムはunicode-bidiとの相互作用で決定します。

表示確認

CSS

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
}
.samp_box > h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box > p {
	margin-top: 1rem;
	padding: .3rem;
	background: #ddd;
}
#direction_1 {
	direction: ltr;
	unicode-bidi: bidi-override;
}
#direction_2 {
	direction: rtl;
	unicode-bidi: bidi-override;
}

HTML

<section class="samp_box">
	<h2>direction: ltr;</h2>
	<p id="direction_1">directionの値が ltr の場合は左から右に表示されます。</p>
	<h2>direction: rtl;</h2>
	<p id="direction_2">directionの値が rtl の場合は右から左に表示されます。</p>
</section>