davidbgk
/
larlet-fr-david-cache

title: When to use CSS text-wrap: balance; vs text-wrap: pretty;
url: https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/
hash_url: b31ba18e3de1fc479b79f1885043026a
archive_date: 2024-01-07
og_image: https://blog.stephaniestimac.comundefined
description: A ruthless look at when to use these two CSS text-wrap values.
favicon: https://stephaniestimac.com/imgs/favicon.ico
language: en_US

<p>At the start of the year I had written about how I wanted to spend this year writing about new CSS features landing in browsers. Life happened and it was in my best interest to do things off the web and away from my computer. But I'm picking this back up again because I'm genuinely back in a space to be exploring and creating things again. I wanted to start this little post off like this for anyone else who is struggling with burnout. It's okay to take a break. It's beneficial for your brain and the rest of you. Side projects will always be there to work on.</p>
<p>Now onto good ol' text-wrap.</p>
<p>I was looking into <code>text-wrap</code> and doing some research on the difference between when to use <code>balance</code> and when to use <code>pretty</code> (both are still experimental, but available in Chrome, Edge and Opera.)</p>
<h2 id="text-wrap%3A-balance%3B">text-wrap: balance; <a class="direct-link" href="#text-wrap%3A-balance%3B">#</a></h2>
<p>There is a limit on the number of lines that <code>text-wrap: balance;</code> will apply to <em>but</em> it is dependent on how many lines there are based on the width of your text. <code>Balance</code> will only apply to less than six lines.</p>
<p>In the demo below, if you open the code on Codepen in a supported browser, remove <code>text-wrap</code> while the width is 300px, you'll see <code>text-wrap</code> has no effect. If you change the width to 600px, add <code>text-wrap: balance;</code> back to the CSS - you'll see it does have an effect.</p>

<p>With <code>text-wrap: balance;</code>, because there's a limit to how many lines the browser will wrap, this should only be used on headlines, headings, and subheadings. Applying it to large paragraphs will have no effect and comes at a performance cost because the browser is trying to calculate optimal balance even though it won't apply anything.</p>
<p><img src="/img/2023/text-wrap/balance.png" alt="alt: A comparison of a heading with text-wrap balance applied vs not applied. One heading is optically balanced. The other is not with two short words that wrap to the second line of the heading. "></p>
<p>The example above shows a comparison of a headline without balance applied and a headline with it applied. The first example doesn't look balanced, whereas the second one does.</p>
<h2 id="text-wrap%3A-pretty%3B">text-wrap: pretty; <a class="direct-link" href="#text-wrap%3A-pretty%3B">#</a></h2>
<p>Text wrap <code>pretty</code> is the opposite of <code>balance</code> and can be used on entire blocks of text but you're only really going to see a difference on the last four lines of text. It's primary use is to prevent orphans - or one word - on their own line.</p>
<p>The browser makes calculations to make adjustments for you. "To balance between the typographic benefits and the performance impacts, it adjusts the last 4 lines of paragraphs that meet certain conditions." <a href="https://chromestatus.com/feature/5145771917180928">Chrome Platform Status</a>.</p>
<p>The differences are subtle when <code>text-wrap: pretty;</code> is applied.</p>
<p><img src="/img/2023/text-wrap/pretty.png" alt="alt: A comparison of paragraphs of text. One has text-wrap pretty applied to it and one does not. The one with text-wrap pretty has two words on the last line and the one without only has one word on the last line, an orphan.">.</p>
<p>In the image above, the paragraph on the left does not have <code>pretty</code> applied and there is one word on the last line. In the paragraph on the right, with <code>text-wrap: pretty;</code> applied, there are two words on the last line and you can see the slight adjustments to the last three lines to make that second word wrap.</p>
<p>Very subtle, but it provides a solution to avoid any hacks around trying to get rid of those orphan words that visually look out of place on their own line.</p>
<p>Support for <code>pretty</code> is again quite sparse, with only Chromium browser support. Hopefully Firefox and Safari will ship these to help improve typography on the web.</p>
<h2 id="balance-and-pretty">Balance and Pretty <a class="direct-link" href="#balance-and-pretty">#</a></h2>
<p>Use <code>text-wrap: balance;</code> on headings and subheadings. And use <code>text-wrap: pretty;</code> on paragraphs of text to get rid of orphans on the last line. Despite the Chromium-only support, these would be a good candidate for progressive enhancement. It won't negatively affect the experience if someone is not in a supported browser, but it will some visual balance to the page for those in a browser where supported.</p>
<p>Here's the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap">link out to MDN for text-wrap</a>.</p>