CSS writing-mode: test layout axes rather than rotating text

Last updated: 5 Oct 20265 min read

tutorial

Writing-mode establishes the direction in which text lines are laid out. It also changes the relationship between inline and block axes, so logical sizing and spacing follow the writing mode.

When to use it

A bilingual archive has a narrow vertical title strip for a genuinely vertical label. Writing-mode vertical-rl gives the strip a vertical line flow without rotating its entire box with a transform. Keep the surrounding document in its ordinary writing mode and inspect how inline-size, block-size, padding-inline, and alignment behave at the boundary. Do not turn a full form vertical for decoration: keyboard order, reading expectations, and control rendering need a separate review. The sample scopes the mode to one label. Test a short label, a longer translated label, and high zoom. If the content is actually horizontal text displayed sideways, a transform might be a distinct visual choice, but it does not change layout axes.

.archive-spine__label { writing-mode: vertical-rl; inline-size: max-content; max-block-size: 4rem; padding-inline: .5rem; }

Cost and verification

Changing the writing mode changes line layout and can alter the space a component requests from its parent. That can be more significant than the paint cost of the declaration. Use logical properties consistently; a physical width may still be useful for a fixed design, but it has a different meaning from inline-size under vertical flow. Check the selected font and fallback because glyph orientation and spacing can differ. Preserve an ordinary readable label in the DOM rather than baking letters into an image. Print and narrow mobile layouts deserve separate inspection.

Common Mistakes

Do not assume inline-size always means physical width.
Do not rotate an entire form merely to fit a visual strip.
Do not replace selectable text with an image of vertical lettering.

Connected lessons

Further rendering decisions

css

reference

web