Hacker News Reader

Hacker News

Comment by alberth | Hacker News Reader

Full thread

alberth

Typography

The two most needed CSS properties for better web typography are Text-Box-Trim, as well as Margin-Trim

Please browser dev’s, implement both of these.

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim

—-

Here’s a JS hack in the mean-time:

https://seek-oss.github.io/capsize/

View on HN

Capsize is great! It's worth noting that it's not really a "JS hack": it doesn't require you to ship JavaScript to the browser. Capsize is written in JavaScript, but it's just a function that takes information about a specific font and typography information and outputs static styles, meaning you can run Capsize at build time or even just copy the generated CSS straight from their web site.

However, you can never guarantee the font text will be rendered in, so if you precalculate you may damage things. Web fonts may fail to load for a variety of reasons. Some users will force their own chosen fonts. In Firefox: Setting → Fonts → Advanced → untick Allow pages to choose their own fonts, instead of your selections above. I’ve done that for the last four years, as it makes the web so much better.

I don't know that I really get the point of margin-trim - there are already plenty of other, arguably clearer ways of avoiding padding at the start and end of an element - using flexbox and the gap property, using :not, even the classic + selector works pretty well here.

Is it designed to do more than just that, or is it just about avoiding gaps at the start and end of lines of elements?

margin-trim is basically a simpler alternative to adding a margin-bottom to every child, then removing the margin-bottom from the last child with :last-child { margin-bottom: 0; }

Flex with gap is also an alternative to that, and in my view should be the default thing you reach for. But there are some cases where the child margin approach has benefits, particularly if you're doing certain animations/transitions or if you want each child to essentially override its top or bottom gap.

But can't you do .selector:not(:last-child) ? Or .selector + .selector ? Both of these seem clearer than adding an extra property just to handle this case.

Like, I understand the situation, I've been in that place plenty of times. But I've never felt in want of a solution there.

I often use the so-called "lobotomized owl selector" (* + *) in the reset I use for my own internal tools. More specifically:

    * {
      margin: 0;
      padding: 0;
    }

    * + * {
      margin-top: 1em;
    }

That JS hack looks perfect. Except it shows up just how bad a font I've had to deal with is - Bebas Neue where the dimensions are just completely out of wack on it's little chart.

Reply on news.ycombinator.com