Quirks Blog: CSS Hyphenation At Last
With a background in print typography, I’ve always yearned for true automatic hyphenation on the web. I once started writing some PHP code to do it, in fact, but it turned into a much bigger project than I had time for. It quickly became clear that the only way to do hyphenation right was to develop a hyphenation dictionary with a whole lot of special cases.
And that’s exactly what the latest CSS hyphenation styles do, in IE10, Safari, and Firefox (not Chrome yet) — they use a hyphenation dictionary to produce really good automatic hyphenation, resulting in that extra bit of readability we type nerds strive for. Here’s designer Peter-Paul Koch’s post on it: Hyphenation Works! - QuirksBlog.
Yesterday I found that proper hyphenation of text is now supported by Firefox, IE10, and Safari. So I added it to my main style sheet and it should work in these browsers across my site. I also advise you to add it to your sites straight away.
The code:
-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto;
I added these styles to our P and H2 tags, so the titles and text of our posts are hyphenated.
Koch mentions that you need to specify a language to make this work, although in Safari at least it seems to default to English. The easiest way to do that it is to add it to your <html> tag, like this:
<html lang="en">
Frank says: