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

初期値 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>

directionに関連するCSSプロパティ

文字揃え・段落の振る舞い
direction 文字表記の方向(左右)を指定する
letter-spacing 文字の間隔を指定する
line-break 要素内での行末や行頭の禁則処理の厳密さを指定する
line-height 行の高さを指定する
unicode-bidi 文字表記の方向(左右)を指定する
white-space テキスト内の空白、タブ、改行の表示の仕方を指定する
word-break 文章の改行の仕方について指定する
word-spacing 単語の間隔を指定する
word-wrap 単語の途中における改行処理の仕方を指定する
writing-mode 文字表記の方向(縦横)を指定する