writing-mode
Set line orientation and the direction in which blocks progress.
Overview
| Class | Declarations |
|---|---|
writing-mode:horizontal-tb | writing-mode: horizontal-tb;
|
writing-mode:vertical-rl | writing-mode: vertical-rl;
|
writing-mode:vertical-lr | writing-mode: vertical-lr;
|
writing-mode:sideways-rl | writing-mode: sideways-rl;
|
writing-mode:sideways-lr | writing-mode: sideways-lr;
|
writing-mode:<mode> | writing-mode: <mode>;
|
Examples
Use vertical right-to-left flow
writing-mode:vertical-rl makes lines vertical and advances columns from right to left. Compare vertical-lr, which advances columns in the opposite direction.
<!-- writing-mode:vertical-rl --><p id="target" lang="zh-Hant" class="h:128px w:120px m:0 font-md leading:24px writing-mode:vertical-rl">清晰設計讓每個想法都有空間</p><!-- writing-mode:vertical-lr --><p id="target" lang="zh-Hant" class="h:128px w:120px m:0 font-md leading:24px writing-mode:vertical-lr">清晰設計讓每個想法都有空間</p>Generated CSS
@layer utilities { .writing-mode\:vertical-rl { writing-mode: vertical-rl }}In horizontal-tb, the inline axis is horizontal and the block axis is vertical; vertical modes exchange those roles.
Restore horizontal text
A nested block with writing-mode:horizontal-tb establishes its own horizontal writing context inside vertical content.
<!-- Vertical parent · horizontal block --><div id="context" class="h:160px font-md leading:24px writing-mode:vertical-rl"> <p lang="zh-Hant" class="m:0">設計筆記</p> <p id="target" class="w:160px max-w:100% m:0 font-md leading:24px writing-mode:horizontal-tb">A horizontal note inside vertical flow.</p></div>Use an actual block or inline-block for the independent writing context; an ordinary non-replaced inline span cannot switch its writing mode independently.
Pair with text orientation
Writing mode sets the flow, while text-orientation controls the glyphs inside it. Compare the same four digits.
<!-- writing-mode:vertical-rl text-orientation:mixed --><p id="target" class="h:128px m:0 font-md leading:24px text-orientation:mixed writing-mode:vertical-rl">2026</p><!-- writing-mode:vertical-rl text-orientation:upright --><p id="target" class="h:128px m:0 font-md leading:24px text-orientation:upright writing-mode:vertical-rl">2026</p>Apply conditionally
The compact label starts in vertical flow and becomes horizontal at sm on screen. Print uses horizontal flow as well.
<!-- Vertical label · horizontal at sm --><p id="target" class="width:160px height:160px m:0 font-md leading:24px writing-mode:vertical-rl writing-mode:horizontal-tb@print writing-mode:horizontal-tb@screen@sm">Design 2026</p>