Beyond Horizontal Text
The CSS writing-mode property is most commonly associated with languages like Chinese, Japanese, or Korean, where text is traditionally set vertically. However, in English web development, it serves a deeper purpose. It fundamentally establishes the block and inline directions that CSS uses to lay out content.
Understanding Logical Axes
Modern CSS layout is built around logical axes rather than physical directions. The inline axis follows the direction in which content flows within a line. The block axis follows the direction in which blocks and lines stack.
In the default horizontal writing mode, the inline axis runs horizontally, and the block axis runs vertically. When you switch to a vertical writing mode like vertical-rl, these relationships flip. The inline axis runs vertically, and the block axis runs horizontally.
The Power of Flow-Relative Properties
This logical model is why properties like inline-size and block-size are so valuable. Instead of referring to fixed physical dimensions like width and height, they describe the size of an element along its logical axes. In a horizontal mode, inline-size corresponds to width. In a vertical mode, it corresponds to height.
The same principle applies to Flexbox and Grid. A Flexbox container with flex-direction set to row lays out items along the inline axis. Depending on the writing mode, that row can be horizontal or vertical. Grid rows and columns also respect these logical directions.
Designing for the Future
Understanding this model is useful even if you never create a vertical layout. Once you start thinking in terms of block and inline axes, modern CSS layout features become significantly easier to understand. Your layouts become less dependent on a particular writing direction or physical screen orientation, making your code more robust and adaptable to global audiences.