CSS `writing-mode`

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress. This is essential for supporting internationalization, creative layouts, and advanced typographic effects.

Horizontal-tb (default): Text flows horizontally from left to right and lines stack top to bottom.
Vertical-rl: Text flows vertically from top to bottom and lines stack right to left.
Vertical-lr: Text flows vertically from top to bottom and lines stack left to right.
Sideways-rl / sideways-lr: Rotates text for creative vertical effects.

Syntax

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;

💡 Tip: Combine writing-mode with text-orientation for even more control over vertical text appearance!

Interactive Examples

Horizontal (Default)

Horizontal-tb (default): English text flows left to right.

.horizontal-tb {
  writing-mode: horizontal-tb;
}

Vertical Right-to-Left

vertical-rl: 文字は上から下、右から左へ流れます。

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

Vertical Left-to-Right

vertical-lr: 文字は上から下、左から右へ流れます。

.vertical-lr {
  writing-mode: vertical-lr;
}

Sideways Right-to-Left

sideways-rl: Vertical text, rotated for creative effect.

.sideways-rl {
  writing-mode: sideways-rl;
}

Sideways Left-to-Right

sideways-lr: Vertical text, rotated the other way.

.sideways-lr {
  writing-mode: sideways-lr;
}

Try it out: Each card demonstrates a different writing-mode value. Resize your browser or copy the code to experiment in your own projects!

Live Playground

Experiment with writing-mode using the controls below.

Choose a Mode

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

Applied CSS:

writing-mode: horizontal-tb;

Example Content

This is a demonstration of how the writing-mode property affects text flow and block direction. Notice how 'width' and 'height' are interpreted differently in vertical modes.

CSS writing-mode