CSS direction

スタイルシート属性directionは、文書の方向を指定します。英語などは左から右へと文章が流れますが、アラビア語は右から左の向きになります。横書きでの日本語は、昔は右から左、現在は左から右の向きになっています。通常、スタイルシート属性 unicode-bidi と組み合わせて使用します。

書式

direction: 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

スタイルシート属性unicode-bidiは、スタイルシート属性 direction を有効にするか否かを指定します。

書式

unicode-bidi: 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 は、横書き・縦書きの区別を指定します。

書式

writing-mode: mode

属性

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