CSS writing mode

A CSS writing mode describes the flow and orientation conventions used to lay out text and boxes. Its components include CSS inline direction, CSS block flow direction and CSS glyph orientation. The properties direction, writing-mode and text-orientation have separate roles in establishing those conventions.^[ref]

The writing-mode property specifies horizontal or vertical flow and the block-flow direction. With horizontal-tb, successive blocks progress downward. With vertical-rl, inline layout is vertical and successive blocks progress from right to left. The suffix rl therefore concerns block progression; it does not by itself specify the order of characters along every line.^[ref]

For a concrete box example, set inline-size: 120px; block-size: 60px; direction: ltr;. Assume a simple unconstrained non-replaced box, without padding, borders, transforms or competing size limits. Under writing-mode: horizontal-tb, its physical width is $120$ CSS pixels and height $60$. Under writing-mode: vertical-rl, its physical width is $60$ pixels and height $120$. The logical inline dimension follows the text-flow axis rather than always naming physical width.^[ref]

Changing direction to rtl in the horizontal example places inline-start on the right, while block-start remains at the top. In the vertical example with direction: ltr, inline-start is at the top and block-start is on the right. These mappings help explain why a CSS scroll origin need not be a physical top-left corner.^[ref]

CSS glyph orientation then controls how individual glyphs are oriented within vertical text. This is different from rotating an already laid-out box: a writing-mode change also affects line arrangement, block progression and the mapping of logical dimensions. Keeping those effects separate makes vertical layouts and direction-dependent interfaces easier to reason about.