New CSS feature enables even text distribution across lines.
Typography on the web is leveling up. New to Safari Technology Preview 183 is text-wrap: balance.
Up until now, Webkit has only supported two options for
text-wrap:
wrap and nowrap.
With the introduction of the text-wrap-style property (shorthand: text-wrap), there is now a way for the browser to balance text across multiple lines. Balanced text is quicker and easier to read than unbalanced text and is thus desirable to many designers. Previous methods of balancing text include forcing line breaks with <br>, which is not suitable for the responsive playground of the web.
text-wrap: balance prioritizes aesthetics and readability over performance speed to evenly distribute text across lines. Algorithmically, this feature minimizes the average difference in line lengths across the text block.
Line length differences shown between different text-wrap styles.
Take a look at the following heading with text-wrap: wrap.
Visually, it feels off. And the orphaned word reduces readability.
Now take a look at this heading with text-wrap: balance.
Much better, right? Plus, the balancing work is offloaded to the browser, so it remains responsive across all screen sizes.
Demonstrating dynamic text-wrap balancing.
Because of the extensive processing required to balance lines, text-wrap: balance is best used for headings and titles, not long bodies of text. In fact, when balance is used on a body of text longer than 10 lines, it instead defaults to the text-wrap: wrap behavior to prioritize performance speed.
To apply balanced text-wrapping, include the text-wrap-style (or shorthand text-wrap) property with the value balance in your declaration block.
Example CSS of applying text-wrap: balance to h1 selector.
Or, try it out on codepen:
As of now, the
browser support
for text-wrap: balance includes:
We hope this blog helps you navigate the ever-evolving world of web technologies. Got a topic you'd like us to cover? Reach out to us at anishalatchman@gmail.com.