CSS Rhythmic Sizing Module Level 1

5/15/2026 at 2:29:43 AM

The first draft is nearly ten years old at this point https://www.w3.org/TR/2017/WD-css-rhythm-1-20170302/

Does not look like too much has changed really. Still lots of unresolved issues. As noted elsewhere it is still very vague in terms of providing use cases, too.

by adzm

5/15/2026 at 1:39:39 AM

I think this proposal does an extremely poor job conveying the problem rhythmic sizing solves and why the solution is better than the "before" screenshot. I really don't understand it. I don't understand how I would configure the spacing beyond "CSS will keep the vertical rhythm across multiple columns" which seems extremely opaque and niche and I'd rather have implementers focus on one of the dozens of other things that CSS is objectively lacking and that people have asked for. But maybe I'm culturally biased and the 2nd screenshot is actually incredibly beautiful compared to the first one to someone more in tune than I.

And if I have to configure the spacing manually anyway, why wouldn't I just put `em`-based margins on my blockquotes or whatever.

by akersten

5/15/2026 at 7:57:08 AM

If you've ever done any DTP work, you'd know why this matters. CSS not ligning things up properly is one of the worst things about it. Just a picture with a paragraph of text on the side and a button underneath was enough to ruin a week and it would still never work right.

(Of course DTP sidesteps the problem by having fixed paper and font sizes. CSS by its nature can't get lucky.)

by tosti

5/15/2026 at 2:20:35 AM

Margins don't help. What if you have an image of variable height? Or a table with borders that don't evenly divide by your line height? Or in your block quote example, what if you wanted the font size to be slightly larger or smaller than your normal font style? It's immediately broken.

Everything after CSS1, more or less, could be accomplished with hacks or JavaScript. But sometimes it's nice to be able to say `block-step-size: 20px` and have it look the way you intend instead of having to write your own layout engine.

by bastawhiz

5/15/2026 at 6:01:06 AM

You’re not wrong, though it seems like we’re going to wind up with:

    box-sizing: border-box;
    height: calc-size(auto, round(up, size, 1rlh))

Solving most of the big issues before this will land anywhere.

by systoll

5/15/2026 at 7:50:29 AM

Does not compute. Calc-size? rlh?

I spent ages just trying to get a single column layout work right. And browsers would still disagree on the size of a pixel.

by tosti