Modern web layout design is undergoing a fundamental shift. For decades, developers built interfaces using physical directions: top, right, bottom, and left. However, the rise of internationalization and complex editorial designs has made this physical approach a liability. To build truly adaptable layouts, developers must master the writing-mode CSS property, which establishes how lines of text are laid out and how blocks of content progress.
While predominantly used for vertical scripts such as Chinese, Japanese, or Korean, changing the writing mode is increasingly popular in English-language interfaces for aesthetic purposes. For instance, rotating a section heading sideways to run vertically along a block of text creates a striking, magazine-like editorial feel.
The Core Mechanics of Writing Modes
The writing-mode property applies to almost all elements, excluding table row/column groups, table rows/columns, and ruby containers. Each value of this property combines two responsibilities. First, it determines whether text runs horizontally or vertically. Second, it dictates the direction in which lines and block-level containers progress.
Standard modern browsers support several keyword values:
horizontal-tb: The default browser setting. Text runs horizontally, with lines and blocks stacking from top to bottom.vertical-rl: Text is laid out in vertical lines, with blocks progressing from right to left. Each new line is placed to the left of the previous one.vertical-lr: Text is laid out in vertical lines, with blocks progressing from left to right. Each new vertical line appears to the right of its predecessor.sideways-rl: Text runs vertically from right to left, but uses horizontal typographic conventions. The glyphs themselves are rotated 90 degrees clockwise, facing the right side.sideways-lr: Text runs vertically from left to right, using horizontal typographic conventions. Glyphs are rotated 90 degrees counterclockwise, facing the left side.
Shifting to Logical Axes
Understanding writing-mode requires moving away from absolute physical directions. The property establishes the block and inline directions that CSS uses to flow content.
The inline axis follows the direction in which text flows within a single line. The block axis runs perpendicular to the inline axis, following the direction in which blocks and lines stack.
In a standard horizontal-tb writing mode, the inline axis is horizontal, and the block axis is vertical. However, in a vertical writing mode like vertical-rl, these axes switch: the inline axis becomes vertical, and the block axis runs horizontally. This architectural shift is why modern layout systems like Flexbox and Grid rely entirely on logical directions.
Designing with Flow-Relative Properties
Because axes rotate based on the writing mode, using hardcoded physical dimensions like width and height or directional margins like margin-left can break layouts when the text direction changes. Logical properties solve this problem by adapting dynamically to the active writing mode.
Instead of width and height, developers should use inline-size and block-size. Rather than using physical borders or margins, flow-relative alternatives like margin-inline-start, margin-inline-end, padding-block-start, and padding-block-end ensure spacing remains consistent regardless of text flow.
This logical model also governs layout engines. In Flexbox, a container with flex-direction: row aligns items along the inline axis, meaning a flex row is horizontal in standard text but automatically becomes vertical in a vertical writing mode. Similarly, Grid alignments and track sizing respect these logical directions naturally, paving the way for highly resilient, internationalized web interfaces.