direction

値の書き方

• ltr：左から右へ並べます。初期値です。
• rtl：右から左へ並べます。

縦書き（writing-mode: vertical-rl など）では、ltr が上から下、rtl が下から上になります。

何が変わるか

1 文字ずつの向きは文字の種類で決まっていて、英字や日本語は左から右へ、アラビア文字やヘブライ文字は右から左へ並びます。direction が決めるのは段落の基本の向きです。向きの違う文字のかたまりをどの順に並べるかが変わるほか、! のように向きを持たない記号は、前後の文字の向きがそろっていればそれに合わせ、そろっていないところ（文の終わりなど）では direction の向きに合わせます。

プレビューで rtl にすると、英語と日本語の行は右に寄り、文の終わりの ! と ！ が左端に移ります。アラビア語の行では、ltr のときは右端にあった ! が、文の終わりにあたる左端に来ます。

ほかにも、行の向きにかかわるところがまとめて変わります。text-align の初期値 start は右寄せになり、text-indent は右側を下げます。フレックスボックスの row やグリッドの列、表の列は右から並び、横にはみ出す中身は左側へはみ出します。direction は子の要素に継承されます。

HTML では dir 属性を使う

仕様は、HTML では direction ではなく dir 属性（<html dir="rtl"> など）を使うよう勧めています。CSS が読み込まれないときでも、正しい向きで表示されるようにするためです。dir 属性を付けた要素には、ブラウザが direction を付けます。

インライン要素に付けた direction は、unicode-bidi が初期値の normal のままだと文字の並びを変えません。また、すべてのプロパティを初期値に戻す all でも、direction と unicode-bidi は戻りません。