The reading stops here
A paragraph sits at the measure because the prose block caps itself. Then the prose closes, because what comes next is not reading.
PRIMITIVE
Measure
One job: stop a block at the reading width. It exists so that leaving a prose column costs nothing.
Leaving the column
The stack is a sibling of the paragraphs rather than a child of one, and it is still the same width.
LINUXDOWNLOAD
WINDOWSDOWNLOAD
And the reading picks up again. The stack above is a sibling of both paragraphs, not a child of either, so nothing in it is repainted by prose — and it is still exactly as wide.
<!-- The measure is shortened here so the cap is visible inside the book's own
column. Your pages keep the 70ch default. -->
<div class="flow" style="--ds-measure:38ch">
<article class="prose">
<h3>The reading stops here</h3>
<p>A paragraph sits at the measure because the prose block caps itself. Then the prose closes, because what comes next is not reading.</p>
</article>
<div class="rule-stack measure">
<div class="rule-row rule-row-spec"><span class="rule-row-key">LINUX</span><span class="rule-row-value">DOWNLOAD</span></div>
<div class="rule-row rule-row-spec"><span class="rule-row-key">WINDOWS</span><span class="rule-row-value">DOWNLOAD</span></div>
</div>
<article class="prose">
<p>And the reading picks up again. The stack above is a sibling of both paragraphs, not a child of either, so nothing in it is repainted by prose — and it is still exactly as wide.</p>
</article>
</div>Centred
Centring works on any block that caps itself — a prose article caps itself already, so it takes the centring class and no measure class at all.
Hard left, by default
A capped block fills from the start edge and leaves the rest of the container empty.
Centred
The same block, plus one class. It works inside a flow, which is where the two-rule trap lives.
ANDANYTHING ELSE
<!-- The measure is shortened here so there is room either side to see. -->
<div class="flow" style="--ds-measure:34ch">
<article class="prose">
<h3>Hard left, by default</h3>
<p>A capped block fills from the start edge and leaves the rest of the container empty.</p>
</article>
<article class="prose measure-center">
<h3>Centred</h3>
<p>The same block, plus one class. It works inside a flow, which is where the two-rule trap lives.</p>
</article>
<div class="rule-stack measure measure-center">
<div class="rule-row rule-row-spec"><span class="rule-row-key">AND</span><span class="rule-row-value">ANYTHING ELSE</span></div>
</div>
</div>Reference
Read from primitives/measure.css when this page was built, so it cannot fall behind the stylesheet.
CLASSES
.measure.measure-centerSETTINGSSet the first on one element; a theme sets the second for all of them.
--measure — falls back to --ds-measureREADSNothing from the theme — it is arrangement only.
Notes
prose is a reading column, and a component dropped inside one gets repainted by it — a link picks up the article underline, a list picks up the article indent. So the rule is: when the reading stops, let the prose close and let the component stand outside as a sibling.
That rule used to cost 350 pixels. A stack moved out of a 770px column landed at 1120px, so staying inside was the only way to keep the width — and a rule you cannot follow without a visible regression is a rule nobody follows. This is the missing half of it.
Set --measure on the block. There is no second class for a wider one, deliberately: the class carries the job and the variable carries the value, which is the same shape split and accordion use. A site that wants the wide measure everywhere writes it once in a class of its own.
margin-inline: auto on its own collapses a prose to zero, and neither half of that is obvious. Auto margins in the cross axis switch off flex stretch, so the box falls back to its intrinsic size — and prose declares container-type: inline-size, whose intrinsic inline size is zero by definition.
Measured in a 1200px column: plain 622.9px, with the auto margin 0px, with container-type: normal instead 221.5px, and with inline-size: 100% back to 622.9px and centred. Under a plain block parent none of it is needed, which is what makes hand-rolling this look like it works — until the thing above it is a flow.