Baseline Grid | Hacker News Reader

Baseline Grid

observablehq.com

107 pointsjashkenas7 comments

It would be great to have native support in CSS for aligning text and block elements to a baseline grid (without having to fudge it with margins and padding.) I think the latest draft spec for this is CSS Line Grid[1], and it's severely underrated. With people these days doing most of their reading on the web, it's crazy that the web doesn't support what would be a basic layout mode in any desktop publisher.

[1]: https://drafts.csswg.org/css-line-grid-1/#intro

With people these days doing most of their reading on the web, it's crazy that the web doesn't support what would be a basic layout mode in any desktop publisher.

Except it does, because (as you say) it can be done using current layout technology - what you call "fudging with margin and padding" is what I would call "using margin and padding". No doubt a design app to help work out those values, or some computation using CSS's calc(), or even some progressive enhancement using JS, would be helpful if the design calls for it but designers and developers desire to avoid those using what's there now should not be what drives web standards. "This is not possible with current tech" or "The current tech is inefficient and bad for perf" is what should drive standards, not "I don't like the current tech".

Also, as a bit of a side note, the draft spec you linked to includes the following line: "And careful calculations can be thrown off by user stylesheets." The author believes a layout being altered by the user's browser choices is a bad thing. I disagree with that so much. Giving the user the power to completely change their experience of a site is one of the best things browsers do.

Nice! I actually just released a Chrome extension that makes it really easy to render a grid–that includes a baseline grid–over any site. I hope others find this as useful as I have.

https://chrome.google.com/webstore/detail/grids-by-color-set...

Thanks, that's actually quite useful for the layout stuff I'm trying to do on a personal project right now :)

It's funny to see that all grids fail on the web. Every single example i've checked the grid was 1-2 pixels off. It looked good, but it didn't match.

Is it just me or is Observable kind of confusing? I say this as someone who's worked with Jupyter and JS plenty.

I'm having a hard time understanding the source code at the bottom. Where are the functions defined? I see a whole bunch of `f`, without a definition.

Reply on news.ycombinator.com