CSS writing-mode

CSSのwriting-modeは、横書き・縦書きの区別を指定するプロパティである。

書式

writing-mode : value

値

以下に示す値を value に指定できる。

horizontal-tb
上から下へ横書き (horizontal from top to bottom)

欧米の言語だけでなく、中国語や韓国語も現代では横書きがほとんどである。

<p style="writing-mode: horizontal-tb;">
  風さそふ<br>
  花よりもなほ<br>
  我はまた<br>
  春の名残を<br>
  いかにとやせん
</p>

風さそふ
花よりもなほ
我はまた
春の名残を
いかにとやせん

vertical-rl
右から左へ縦書き (vertical from right to left)

現代において縦書きが一般的に使われるのは日本語だけである。

<p style="writing-mode: vertical-rl;">
  あら楽し<br>
  思いは晴るる<br>
  身は捨つる<br>
  浮世の月に<br>
  かかる雲なし
</p>

あら楽し
思いは晴るる
身は捨つる
浮世の月に
かかる雲なし

vertical-lr
左から右へ縦書き (vertical from left to right)

中国内モンゴル自治区のモンゴル語では、左から右へ縦書きする。ただし、モンゴルのモンゴル語は横書きである。

<p style="writing-mode: vertical-lr;">
  梓弓<br>
  ためしにも引け<br>
  武士の<br>
  道は迷はぬ<br>
  跡と思はば
</p>

梓弓
ためしにも引け
武士の
道は迷はぬ
跡と思はば

初期値

horizontal-tb

適用対象

原則として、すべての要素に対して writing-mode プロパティを適用できる。ただし、以下に示す要素を除く。

継承

親要素の writing-mode プロパティの値が、子要素へ継承される。

関連記事

参考文献

World Wide Web Consortium (2025) CSS Writing Modes Level 4