Most web content flows horizontally from left to right, but not every language or design calls for that orientation. The CSS writing-mode property gives you control over whether text lines are horizontal or vertical, and in which direction they progress. It's essential for languages like Chinese, Japanese, and Korean, where vertical writing is common, but it also opens up creative possibilities for headings, sidebars, and artistic layouts.
What writing-mode Does
The property does two things at once. First, it sets the direction of text lines—horizontal or vertical. Second, it determines the progression of both lines and block-level elements. The default value, horizontal-tb, places text in horizontal lines that stack from top to bottom. In contrast, vertical-rl arranges text vertically, with lines moving from right to left—each new line appears to the left of the previous one. Similarly, vertical-lr stacks lines from left to right.
There are also sideways-rl and sideways-lr, which rotate glyphs sideways while keeping vertical line progression. These are less common but useful for certain typographic effects.
Beyond Text Orientation: The Block and Inline Axes
writing-mode doesn't just affect the appearance of text—it fundamentally redefines the block and inline axes that CSS uses for layout. In the default horizontal mode, the inline axis runs left-to-right, and the block axis runs top-to-bottom. In a vertical mode, those axes swap: the inline axis becomes vertical, and the block axis becomes horizontal.
This shift ripples through every part of modern CSS. Flexbox, Grid, alignment properties, and logical properties all respond to these axes. For instance, margin-block-start will apply to the top in horizontal writing but to the right in vertical-rl. Logical properties like inline-size and block-size adapt to the writing mode, making layouts more versatile and language-agnostic.
Practical Implications for Layout
When you change writing-mode, you're not just rotating text—you're changing the entire flow of the container. Elements inside a vertical-writing container will stack horizontally rather than vertically. Grid rows and columns swap their meanings: a row can become vertical, and a column horizontal.
This is particularly powerful for responsive design. Instead of hardcoding physical directions, you can build layouts that adjust to the natural reading direction of the content. Even if you only ever use English, thinking in terms of block and inline axes can simplify complex alignments and make your CSS more maintainable.
Browser Support and Usage
writing-mode is well-supported across modern browsers, including Chrome, Firefox, Safari, and Edge. It's defined in the CSS Writing Modes Level 3 specification. To use it effectively, pair it with logical properties to ensure margins, padding, and sizing behave as expected.
In practice, you might set writing-mode: vertical-rl on a sidebar heading to create a vertical title, or use it on a block of Japanese text to match traditional typography. The key is to experiment and see how the container's children reflow—you'll often be surprised by the ripple effects.
Summary
The writing-mode property is a gateway to more flexible, culturally aware layouts. It redefines the core axes of CSS layout, affecting everything from Flexbox to Grid to logical sizing. Whether you're supporting East Asian languages or adding a creative twist to your designs, understanding writing-mode is a valuable tool in any front-end developer's kit.