= CSS logical dimension
{c}
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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§6.1, Abstract Dimensions]{ref}
Let the inline size be $I$ and block size $B$. In a horizontal writing mode, physical width and height are
$$
W=I,\qquad H=B.
$$
In a vertical writing mode, their roles exchange:
$$
W=B,\qquad H=I.
$$
These equations describe the dimension mapping; the box's actual used sizes still follow the applicable sizing and layout rules.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§§6.1 and 6.4, dimension definitions and mappings; §7.2, dimensional mapping in layout]{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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§6.2, Flow-relative Directions; §6.4, mappings]{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.
Back to article page
