Beauty is in the Eye of the Beholder

Have You Seen WebKit’s New text-wrap: pretty Feature?

Jen Simmons recently published an insightful post on the WebKit blog introducing a new CSS feature: text-wrap: pretty. This enhancement has been added to Safari Technology Preview and is available for testing right now.

By simply adding text-wrap: pretty to your CSS, you can significantly improve the appearance of your paragraphs. This single value helps refine text ragging, reduce hyphenation, eliminate typographic orphans (those lonely words on the last line), and minimize unsightly rivers of white space in your text. The first example image in Jen’s post clearly demonstrates how much of a difference it can make.

Image caption: A screenshot showing poor typography with a short last line, uneven rag, excessive hyphenation, and visible rivers of space. Credit: WebKit Blog

That’s a lot of typographic refinement packed into one property! But what’s particularly interesting is that WebKit’s approach to text-wrap: pretty is notably different from Chromium’s implementation of the same feature.

According to an article by the Chrome team, Chromium’s version of text-wrap: pretty focuses primarily on the final four lines of a paragraph. Its goal is to prevent short last lines and to adjust hyphenation if multiple hyphenated lines appear at the end.

Jen points out that performance concerns likely influenced Chrome’s more limited implementation. While WebKit’s version does more, it’s designed to scale well—even with long-form content. In other words, Safari isn’t sacrificing performance for better looks.

As Jen explains:

One thing to know as a developer: the performance of text-wrap is not affected by how many elements on the page it’s applied to. Performance concerns only arise when the pretty algorithm processes very large blocks of text—hundreds or thousands of lines. That kind of content is rare on the web. So if your site uses conventional paragraph lengths, you’re in the clear. Use text-wrap: pretty freely, and trust that WebKit’s engineers have optimized it for real-world use.

So, what’s the catch? Well, now we have two major browsers implementing the same feature in different ways. This highlights a broader point: the CSS specification for text-wrap: pretty is intentionally vague. It leaves room for browsers to interpret “pretty” as they see fit.

The spec itself says (emphasis added):

The user agent may among other things attempt to avoid excessively short last lines… but it should also improve the layout in additional ways. The precise set of improvements is user agent dependent, and may include things such as: reducing the variation in length between lines; avoiding typographic rivers; prioritizing different classes of soft wrap opportunities, hyphenation opportunities, or justification opportunities; avoiding hyphenation on too many consecutive lines.

In short: one feature, multiple interpretations. But that’s not a bad thing—it gives browsers the flexibility to innovate and improve typography in their own way.

So go ahead, experiment with text-wrap: pretty, and enjoy the finer control it gives you over your text layout. Typography just got a little more beautiful. 💪