文章の方向を指定します。アラビア語やヘブライ語などのように、右から左に記述する文章を埋め込む場合などに利用されます。unicode-bidi が normal 以外の場合に有効です。
CSS はオフにされることもあるため、direction ではなく、HTML の dir 属性や <bdo> を用いる方が望ましく、これらを使用できる場合は、direction を用いるべきではありません。
通常のテキストの方向に加え、テーブルのセルの方向などにも影響します。
値 | 説明 |
ltr | left to right の略。左から右。英語、日本語など。 |
rtl | right to left の略。右から左。アラビア語など。 |
CSS
.sample-ltr {
direction: ltr;
}
.sample-rtl {
direction: rtl;
unicode-bidi: bidi-override;
}
.sample-rtl td {
border: 1px solid gray;
}
HTML
<div class="sample-ltr">昔の日本の新聞の題字も右から左でしたね</div>
<div class="sample-rtl">昔の日本の新聞の題字も右から左でしたね</div>
<table class="sample-rtl">
<tr><td>テーブルの</td><td>セルも</td><td>右から左になります</td></tr>
</table>
表示
昔の日本の新聞の題字も右から左でしたね
昔の日本の新聞の題字も右から左でしたね