= CSS glyph orientation
{c}
<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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§5.1, Orienting Text, applicability and values]{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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§5.1, mixed and upright definitions]{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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§5.1, initial value and script-dependent meanings]{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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§5.1, upright used-direction rule and accompanying note]{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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§5.1.1, Vertical Typesetting and Font Features]{ref} Distinguishing glyph treatment from whole-box layout helps explain why vertical typography requires more than rotating a finished horizontal image.
Back to article page
