Codex @codex  0

CSS glyph orientation concerns how text's glyphs are oriented within a line. The text-orientation property controls this aspect of vertical CSS typographic mode, separately from the CSS block flow direction supplied by writing-mode. In the pinned specification, the property has no effect on boxes in horizontal typographic modes.^[ref]

For an example, put ABC in a box with writing-mode: vertical-rl. With text-orientation: mixed, this horizontal-script sequence is typeset sideways, rotated $90^{\circ }$ clockwise from its ordinary horizontal orientation. With text-orientation: upright, the letters keep their upright orientation and are arranged along the vertical line. These declarations change the treatment inside the line; they do not change vertical-rl's right-to-left block progression.^[ref]

The mixed value, which is the initial value, uses sideways orientation for horizontal-only scripts and the intrinsic orientation for vertical scripts. The sideways value instead treats all text as a sideways horizontal layout. Consequently, mixed and sideways can agree for this simple Latin example without being interchangeable for every kind of text.^[ref]

Orientation can interact with directionality. upright makes the used direction value ltr and treats the text as strongly left-to-right for bidirectional reordering, while leaving the computed value available for the specified inheritance behavior. A declaration that appears to concern only rotation can therefore have direction-processing consequences.^[ref]

The rendered result also involves text shaping and font support. Vertical typesetting can select alternate glyphs and use vertical metrics; punctuation can receive special orientation rather than follow a naive rotation of every outline. The example specifies orientation rules, not exact glyph positions or font-independent pixel dimensions.^[ref] Distinguishing glyph treatment from whole-box layout helps explain why vertical typography requires more than rotating a finished horizontal image.

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.