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 block size is a box's extent in the dimension perpendicular to text flow within a line. It corresponds to physical height in horizontal writing and physical width in vertical writing. The block-size property expresses that dimension without fixing one physical axis in its name.^[ref][ref]

For an own example, block-size: 80px; inline-size: 200px; describes a $200$-by-$80$ CSS pixel rectangle in horizontal-tb and an $80$-by-$200$ rectangle in vertical-lr, under simple definite-size assumptions. The latter has block progression toward the right, but the dimension's magnitude remains eighty pixels.

Box edges matter. With box-sizing: content-box; block-size: 20px;, ten-pixel padding and two-pixel borders on both block sides give an outer block extent ofpixels. That outer extent is physical height in a horizontal writing mode and physical width in a vertical one. CSS box-sizing and the applicable constraints determine how the declared value relates to the content and border boxes.

The declaration height: 50px; block-size: 80px; also changes meaning with writing mode. In horizontal writing, both address physical height, so the later block-size wins when their other cascade priorities are equal. In vertical writing, height constrains the inline dimension while block-size constrains physical width; both values can apply independently.^[ref]

CSS block flow direction identifies the direction in which blocks progress, whereas block size is a measurement along that axis. Moving from vertical-rl to vertical-lr changes the progression direction without swapping block size back to physical height.

An automatic block size can depend on content and layout, while min/max sizing properties can constrain the result. The useful interpretation is therefore an axis-relative size with the box-model and layout assumptions stated, not a universal promise that one declaration always fixes the painted rectangle exactly.

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 inline direction is the base directionality used for text within a line and for related direction-dependent layout. The direction property selects ltr or rtl; together with CSS writing mode, this establishes the mapping of logical inline-start and inline-end to physical directions.^[ref]

For a horizontal example with ordinary start-aligned text, direction: ltr places inline-start at the left edge, while direction: rtl places it at the right. A label aligned to inline-start can consequently change sides without changing its source text. In vertical writing, interpreting inline-start requires the writing-mode mapping too; it is not always a physical left or right edge.

Base direction is not an instruction to reverse every letter. The Unicode Bidirectional Algorithm considers the directional properties of text and the surrounding embedding or isolation context. A left-to-right sequence such as ABC can retain its internal order inside a right-to-left paragraph. CSS uses that algorithm rather than treating a string as an undifferentiated list to reverse.^[ref]

For HTML, the specification recommends expressing a document's directional semantics with markup such as <p dir="rtl">ABC</p> instead of depending solely on a CSS override. That example establishes a right-to-left paragraph base; it does not promise the visible sequence CBA. Keeping the directional information in the document also preserves it when styling is unavailable.^[ref]

CSS block flow direction remains a separate choice. A right-to-left horizontal paragraph still participates in a top-to-bottom block flow under horizontal-tb. Conversely, vertical lines can progress across a page under the block rules while their inline base direction follows its own mapping.

The scope of an override matters as well. A direction declaration on an ordinary inline box with unicode-bidi: normal does not by itself open a new embedding level for reordering. Diagnose the box's direction, its writing mode and the relevant bidirectional scope together.^[ref]

A CSS logical dimension measures a box relative to text flow rather than a fixed physical axis. The inline dimension is parallel to the flow within a line; the block dimension is perpendicular to it. CSS inline size and CSS block size are measurements along those respective dimensions.^[ref]

Let the inline size be $I$ and block size $B$. In a horizontal writing mode, physical width and height areIn a vertical writing mode, their roles exchange:These equations describe the dimension mapping; the box's actual used sizes still follow the applicable sizing and layout rules.^[ref]

For a simple definite-size example, take inline size $180$ and block size $60$ CSS pixels, with no padding, borders or conflicting constraints. The physical box is $180$ by $60$ in horizontal-tb, but $60$ by $180$ in vertical-rl or vertical-lr. The product $IB=10800$ is unchanged in this stipulated rectangle even though the physical width differs.

A direction reversal is a different operation. Changing CSS inline direction can exchange inline-start and inline-end while leaving the dimension itself the same. Likewise, vertical-rl and vertical-lr have the same inline/block axis mapping but different CSS block flow directions. An axis, its size and its directed start edge are related quantities with separate meanings.^[ref]

Logical dimensions help describe reusable layouts in terms such as the length available for a line and the extent available for successive lines or blocks. The specification's terms logical width and logical height refer to inline and block size respectively; they should not be read as promises about physical width and height in every mode.

This mapping also matters when a child uses a different writing mode from its containing context. Determine which box's CSS writing mode supplies each sizing reference before treating a number as a physical width. The dimension definitions provide the vocabulary, while the rules for the particular layout resolve its constraints.

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.