Ending the lonely-word problem in React headings
Headings and titles carry a lot of weight on a webpage, but their readability often suffers from a common typographic flaw: a single orphaned word dangling on the final line. React Wrap Balancer tackles this by shrinking the content wrapper to the narrowest width possible before forcing an extra line break, keeping lines balanced and legible even in lengthy text blocks.
What came before
Balanced text isn't a new idea. Adobe's balance-text project (2012) used jQuery for an imperative DOM API, and the New York Times later released text-balancer with more advanced features. Both laid groundwork but suffered from layout shifts. The CSS Working Group has also proposed text-wrap: balance, which would bring the feature natively to CSS.
React Wrap Balancer improves on these efforts with an efficient algorithm and optimizations built for React and Next.js. The <Balancer> component works in both client-side components and React Server Components, with minimal JavaScript shipped to the browser in the latter case.
How the algorithm works
The core innovation is a binary search approach. Starting from zero and the full wrapper width, the algorithm repeatedly halves the width until the element's height increases, signaling an unexpected line break. It then narrows in on the exact breakpoint. For a 4k-wide wrapper (approximately 3840px), this takes just 12 iterations. When processing fewer than 100 strings, each render completes in as little as a quarter of a millisecond.
Preventing layout shift
Visual stability matters, so React Wrap Balancer runs immediately when the element renders. For client-side rendering, it leverages React's useLayoutEffect hook for synchronous execution.
Server-side rendered apps present a different challenge: unhydrated HTML loads before React runs. The solution is an inlined <script> tag placed next to the title element, executing the balancer the moment the title appears on screen.
When the window resizes or the wrapper dimensions change dynamically, the component uses the ResizeObserver API to maintain balanced text in real time.
Ports and usage
The Svelte community has already announced a port of React Wrap Balancer. While it still needs refinement for full SSR support, developers can experiment with the source code on the Svelte REPL today.
React Wrap Balancer is also designed to integrate with the Next.js 13 app directory, React Server Components, and Streaming SSR out of the box.
Getting started
Setting up is straightforward:
npx create-next-app@latestnpm i react-wrap-balancer
Then use the <Balancer> component in any heading or title, or wrap the entire app with an imported <Provider> to share wrapping logic across all balancer instances. Best results come from watching the text reflow as the browser window changes size.
