da/text-balancer
1
9
Fork 2
Code Issues 1 Pull requests Projects Releases Wiki Activity
A fast text wrap balancer for multi-line headlines on the web. https://www.ctrl.blog/entry/text-wrap-balance.html
4 commits 1 branch 0 tags 145 KiB
Find a file
Daniel Aleksandersen 0bca748636 Documentation
2021-09-08 05:06:38 +02:00
.mailmap Add mailmap 2021-09-08 05:02:37 +02:00
boilerplate.html Documentation 2021-09-08 05:06:38 +02:00
LICENSE Initial commit 2021-09-08 03:25:11 +02:00
README.md Documentation 2021-09-08 05:06:38 +02:00
text-balancer.js Initial (re-)implementation 2021-09-08 05:02:37 +02:00

README.md

Text Balancer

A fast text wrap balancer for multi-line headlines on the web. Wraps texts more evenly across lines. Reduces uneven line lengths.

Rebalances texts on device orientation changes or when the window or element is resized.

Intended as a fallback for web browsers that don’t yet support the text-wrap: balance CSS property. (No browsers support this property as of September 2021.)

Based on the Text Balancer module by ©2016–2017 New York Times Company. Differences between this implementation and the original are documented in this companion article.

Usage

Minimum

  1. Apply a balance-text class to your headline elements.
  2. Make sure headlines are wrapped in a parent element that specifies the desired max-width. (You can’t set this on the headline element itself.)
  3. Load text-balancer.js.

Recommended

See the boilerplate.html file. It has some advantages like hiding the flash of unstyled content (FOUC) that may briefly show unbalanced text.