A library implementing balancing of text across lines in a web page
npm install balance-textA 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.
``html
`
See the demo provided or this online version for a working sample.
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:
`javascript`
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 formatting once. If you'd like to re-apply automatically during window resize, you can use pass an options parameter instead:
`javascript`
balanceText(el, {watch: true});
If you need to manually re-balance all triggered elements, use:
`javascript`
balanceText.updateWatched();
You can also migrate to balanceText() from jQuery using this guide (shown compared to the 2.0.0 interface):`javascript
// 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();
`
//cdn.jsdelivr.net/npm/balance-text@3.3.1/balancetext.min.js
//cdnjs.cloudflare.com/ajax/libs/balance-text/3.2.1/balancetext.min.js
//cdn.jsdelivr.net/npm/balance-text@3.2.1/balancetext.min.js
//cdnjs.cloudflare.com/ajax/libs/balance-text/2.0.0/jquery.balancetext.min.js
//cdn.jsdelivr.net/jquery.balancetext/2.0.0/jquery.balancetext.min.js
`
npm run lint
`
npm run build
1. Pull Request:
* Add a test
* Update version numbers: package.json, bower.json
* Update minifed version, if necessary: balancetext.min.js
* Update README.md, including links to new not-yet-created CDNs
1. Create new github Release
* cloudflare CDN is automatically created
1. Update npm
* npm publish (may need to npm adduser`)
* jsdeliver CDN is automatically created
1. Update vanity page: gh-pages branch
Contributions are welcomed! Read the Contributing Guide for more information.