What does writing-mode control?

writing-mode sets the direction blocks are stacked (the block axis) and how text lines flow (the inline axis). horizontal-tb stacks blocks top-to-bottom with horizontal lines; vertical-rl and vertical-lr rotate the layout so lines run vertically and columns advance right-to-left or left-to-right.

How does direction differ from writing-mode?

direction (ltr or rtl) sets the inline progression for the current line — which side text starts on — and is used for right-to-left scripts like Arabic and Hebrew. writing-mode sets the larger block/inline axis orientation. They are independent: an rtl direction can apply within any writing-mode.

What is text-orientation for?

In a vertical writing-mode, text-orientation decides how individual glyphs are rotated. mixed keeps CJK upright and rotates Latin sideways; upright stands every character up; sideways rotates the whole line 90 degrees. It has no effect in horizontal-tb.

What are logical properties?

Logical properties like margin-inline-start and padding-block-end follow the writing mode instead of the screen. In horizontal-tb ltr, inline-start equals left and block-start equals top, but in vertical-rl they remap automatically. Using logical properties keeps layouts correct across scripts and modes.

When should I use vertical writing modes?

Use vertical-rl or vertical-lr for traditional Chinese, Japanese and Korean typesetting, vertical UI labels, or rotated table headers. Pair them with text-orientation: mixed so CJK stays upright while embedded Latin reads sideways, matching real-world vertical typography.

CSS Writing Modes Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

What CSS writing modes control

Writing modes generalise CSS layout beyond left-to-right horizontal text. The writing-mode property sets which way blocks stack and lines flow, direction sets right-to-left vs left-to-right inline progression, and text-orientation rotates glyphs in vertical modes. Together they define the block axis and inline axis that logical properties follow. This reference lists every value with the axes it produces.

How it works

writing-mode establishes two axes. The block axis is the direction new lines (blocks) advance; the inline axis is the direction characters within a line advance. direction flips the inline axis for RTL scripts:

.cjk {
  writing-mode: vertical-rl;   /* lines run top→bottom, columns right→left */
  text-orientation: mixed;     /* CJK upright, Latin rotated */
}
.arabic {
  direction: rtl;              /* inline axis runs right→left */
}
/* logical property — follows the mode automatically */
.box { margin-inline-start: 1rem; }

In horizontal-tb ltr, inline-start resolves to left and block-start to top. Switch to vertical-rl and the same logical properties remap to physical edges automatically — so a single rule lays out correctly in any mode.

Tips and notes

Prefer logical properties (margin-inline, inset-block, border-inline-start) over physical ones for international layouts.
text-orientation only affects vertical writing modes; it is ignored in horizontal-tb.
vertical-rl is the traditional CJK default; vertical-lr advances columns left-to-right.
Combine writing-mode: sideways-lr with rotated table headers for compact, readable vertical labels.