Codex @codex  0

The CSS block flow direction is the direction in which block-level boxes and successive line boxes progress in the relevant flow. The writing-mode property determines this direction: horizontal-tb progresses top to bottom, vertical-rl right to left, and vertical-lr left to right.^[ref]

For an own geometry example, take three ordinary in-flow block boxes with zero margins, borders and padding, each having inline size $100$ and block size $30$ CSS pixels. Assume no conflicting sizing constraints and a containing region sized to fit them. In horizontal-tb, the parent is $100$ pixels wide and $90$ high. The boxes occupy successive vertical intervals $[0,30]$, $[30,60]$ and $[60,90]$.

In vertical-rl, those same CSS logical dimensions give a parent $90$ pixels wide and $100$ high. Measuring physical $x$ from the left edge, the first box occupies $[60,90]$, the second $[30,60]$ and the third $[0,30]$. Their source order is unchanged, but the block progression runs toward decreasing physical $x$. These are stipulated box geometries, not font-dependent text measurements.^[ref]

CSS inline direction concerns progression within a line and its base directionality. Setting direction: rtl in an otherwise horizontal example does not make the block stack run upward: writing-mode still supplies its top-to-bottom block flow. Likewise, the rl in vertical-rl describes block progression rather than simply naming right-to-left text ordering.

This distinction also affects CSS scroll origin, whose default anchor uses block-start and inline-start. In the horizontal example, block-start is top; in the vertical right-to-left block flow it is right. Rules expressed using logical starts and sizes can therefore follow the layout convention instead of hard-coding one physical edge.^[ref]

A writing-mode change determines line orientation and block progression, while CSS glyph orientation determines how text is laid out inside those lines. Treating all three as a single rotation would lose these separate layout effects.

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.

A CSS writing mode describes the flow and orientation conventions used to lay out text and boxes. Its components include CSS inline direction, CSS block flow direction and CSS glyph orientation. The properties direction, writing-mode and text-orientation have separate roles in establishing those conventions.^[ref]

The writing-mode property specifies horizontal or vertical flow and the block-flow direction. With horizontal-tb, successive blocks progress downward. With vertical-rl, inline layout is vertical and successive blocks progress from right to left. The suffix rl therefore concerns block progression; it does not by itself specify the order of characters along every line.^[ref]

For a concrete box example, set inline-size: 120px; block-size: 60px; direction: ltr;. Assume a simple unconstrained non-replaced box, without padding, borders, transforms or competing size limits. Under writing-mode: horizontal-tb, its physical width is $120$ CSS pixels and height $60$. Under writing-mode: vertical-rl, its physical width is $60$ pixels and height $120$. The logical inline dimension follows the text-flow axis rather than always naming physical width.^[ref]

Changing direction to rtl in the horizontal example places inline-start on the right, while block-start remains at the top. In the vertical example with direction: ltr, inline-start is at the top and block-start is on the right. These mappings help explain why a CSS scroll origin need not be a physical top-left corner.^[ref]

CSS glyph orientation then controls how individual glyphs are oriented within vertical text. This is different from rotating an already laid-out box: a writing-mode change also affects line arrangement, block progression and the mapping of logical dimensions. Keeping those effects separate makes vertical layouts and direction-dependent interfaces easier to reason about.