CSS Writing Modes Table
| Piece | What it does | Field note |
|---|---|---|
writing-mode: vertical-rl | Vertical flow | Lines run top-to-bottom, columns right-to-left - Japanese/Chinese traditional |
horizontal-tb | The default | Every language you think of as horizontal lives here |
vertical-lr | Vertical, columns leftward | Mongolian script's native direction - the rare sibling |
text-orientation: mixed | Latin in vertical text | Rotates Latin 90°, keeps CJK upright - the readable mix |
text-orientation: upright | All glyphs upright | Latin letters stand like CJK - acronyms in vertical text |
Logical props follow | inline = the flow | vertical-rl flips inline to vertical - logical props just work |
Sideways is legacy | writing-mode: sideways-lr | Newer sibling for rotated Latin - support still thin |
UI vertical text | Book spines, labels | writing-mode on buttons/labels - the real everyday use |
writing-mode defines the FLOW of text: horizontal-tb is the default everyone assumes, vertical-rl runs lines top-to-bottom with columns progressing right-to-left (traditional Japanese and Chinese), and text-orientation decides what happens to Latin letters inside the vertical flow.
Bottom line: the deep consequence of writing modes is that LOGICAL properties follow the flow - margin-inline-start, text-align: start and border-inline-end all track wherever the text runs, so the same stylesheet works in vertical and horizontal because nothing was ever physical.
The honest part: full vertical typesetting is a specialist need (CJK publications, literary design), but vertical text on single ELEMENTS is everyday work - book spines, sidebar labels, diagram axis titles - one declaration each.
How to use
- Set the flow: .vertical { writing-mode: vertical-rl; } - lines run downward, new columns appear to the left; height becomes the line dimension.
- Choose Latin's fate: text-orientation: mixed (default) rotates Latin 90° while CJK stays upright; upright stands every glyph - acronyms in vertical text.
- Label vertically: .spine { writing-mode: vertical-rl; text-orientation: mixed; } on a narrow sidebar - the book-spine label with no transforms.
Frequently asked questions
What does writing-mode actually change besides text direction?
The coordinate system. The inline axis (how text flows) and block axis (how lines stack) rotate with the mode: in vertical-rl, inline runs top-to-bottom and blocks stack right-to-left - so margins, padding, width/height logic, line-height direction and text-align all reinterpret. The elements that survive unchanged are the ones written with LOGICAL properties (margin-inline-start, padding-block), which is why the logical-properties migration and writing modes are one topic: flow-relative code works in every writing mode by construction, physical code (margin-left) breaks the moment the flow turns.
How does text-orientation decide what Latin looks like in vertical text?
Three treatments. mixed (the default) keeps CJK glyphs upright but ROTATES Latin 90 degrees clockwise - so an English word in vertical Japanese reads by tilting your head, which is how Japanese publications have always set it. upright stands every glyph vertically - Latin letters stack like CJK characters, correct for acronyms and single-letter labels, wrong for words (letters read top-to-bottom individually). sideways lays everything rotated - rarely wanted, and its dedicated writing-mode: sideways-lr/sideways-rl values remain the less-supported corner of the family. Choosing is editorial: how should foreign script read inside your vertical text?
When is vertical text the right design choice - beyond CJK publications?
Whenever text is a LABEL for a vertical thing rather than reading material: book and binder spines, sidebar section labels, vertical navigation tabs, diagram and chart axis titles, calendar week headers, slide-out drawer tabs. In each case the text is short, the space is narrow, and rotating with a transform is the wrong tool (transforms rotate the rendered box and break layout flow - writing-mode re-flows the text genuinely, so the element participates in layout as a narrow vertical column). The CJK case is the other half: Japanese and Chinese sites may set body or section text vertically by typographic tradition, and the same properties carry it.
How do writing modes interact with logical properties in practice?
They are the reason logical properties exist. Every logical property maps to a physical side THROUGH the current writing mode: margin-inline-start is margin-left in horizontal-tb and margin-top in vertical-rl - automatically, no media queries or overrides. Building components with logical names means they type-set correctly in vertical contexts for free: a card works as a horizontal card and as a vertical spine label with only the writing-mode changed. The remaining rough edges: some legacy physical properties (box-shadow offsets, background-position keywords) are still physical, so fully vertical designs audit both layers - but the layout-critical spacing and alignment layer translates cleanly.