“Fairly” is within the eye of the beholder

Hey, did you see the submit Jen Simmons revealed about WebKit’s text-wrap: fairly implementation? It was added to Safari Expertise Preview and could be examined now, as in, like, at the moment. Slap this in a stylesheet and your paragraphs get a pleasant little makeover that improves the ragging, reduces hyphenation, eliminates typographic orphans on the finish of the final line, and usually avoids massive typographic rivers consequently. The primary visible within the submit tells the total story, exhibiting how every of those is dealt with.

That’s numerous heavy lifting for a single worth! And in accordance with Jen, that is vastly totally different from Chromium’s implementation of the very same function.

In keeping with an article by the Chrome staff, Chromium solely makes changes to the final 4 strains of a paragraph. It’s centered on stopping quick final strains. It additionally adjusts hyphenation if consecutive hyphenated strains seem on the finish of a paragraph.

Jen means that efficiency issues are the rationale for the distinction. It does sound just like the fairly worth does numerous work, and you may think that may have a cumulative impact after we’re speaking about long-form content material the place we’re dealing with a whole bunch, if not hundreds, of strains of textual content. If it feels like Safari cares much less about efficiency, that’s not the case, as their method is able to dealing with the load.

One factor to know as a developer, the efficiency of text-wrap isn’t affected by what number of parts on the web page it’s utilized to. Perf issues emerge because the fairly algorithm takes increasingly strains into consideration because it calculates what to do. In WebKit-based browsers or apps, your textual content aspect would must be many a whole bunch or hundreds of strains lengthy to see a efficiency hit — and that sort of content material is uncommon on the internet. In case your content material is damaged up into typical-length paragraphs, then you haven’t any purpose to fret. Use text-wrap: fairly as a lot as you need, and depend on our browser engineers to make sure your customers is not going to expertise any downsides.

Nice, keep it up! However now you recognize that two main browsers have competing implementations of the identical function. I’ve been unclear on the terminology of fairly because it was specced, and now it actually appears that what is taken into account “fairly” actually is within the eye of the beholder. And should you’re hoping to decide on a facet, don’t, as a result of the specification is deliberately unopinionated on this state of affairs, because it says (emphasis added):

The consumer agent could amongst different issues try and keep away from excessively quick final strains… however it also needs to enhance the structure in extra methods. The exact set of enhancements is consumer agent dependent, and will embrace issues equivalent to: decreasing the variation in size between strains; avoiding typographic rivers; prioritizing totally different lessons of sentimental wrap alternatives, hyphenation alternatives, or justification alternatives; avoiding hyphenation on too many consecutive strains.

So, there you have got it. One new function. Two totally different approaches. Take pleasure in your new typographic powers. 💪