CSS hyphenation strengthen is lovely just right — only a -webkit- prefix left for Safari I’d love to peer them yank off. Toss it on a mother or father, let it cascade, and also you’ll see textual content hug the ragged edge a little bit nearer and a little bit extra persistently. You don’t have to make use of it, it’s just a little of a classy selection.

I used to be fascinated with this as a result of I noticed Hyphenopoly.js — a polyfill for hyphenation in JavaScript that’s pop out in the previous couple of months. I kinda don’t get it with the browser strengthen being so just right, however it does paintings in Node which may well be fascinating, and I guess this could be extensible to written languages the place hyphenation isn’t supported but.

Replace from Mathias Nater:

Hyphenopoly.js got here out 2018 and its predecessor – Hyphenator.js –  round 2008, a while sooner than hyphens:auto; used to be to be had.
There are nonetheless many languages that aren’t supported natively in all browsers.

Hyphenopoly.js helps 72 languages and, yep, it’s extensible: we’ll simply want hyphenation patterns (the similar patterns TeX makes use of) or an enormous record of pre-hyphenated phrases the place I will be able to compute the patterns from.

(I used to be underneath the impact it had simply pop out in the previous couple of months!)

There’s a ton extra to the CSS artwork of controlling the place phrases spoil via. Probably the most complete reads at the topic is Will Boyd’s Deep Dive into Textual content Wrapping and Phrase Breaking.

Whilst we’re on sort for a 2nd, I do want you to understand that Stabby exists:

Extra just right information (in a sec). You understand how the content material of a web page can shift round when a customized font so much after a fallback font has rendered? This is without doubt one of the nice tradeoffs of demonstrate web pages at the moment. Lengthen rendering till the customized font is in a position method no structure shift (just right!), however then you definitely’re… delaying rendering (unhealthy!). To my nice wonder, the internet has shifted towards no longer delaying rendering, in large part because of CSS’ font-display: change;

It’s imaginable to have your cake and consume it too have non-shifting customized font loading with out behind schedule rendering via CSS trickery. It comes to the use of a font loader in order that you know when the customized font so much and will modify CSS to verify none/little structure shift occurs. The methods had been adjusting such things as font-size, letter-spacing, and the ones classics.

The excellent news is that that previous moderately hacky manner of coping with font fallbacks is out and a brand new faculty manner of coping with font fallbacks is in. Right here’s Katie Hempenius’ contemporary article:

This newsletter is a deep dive into font fallbacks and the size-adjust, ascent-override, descent-override, and line-gap-override APIs. Those APIs make it imaginable to make use of native fonts to create fallback font faces that carefully or precisely fit the size of a internet font. This reduces or removes structure shifts led to by way of font swapping.

Advanced font fallbacks

4 new issues only for fallbacks! Wow. Say you’re loading a customized font referred to as Poppins, it finally ends up having a look like this:

frame {
  font-family: Poppins, "fallback for poppins";
}

@font-face {
  font-family: "fallback for poppins";
  src: native("Occasions New Roman");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

My mind right away went uhmmmmm wouldn’t those metrics utterly rely at the mixture of the customized font and the fallback font? It appears no longer regardless that!

As a result of font metric overrides are calculated the use of measurements that come from the metadata of the internet font (and no longer the fallback font), they keep the similar irrespective of which font is used because the fallback font.

That’s truly nice. So you’ll principally determine (or glance up) the overrides in your customized font, put them in position, and also you’re immediately up just right to move. That’s a just right API.

Welp I didn’t truly intend for this complete factor to be about typography stuff, however right here we’re. You gotta see Adam Argyle’s Textual content Substitute Transitions!

You might want to code any selection of techniques. However Adam did it the use of the brand new View Transitions API (so that you’ll simplest have the ability to see the demo in Chrome Canary). It’s any such a laugh solution to play with animating issues since the API is so tidy: name report.startViewTransition, exchange the DOM, let it animate (keep an eye on with CSS if you need). Optimistically, the CSS homes shall be all this is wanted solely from cross-page View Transitions (I feel that’s the case, I simply haven’t noticed it truly paintings neatly but).