PLAY CSS
jaen

Text

writing-mode

writing-mode sets whether text runs horizontally or vertically, and which way lines advance. Japanese vertical text uses vertical-rl.

Syntax

horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Preview

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize

Code

.box {
  writing-mode: vertical-rl;
}

Controls

writing-modevertical-rl
writing-mode
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

About

Writing the value

  • horizontal-tb: horizontal text, with lines advancing top to bottom. This is the initial value.
  • vertical-rl: vertical text, with lines advancing right to left. This is how Japanese is written vertically.
  • vertical-lr: vertical text, with lines advancing left to right, as in Mongolian.
  • sideways-rl / sideways-lr: horizontal text turned 90 degrees to the right or left as a whole. Japanese characters lie sideways too. sideways-lr reads from bottom to top.

sideways-rl and sideways-lr were added later: Chrome supports them from 132 and Safari from 18.4 (Firefox has supported them for a long time). Older browsers ignore the whole declaration.

Latin text inside vertical text

In vertical-rl, kana and kanji stay upright while Latin letters and digits lie sideways. Use text-orientation: upright to stand Latin letters up, or text-combine-upright to fit a two-digit number into a single character space.

Width and height swap roles

In vertical text, the length of a line is the height and lines stack along the width. Logical properties such as inline-size and margin-block follow the writing mode, while width and margin-top stay tied to the screen.

Watch out

writing-mode is inherited. To put a horizontal part inside vertical text, set horizontal-tb on that element again.

References

MDN Web Docswriting-modeSpecificationCSS Writing Modes Level 4Can I usewriting-mode
PLAY CSS