Balance Text

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.](https://drafts.csswg.org/css-text-4/#text-wrap)

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:

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

  
  
    balanceText();
  

See the demo provided or [this online version for a working sample](https://opensource.adobe.com/balance-text/demo/index.html).

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

• when the page loads (DOM Ready event)
• when it is resized

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

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

This will apply the balance-text