Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Unjustifiable

Text justification on the web is really hideous. Browsers choose to naively cram as much as they can on each line, but this greedy algorithm leaves "loose" lines of text, with great gaping holes.

For hundreds of years, well-justified text was considered masterful and beautiful; only in the era of the browser have designers turned their back on it -- and with good reason. On a browser, justified text is ugly.

Was ugly.

With unjustifiable, text can look like this: Example

Note the dangling punctuation, and that text can change styles inline -- bold words are wider, but the text is still properly aligned. Floats and other incursions to the text are also supported.

See my blog for a live example.

Unjustifiable works best when paired with a hyphenating function; I recommend Hypher (that's what I use.)

Unjustifiable works beautifully on Chrome and safai, and well enough on Firefox, and Edge. It will leave a slightly ragged right on some mobile browsers, and it's up to you to decide what to do about that.

Installation

yarn add unjustifiable

Usage

const justify = unjustifiable();
const elements = document.querySelectorAll(".content p");
elements.forEach(justify);

Options

The unjustifiable function takes an optional options object. Defaults are shown below:

const options = {
  stretch: 15,
  shrink: -1,
  overhang: 20,
  hyphenPenalty: 1000,
  hyphenator: function(w) {
    // Returns an array of hyphenatable syllables
    return [w];
  },
};
const justify = unjustifiable(options);

hyphenator

To use Hypher for the hyphenator, install Hypher, and then:

const hyph = new Hypher(en_us);
const justify = unjustifiable({
  hyphenator: function(w) { return hyph.hyphenate(w); }
});

stretch

A measure of the default ability for a space to stretch wider, in px.

shrink

A measure of the default ability for a space to shrink smaller, in px.

overhang

The amount of space, in px, left for punctuation to dangle attractively over the margins. It's usually best to style your textblocks with

p {
  margin-right: -20px;
  margin-left: -20px;
}

(or whatever the overhang is) to ensure that the justified line of the text appears where you expect, and the hanging punctuation... hangs.

HyphenPenalty

The bigger this number is, the less likely Unjustifible is to break a line mid-word.

Internally

It's a dynamic programming algorithm, like Knuth and Plass, but it's faster than Knuth and Plass. The speed increase comes by accepting suboptimal results for one part of its cost function: the difference in compression between a line and the succeeding line.

About

Text justification, for the web, fast, good, and cheap.

Resources

License

Packages

No packages published