Automatic Wrap Balancing for Headlines
Long headlines tend to wrap at different points depending on the width available for it. There are many different screen sizes.
On some devices, the headline might have a one-word line at the end. On others, the text wrapping may be aesthetically pleasing with nearly equal line lengths.
I'll publish a few headline examples here. Because I don't know how wide your screen is, I don't know where the line breaks will be. The intent is to demonstrate at least one headline ending with a short word.
One Two Three Four Five
One Two Three Four Five Six
One Two Three Four Five Six Seven
One Two Three Four Five Six Seven Eight
One Two Three Four Five Six Seven Eight Nine
Now, let's balance those line lengths with the CSS text-wrap:balance; declaration. That particular CSS declaration will try to balance the lines by counting the characters in each line and breaking the line between words for the most balanced result.
One Two Three Four Five
One Two Three Four Five Six
One Two Three Four Five Six Seven
One Two Three Four Five Six Seven Eight
One Two Three Four Five Six Seven Eight Nine
The CSS text-wrap property is available with most of the latest browsers. If you are using an older browser, this CSS might have no effect.
Doing the line length calculations is computationally expensive. In other words, it requires the browser to make a lot of calculations. text-wrap:balance; is supported for blocks of text spanning a limited number of lines. Firefox limits it to 10 lines. Other browsers are likely to have their own limits. Therefore, use it with headlines but not with regular text.
If you put text-wrap:balance; into the sitewide stylesheet for each of the HTML headline tags, any headlines in your entire site should suddenly become more balanced. That is, unless you tend to manually insert linebreaks into headlines.
Test text-wrap:balance; and see how well it does or does not balance headlines for you.
(This content first appeared in Possibilities newsletter.)
Will Bontrager
