Advanced web typography: Justification & hyphenation
Posted on 09 April 2014
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.)
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.