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 | 文字表記の方向(左右)を指定する |
hanging-punctuation | 句読点、括弧、引用符などの禁則処理を指定する |
letter-spacing | 文字同士の間隔を指定する |
line-break | 句読点や記号などの禁則処理を指定する |
line-height | 行の高さを指定する |
tab-size | タブ(tab)文字の表示幅を指定する |
unicode-bidi | Unicodeのアルゴリズムを上書きして文字表記の方向を変更する |
white-space | 要素内のホワイトスペースの扱い方を指定する |
word-break | 要素の幅を超過するテキストの自動改行について指定する |
word-spacing | 単語同士の間隔を指定する |
word-wrap | インライン要素に対して単語の途中で改行処理を行うかどうかを指定する |
writing-mode | テキストの書字方向やブロックのフローを指定する |
widows | ブロックが区切られた場合に次の行の先頭に表示される内容の最小行数を設定する |