= CSS typographic mode
{c}
The <CSS typographic mode> determines whether text uses typographic conventions specific to vertical flow or is treated as horizontal typography. This distinction is separate from the orientation of the <CSS writing mode>: text can occupy a vertical flow while retaining horizontal typographic treatment.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§1, typographic mode definition; §3.2, writing-mode values]{ref}
Under `writing-mode: horizontal-tb`, both writing mode and typographic mode are horizontal. Under `vertical-rl` or `vertical-lr`, both are vertical. Under `sideways-rl` or `sideways-lr`, the writing mode is vertical but the typographic mode is horizontal. Thus the suffix that names block progression does not by itself identify the typographic conventions.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§3.2, mode classification for each writing-mode value]{ref}
For an illustrative token `漢A`, compare `vertical-rl` with `text-orientation: mixed` against `sideways-rl`. In the first case, the vertical-script glyph receives its intrinsic vertical orientation while the Latin letter is sideways. The second mode treats the run as horizontal typography presented sideways. Both have right-to-left <CSS block flow direction>, but they need not produce the same <glyph> treatment.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§3.2, sideways mode; §5.1, mixed orientation]{ref}
This distinction matters for font selection of vertical <glyphs>, orientation and alignment. Vertical typesetting can use vertical metrics and alternate glyph forms rather than simply rotate all horizontal outlines. The example describes the specified categories, not an exact pixel measurement for every font.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§5.1.1, Vertical Typesetting and Font Features]{ref}
<CSS glyph orientation> is another related layer of control. In the pinned specification, `text-orientation` has an effect only in vertical typographic modes; setting it on a box using horizontal typographic mode does not turn that mode into vertical typography.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§5.1, applicability of text-orientation]{ref}
Keep <CSS inline direction>, block progression and typographic treatment distinct when diagnosing a vertical label. A change in the visible arrangement can come from different stages of the layout and <text shaping> process, so a single whole-box <CSS transform> is not a general substitute for specifying the intended typography.
Back to article page
