CSS typographic mode

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.^[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.^[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.^[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.^[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.^[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.