♻ jus-ti-fied

For those of us who enjoy the readability of justified text, but aren’t satisfied with text-align: justify;, there’s Hyphenator.js. I just installed it on this site, and I’m pleased with the results.

A little reference

Ok, if you didn’t understand that first sentence, here’s some background. When you’re displaying text, you can choose between left flushing and full justification. Left flushing produces even spaces between words and leaves a “ragged right” edge, since a line break is inserted when the last word of a line would push it past the margin. Fully justified text does not have a ragged right, since it tries to achieve a smooth edge on both margins. Justified text is more readable, but left flushing is what most computer applications do by default, perhaps a vestige of its simple implementation.

The reason justification is harder to implement is because lines look bad if all you do is stretch the inter-word spacing. One way around this is finding more places to break a line, so you don’t need to stretch spaces as much. But how do you find more places to break a line? Hyphenation.

While some typesetting programs have algorithms that determine “good” hyphenation points in arbitrary words (LaTeX has this on by default; in Pages and MS Word, it must be activated manually), web browsers are not among them. Browsers have the ability to fully justify text, but don’t compute new hyphenation points, since it hasn’t been standardized yet.

The only way a hyphenation point can be specified within a word in HTML (without actually writing a hyphen, e.g., “well-liked”) is with the ­ (soft hyphen) entity. Modern browsers interpret ­ as “don’t display anything here, but this is a fine place to put a hyphen.” Of course, nobody actually writes ­ at every hyphenation point of every word in text as they write it. That’s insane.

Enter Javascript. Specifically, Hyphenator.js. (I was going to write a script that hyphenated HTML myself, but I’m glad googling saved me a bunch of work.) Given some text on a page, it computes hyphenation points à la TeX, inserts ­ entities in the words, and leaves the display of hyphens to the browser. Beautiful. It’s really customizable, and easy to use.

If you’re lazy, you can just wait for CSS3 to come out, where a standard for hyphenating on user agents might be finalized. I hope this is soon, so everybody who wants type that doesn’t look shitty doesn’t need to install this script (though it is sweet demonstration of the power of Javascript).

Of course, if you’re reading this via a feed reader (like you should be), the Javascript won’t be run and you won’t see any difference.