directionプロパティの説明
CSSの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プロパティの構文は以下の通りです。
/* キーワード値 */
direction: ltr;
direction: rtl;
/* グローバル値 */
direction: inherit;
direction: initial;
direction: revert;
direction: unset;
directionの実例
それでは実際にdirectionプロパティの書き方を見ていきましょう。書字方向のアルゴリズムはunicode-bidiとの相互作用で決定します。
<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>
.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;
}