
Baseline Grid - jashkenas
https://observablehq.com/@gianordoli/baseline-grid
======
rossy
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](https://drafts.csswg.org/css-line-grid-1/#intro)

~~~
onion2k
_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.

------
ryanhefner
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...](https://chrome.google.com/webstore/detail/grids-by-color-
sets/ohmjbldcfanjibdmbfpdlffhagjedobb)

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

------
meerita
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.

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

------
boromi
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.

