= CSS writing mode
{c}
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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§1, Introduction to Writing Modes; §§2.1, 3.2 and 5.1, respective properties]{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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§3.2, Block Flow Direction: writing-mode]{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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§6.1, Abstract Dimensions; §6.4, Abstract-to-Physical Mappings]{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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§2.1, direction; §6.2, Flow-relative Directions]{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.
Back to article page
