CSS glyph orientation

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.