I’m probably about as biased as it’s possible to be, but in the last issue of my magazine 8 Faces, my Typekit colleague Bram Stein wrote a fantastic piece about justification and hyphenation. And, like the intricacies of kerning, there’s an air of mystery about implementing justification and hyphenation in web type, so I’m going to attempt to distill Bram’s knowledge into this blog post. (The image above is also from the same piece.)

Justification

There are two major justification algorithms we come into contact with regularly: the Greedy algorithm that analyses only one line, and the far more advanced Knuth / Plass algorithm that looks at all lines in a paragraph, and which is used in advanced typesetting applications such as InDesign. Now, guess which one we have in browsers, ladies and gents? That’s right: the crap one.

So what does this mean? We can use justification now (and we’ve been able to for years), but the results are pretty poor. The CSS3 spec introduced text-justify , which allows us to control some aspects of justification, but it doesn’t specify which algorithm to use, which means that it’s in the hands of the browser vendors. Implementing the Knuth / Plass algorithm involves taking a performance hit, so unsurprisingly the browsers have stuck with ol’ faithful: Greedy. Good justification has no support outside — can you believe it? — Internet Explorer, which seems to use the Knuth / Plass algorithm, or an approximation of it, enabled through the text-justify: newspaper CSS property.

Some Javascript-based alternative solutions exist that attempt to partially plug the hole, however: one is Typeset (created by Bram), which implements the Knuth / Plass algorithm. It’s more of an experiment and has a number of issues, but it’s worth checking out as a work-in-progress and proof-of-concept.

Hyphenation

As anyone who’s ever attempted to set lengthy text can attest, using justification without hyphenation is virtually impossible. No matter how clever your algorithm or human typesetter, you’ll eventually have to use a hyphen. Surprisingly, hyphenation support in browsers is more widespread, although it’s not supported at all in Chrome. For Chrome and older browsers, you’d do well to turn to JavaScript solutions such as Hyphenator.js and Bram’s own Hypher.

Conclusion

To summarise: we can hyphenate pretty well, but justification still has a way to go, so I’m afraid to say that we’re not going to be using them together the way we do in print any time soon. We have Javascript polyfills for both, but keep in mind the performance trade-offs before you typeset War & Peace on the web.