Text wrapping can be pretty unpredictable, especially on smaller screen sizes. Words might be left hanging on the last line, which severely impacts readability and results in some awkward page layouts if left as is. Try showing a headline screenshot like below to a designer, and they will tell you something is off! ;)
At the core is the need to add some sort of x-padding to the h1 text. However, we want it to be dynamic so that it only affects the longer line when the shorter line is too short. This is a problem big enough that Adobe created a jQuery plugin to address this issue. However, performance issues left a lot to be desired.
Later on, The New York Times made their attempt to resolve this issue once and for all, with what eventually became their text-balancer package.
The latest entry in this space is React Wrap Balancer, which works with React 18 and also includes a Provider wrapper to allow code sharing between multiple balancing components across your app.
Using this, headlines look a lot more balanced, don't you think?
There is now also a proposed CSS property called text-wrap which will give developers a JS-free way to control balancing, directly in CSS! Until that is finalized, happy balancing!
Top comments (0)