The bureau of weights and measures

Every system of measures needs an office to keep the standards: the meter had its platinum bar in a basement at Sèvres, the kilogram its cylinder under three bell jars. CSS has one too — it is called CSS Values and Units, and that is where every unit receives its definition, its backing and its certificate. This chamber is that office's reception hall.

The vault has one peculiarity no physical bureau ever had: the primary standard is not an object, it is an exchange rate. The inch is worth 96 pixels by decree, the centimeter is worth a fraction of an inch, and the pixel itself is defined as a visual angle — the honest lie upon which all the other units do their sums.

The grammar, in one line

A measure in CSS is a number glued to a unit, no space: 40ch, 0.25turn, 2dppx. The unit states the quantity — length, angle, time, resolution or the grid fraction — and the quantity states where the measure may be spent. This chamber's drawers follow that taxonomy: typographic units, which measure with the font itself; absolute ones, anchored to the reference pixel; the fractions of viewport and container; and the smaller halls of angles, time and resolution.

Live demonstrations

A self-respecting bureau does not describe the standard: it presents it. Whenever the physics of the page allows, each unit's example is a piece of HTML measured with the unit itself, in pure CSS — the paragraph on the ch page really is 40ch wide, the square on the turn page really is rotated an eighth of a turn. No instrument beyond your browser.

Why lots of little pages

For the same reason as the herbarium: every unit, every drawer, every ordering and this very text are separate HTML files, linked together, written by a generator a few hundred lines long. State becomes an address; the browser handles the rest.