= CSS block flow direction
{c}
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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§3.2, Block Flow Direction: writing-mode]{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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§6.1, logical dimensions; §6.4, abstract-to-physical mappings]{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.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§6.2, Flow-relative Directions; §6.4, mappings]{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.
Back to article page
