View on GitHub

BalanceText

A plugin for balancing wrapping text in a web page

Download this project as a .zip file Download this project as a tar.gz file

BalanceText

A utility to provide an alternate text wrapping algorithm. I hope to get this into the CSS spec, so it's implemented as an optional "polyfill". It already appears in the CSS Text Module Level 4 Editor's Draft.

The default text rendering algorithm is:

  1. Add 1 word at a time to the current line until the next word won't fit.
  2. Break text so that the next word starts on a new line.
  3. Repeat until all text has been rendered.

That algorithm guarantees that the text is rendered using the least number of lines, but when text is centered and wraps to more than 1 line, it can produce visually undesirable results such as a long line of centered text followed by a short line of centered text. What I want is for the text to be balanced across lines. By "balanced across lines", I mean that the text is rendered so that the amount of text on each line is about the same. This plugin implements a line-breaking algorithm to do that automatically.

How it works

Here is a simple Balance Text setup:

    <style type="text/css">
    /* Plugin looks for elements with class named "balance-text" */
    .balance-text {
        text-wrap: balance;   /* Apply (proposed) CSS style */
    }
    </style>

    <script src="balancetext.min.js"></script>
    <script>
      balanceText();
    </script>

See the demo provided for a working sample.

If you call balanceText(), Balance Text will automatically run on any elements with balance-text class:

You may also manually trigger it, e.g. if you're dynamically adding text to the DOM:

    balanceText(el);       // Balance single element
    balanceText([el, el]); // Balance list of elements
    balanceText('.el');    // Balance list based on query selector

This will apply the balance-text formatting once. If you'd like to re-apply automatically during window resize, you can use pass an options parameter instead:

    balanceText(el, {watch: true});

If you need to manually re-balance all triggered elements, use:

    balanceText.updateWatched();

How to use with jQuery

This library used to be implemented as a jQuery plugin (as of v2.0.0) but was re-written as a native utility (as of 3.0.0). If you'd like to continue using the jQuery interface, you can continue using 2.0.0 (link below).

You can also migrate to balanceText() from jQuery using this guide (shown compared to the 2.0.0 interface):

    // Put the balanceText utility into "polyfill" mode
    // This was the default mode of the 2.0.0 jQuery plugin when it loaded
    $.ready(function() {
        balanceText(); 
    });

    // manually trigger on a list of elements
    balanceText($('.my-class')); // equivalent to $('.my-class').balanceText();

    // manually trigger on a list of elements and update on browser resize
    balanceText($('.my-class'), {watch: true}); // equivalent to $.balanceText('.my-class');

    // manually re-balance all triggered elements
    balanceText.updateWatched(); // equivalent to $.fn.balanceTextUpdate();

Use from a CDN

Legacy (3.2.1)

Support for Internet Explorer was dropped in v3.3.0, so use v3.2.1 for IE support.

Legacy (2.0.0)

Has a hard requirement on JQuery

Requirements

BalanceText does not have any dependencies. BalanceText is designed to run in most modern browsers.

Development

Linting

Make sure the code passes ESLint:

    npm run lint

Minification

We minify using Uglify-JS:

    npm run build

Changelog