The Power of text‑wrap: pretty

A few years back, I published an article 'Using JavaScript to Avoid Orphans' where I shared a solution for the common typographic challenge of preventing orphans (or 'runts') ‑ where single words fall onto the last time of a paragraph. At the time I had been working for a prestigious UK department store improving their customer experience, where one of the tasks presented had been to improve the way that text was displayed on their product listing pages, by removing errant runts from the product titles:

At the time, the solution was simple: use JavaScript to wrap the final two words in a string in a <nobr> element (albeit a non‑standard HTML element) or otherwise in a <span> with the inline style white‑space: nowrap;.

I liked this feature so much that I used it extensively across the version of my personal website at the time.

However, times have changed. With recent additions to the text‑wrap property, and assuming that you are okay with a decent but improving level of browser support, then the need for script‑based adjustments is redundant in the face of more modern CSS‑centric approaches.

text‑wrap: pretty represents a modern, elegant way to improve web typography, simplifying the process of ensuring cleaner, more visually consistent text blocks without runts or orphans.

A Quick Recap on Orphans in Typography

I've gone into detail on what orphans in typography are before but for the sake of a quick recap... Orphans, (sometimes referred to as 'runts') in typography, are single words that fall on their own line at the end of a paragraph, isolated on the last line.

I used the letter that Doc wrote to Marty in Back to the Future Part II previously to illustrate this, so it makes sense to use another excerpt from it to illustrate this phenomenon again now. Here, you can see that the last word ('machine') falls onto a line all on its own. I've highlighted it in red just to make it really obvious.

These lone words disrupt the visual harmony and readability of the text, creating an uneven and ‑ some feel ‑ an unprofessional look. In web design, avoiding orphans can be really difficult, especially when you have fluid‑width layouts to contend with. However, they can cause awkward gaps, draw attention away unnecessarily, and break the reader's flow, detracting from the overall aesthetic and content. Finding a way to ensure that the text we display on‑page is visually appealing can be a quick way to improve a user's experience.

Understanding text‑wrap: pretty

text‑wrap: pretty is a CSS property which has been introduced as part of CSS Text Level 4 (albeit still currently a working draft), and is designed to enhance web typography by addressing the issue of orphans. Its primary function is to intelligently adjust line breaking within a text block, preventing these lone orphans, and thereby improving the visual consistency and readability of the text.

In action, it looks like this:

text‑wrap: pretty does also extend beyond merely preventing orphans in paragraphs, it also intelligently adjusts hyphenation, particularly when consecutive lines at the end of a paragraph are hyphenated. In tandem with removing orphans and adjusting text justification, it serves to generally improve line‑wrapping and text‑breaking of a paragraph of text.

We are still in the early days of this type of more typography‑focused CSS capabilities; I expect that we will see further enhancements to text‑wrap: pretty in the future.

From JavaScript to CSS

Historically, managing orphans in typography required JavaScript to dynamically adjust text, which added complexity to the codebase and had a potential knock‑on effect to performance (although plenty of the time this transformation would occur at the SSR stage).

In contrast, text‑wrap: pretty offers a CSS‑based solution that is simpler to implement and literally requires a single line of CSS code. Offsetting this type of calculation to the browser rather than attempting it client‑side is inevitably more performant too and results in cleaner, more efficient code. With time, as browser uptake improves, it will also result in a more consistent appearance across different browsers and devices.

In Practice

To demonstrate text‑wrap: pretty in action, let's consider a real‑world scenario: enhancing the readability of my blog posts. In my CSS, I simply apply the property to paragraph elements across the site:

p {  text-wrap: pretty;}

What this single line of code does is automatically adjust the text within my paragraphs to avoid orphans. Here's a side‑by‑side example of a couple of paragraphs of lorem ipsum, without text‑wrap: pretty on the left, with text‑wrap: pretty on the right:

As you can see, the difference is subtle but significant. The version with text‑wrap: pretty displays a more visually appealing layout, with no single words stranded at the bottom of paragraphs.

As text‑wrap: pretty enhances web typography by preventing orphans and improving the way text wraps in a paragraph, I should also mention it's cousin, the text‑wrap: balance property. balance aims to create a visually harmonious text block by adjusting the wrap to balance the length of lines, which is particularly effective for headlines and shorter pieces of text.

I go into much more detail about balance and compare it against pretty in my article 'Enhancing web typography with text‑wrap: balance'.

With all this said, it is important to be aware of the limitations here. As text‑wrap: pretty is part of an as‑of‑yet‑unfinished standard, it is likely to evolve and change as time goes on. Browser support is also generally ok but not amazing. I would personally argue that for something like this, it's a nice additional enhancement that improves user experience, but it's not entirely essential for the users to use and appreciate the content, so having some limitations in support this early in its release is expected, and that's okay.

The Future of Web Typography?

As I mentioned earlier, the introduction of new features to text‑wrap hints at an exciting future for web typography, where CSS continues to evolve to meet the complex needs of digital design.

This movement towards more sophisticated and typography‑focused CSS properties suggests a future where designers may have even greater control and flexibility to control text rendering directly within the CSS, helping to reduce reliance on JavaScript for visual refinements. As web standards evolve, we can expect to see more such properties that enhance readability and aesthetic appeal.

It's an exciting time for web developers and designers to experiment with these new capabilities, like text‑wrap: pretty, and provide feedback that could shape future CSS developments.