スタイルシート属性directionは、文書の方向を指定します。英語などは左から右へと文章が流れますが、アラビア語は右から左の向きになります。横書きでの日本語は、昔は右から左、現在は左から右の向きになっています。通常、スタイルシート属性 unicode-bidi と組み合わせて使用します。
direction: direction| 値 | 意味 |
|---|---|
| ltr | 左から右 (left to right)（初期値） |
| rtl | 右から左 (right to left) |
| inherit | 上位のスタイルを継承 |
次にスタイルシート属性unicode-bidiを使用したHTMLの例を示します。
<p style="direction: ltr;">This is a pen.</p>This is a pen.
<p style="direction: rtl;">This is a pen.</p>This is a pen.
スタイルシート属性unicode-bidiは、スタイルシート属性 direction を有効にするか否かを指定します。
unicode-bidi: bidi| 値 | 意味 |
|---|---|
| normal | 通常（初期値） |
| embed | 無効 |
| bidi-override | 有効 |
| inherit | 継承 |
次にスタイルシート属性unicode-bidiを使用したHTMLの例を示します。
<p style="direction: rtl; unicode-bidi: normal;">This is a pen.</p>This is a pen.
<p style="direction: rtl; unicode-bidi: bidi-override;">This is a pen.</p>This is a pen.
<p style="direction: rtl; unicode-bidi: embed;">This is a pen.</p>This is a pen.
<p style="direction: rtl; unicode-bidi: isolate;">This is a pen.</p>This is a pen.
<p style="direction: rtl; unicode-bidi: isolate-override;">This is a pen.</p>This is a pen.
<p style="direction: rtl; unicode-bidi: plaintext;">This is a pen.</p>This is a pen.
スタイルシート属性 writing-mode は、横書き・縦書きの区別を指定します。
writing-mode: mode| 値 | 意味 |
|---|---|
| horizontal-tb | 横書き |
| vertical-rl | 右から左への縦書き |
| vertical-lr | 左から右への縦書き |
現代では欧米の言語だけでなく、中国語や韓国語も横書きがほとんどである。
<p style="writing-mode: horizontal-tb;">
風さそふ<br>
花よりもなほ<br>
我はまた<br>
春の名残を<br>
いかにとやせん
</p>風さそふ
花よりもなほ
我はまた
春の名残を
いかにとやせん
現代において縦書きが一般的に使われるのは日本語だけである。
<p style="writing-mode: vertical-rl;">
あら楽し<br>
思いは晴るる<br>
身は捨つる<br>
浮世の月に<br>
かかる雲なし
</p>あら楽し
思いは晴るる
身は捨つる
浮世の月に
かかる雲なし
中国内モンゴル自治区のモンゴル語では、左から右へ縦書きする。ただし、モンゴルのモンゴル語は横書きである。
<p style="writing-mode: vertical-lr;">
梓弓<br>
ためしにも引け<br>
武士の<br>
道は迷はぬ<br>
跡と思はば
</p>梓弓
ためしにも引け
武士の
道は迷はぬ
跡と思はば
World Wide Web Consortium (2018) CSS Writing Modes Level 3