“Fairly” is within the eye of the beholder

Hey, did you see the put up Jen Simmons revealed about WebKit’s text-wrap: fairly implementation? It was added to Safari Expertise Preview and may be examined now, as in, like, in the present day. 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 customarily avoids massive typographic rivers in consequence. The primary visible within the put up tells the total story, exhibiting how every of those is dealt with.

That’s a whole lot of heavy lifting for a single worth! And based on 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 traces of a paragraph. It’s targeted on stopping quick final traces. It additionally adjusts hyphenation if consecutive hyphenated traces 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 a whole lot of work, and you may think that might have a cumulative impact after we’re speaking about long-form content material the place we’re dealing with a whole lot, if not hundreds, of traces of textual content. If it appears like Safari cares much less about efficiency, that’s not the case, as their strategy 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 an increasing number of traces into consideration because it calculates what to do. In WebKit-based browsers or apps, your textual content aspect would must be many a whole lot or hundreds of traces lengthy to see a efficiency hit — and that type of content material is uncommon on the net. In case your content material is damaged up into typical-length paragraphs, then you haven’t any cause 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 really 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 aspect, 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 traces… but it surely also needs to enhance the structure in further methods. The exact set of enhancements is consumer agent dependent, and should embrace issues resembling: decreasing the variation in size between traces; avoiding typographic rivers; prioritizing totally different lessons of sentimental wrap alternatives, hyphenation alternatives, or justification alternatives; avoiding hyphenation on too many consecutive traces.

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