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 tag, like this: