Enhance Text Readability with Balance Text JavaScript Library

Balance Text is a tiny JavaScript utility that creates even text distribution across multiple lines. It handles text balancing in browsers that don’t support the native text-wrap: balance CSS property.

This library automatically adjusts text distribution to create visually balanced line lengths. This makes text blocks more readable and aesthetically pleasing, particularly useful for headings, titles, and short text blocks in web applications.

See It In Action:

How To Use It:

1. Install the Balance Text package using npm:

# NPM
$ npm install @activetheory/balance-text

2. Import it in your project:

import balanceText from '@activetheory/balance-text';
// OR
import balanceText from './src/index.js';

3. Apply Balance Text to a specific text container:

<div class="el">Your Text Here</div>

const el = document.querySelector('.el');
const result = balanceText({
  el, // The DOM element containing the text you want to balance.
  // options here
});

4. Available configuration parameters:

• ratio: (Default: 1) A numeric value that adjusts the width of the balanced text relative to its container. A ratio of 1 means the text will occupy the maximum width required to balance the lines, a ratio less than 1 will create a narrower width, and a ratio greater than 1 will make it wider.
• useParent: (Default: false) A boolean value that specifies if the width calculation will reference the width of the parent element instead of the element itself.
• debug: (Default: false) A boolean value that, when set to true, logs a warning message if the browser supports the text-wrap: balance property.

const result = balanceText({
  el,
  ratio: 1,
  useParent: true,
  debug: true,
});

How It Works

The Balance Text library starts by checking if the browser supports the text-wrap: balance CSS property. If so, and if the relevant element has this property already set, the library will do nothing, and it will output a warning message in the console if debug is set to true.

This prevents redundant calculations and conserves resources. If support is not detected, or the property is not set, the library proceeds to calculate the balanced text width.

It starts by resetting any existing maxWidth on the element to prevent conflicts. Then it gets the initial width and height of the text container, then it performs a binary search algorithm. This search finds the optimal maxWidth value for the text, aiming for a balanced layout.

During this process, the library adjusts the maxWidth of the text element and checks if the element’s height remains the same, meaning the text is wrapped on a balanced number of lines. It keeps iterating until it finds the optimal width or a maximum iteration is reached.

Finally, it applies the maxWidth to the text based on the determined ratio. This approach makes sure that text is displayed in a way that’s visually balanced, regardless of the underlying browser capabilities.

See Also:

• jQuery Plugin To Balance The Remaining (Empty) Space In Text – BalanceText