4 ms·

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 thes

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 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/ https://seek-oss.github.io/capsize/

tshaddox 2y ago
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.
- chrismorgan 2y ago
  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.
MrJohz 2y ago
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?
- tshaddox 2y ago
  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.
  - MrJohz 2y ago
    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.
    - deleted 2y ago
      [deleted]
    - spdustin 2y ago
      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; }
kennydude 2y ago
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.

tshaddox 2y ago

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.

chrismorgan 2y ago
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.

MrJohz 2y ago

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?

tshaddox 2y ago
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.
- MrJohz 2y ago
  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.
  - deleted 2y ago
    [deleted]
  - spdustin 2y ago
    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; }

kennydude 2y ago

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.