writing-mode

writing-mode chooses horizontal or vertical inline flow and the direction in which lines stack. Direction and text-orientation supply related but different behavior.

Stack vertical lines toward the left

Vertical-rl runs this LTR text down each line, then places the next line to its left. The short English example makes the line progression visible.

<p class="sample">
  First line of practice notes. Continue into the next vertical line.
</p>

.sample {
  writing-mode: vertical-rl;
  height: 150px;
  padding: 1rem;
  border: 1px solid #2563eb;
}

Use logical sizing and spacing

Inline-size measures along the writing direction, so here it sets the vertical extent. Border-block-start sits on the right for vertical-rl.

<p class="sample">Logical dimensions follow the chosen writing mode.</p>

.sample {
  writing-mode: vertical-rl;
  inline-size: 10rem;
  padding-inline: 1rem;
  padding-block: 0.75rem;
  border-block-start: 4px solid #2563eb;
  background: #eff6ff;
}

Values and defaults

The initial value is horizontal-tb and the property is inherited. Horizontal-tb stacks lines downward. Vertical-rl stacks vertical lines from right to left; vertical-lr stacks them from left to right. The inline progression also depends on direction. Sideways-rl and sideways-lr set sideways typographic modes and have their own compatibility histories; inspect those rows before using them.

Common mistakes

Vertical-rl does not mean every character travels horizontally from right to left. Text-orientation controls individual glyph orientation within vertical writing. A transform rotation changes painting but does not establish the same writing-mode layout. Width/height remain physical dimensions; inline-size/block-size follow the writing mode.

Vertical writing can be essential language presentation, not merely decoration. Test the language, font, line breaks, and reading experience. Learn text-orientation, direction, and margin.

Sources and browser support

MDN: writing-mode describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.