A couple of weeks back, PPK posted about the sudden emergence of CSS hyphenation support in several browsers (which got picked up by WebMonkey, the lucky dog). At the time, there was some confusion about whether a
lang attribute it required to allow the hyphenation to happen — PPK said it did, but my testing indicated the opposite.
Well, it turned out that at the moment I did that test, I was running Firefox 16, and FF16 apparently honored the
-moz-hyphens property with nary
lang a attribute in sight. We might ask how that’s supposed to work, since hyphenation dictionaries are language-dependent, but never mind: it did. Firefox 17, on the other hand, requires a
lang attribute value in order to apply
hyphens (note the lack of prefix).
I haven’t gone running down the behavior of other browsers, because the upshot is this: if you want hyphenation to work in a future-friendly way, you need a
lang attribute. What older versions do will become of fading relevance.
All of which raises a fairly important question: should you enable hyphenation?
After all, hyphenation, I am told, was invented to increase the density of text and reduce the number of column inches needed in printed media, where paper can be expensive and space at a premium. Hyphenation, in other words, was devised as a trick to let authors be a little bit more wordy. (Also as a way to help reduce interword spacing in fully justified text.)
On the web, of course, we have no physical length constraints: The Web Ain’t Print. We can run on as long as we like, limited only by our thesaurus, our RSI flare-ups, and the attention span of our readers.
But wait…that’s all true for the desktop web. We have lovely big monitors and easily resizeable windows and zoomable text. On mobile devices, however, the real estate is much more limited. We still have infinite length, yes, but line lengths tend to be a lot shorter on iPhone or Android — particularly if you’ve given your mobile users a nicely readble font size.
Right after PPK’s article hit my aggregator, I turned on hyphenation here on meyerweb. For desktop reading, at first it caught my eye a bit, but now I don’t see it at all. Years and years of print reading has made it seem familiar. Things would be just fine without the hyphens, of course. But when reading pages on mobile, the hyphens feel useful. They give me a little bit more reading for each “screenful”, and just feel comfortable.
Thus my recommendation of the moment: if you’re going to use CSS hyphenation, turn it on for mobile contexts. For desktop — well, that’s a much murkier call. It may well depend on your font family, layout, default language, and so on. If you do turn them on, just make sure you have that
lang attribute (I put mine on the
html element) so your hyphens will persist.