I'm writing a CSS book
JavaScript archives Compatibility CSS coaching Thidrekssaga QuirksBlog Donations Politics Mobile About COH
QuirksMode
PPK sitemapcontact

Hyphenation works!

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;

So far it’s prefixed, and Opera and Chrome don’t support it, but we will be future-friendly and include all variants of this declaration, won’t we?

Hyphenation is cool to have, but nobody will notice its absence, because we’ve lived without it for so long. So we just add the proper declarations and compliant browsers will pick it up.

This is how progressive enhancement should work. Add advanced feature X to site, and if it doesn’t work there’s not really a problem.

Right now I see only two problems with the use of hypens: auto:

  1. The dictionary may not be too good, leading to the incorrect breaking of words. So far I haven’t seen any evidence of that, but I can only really test Dutch hyphenation. English hyphenation is a mystery to me, where you do it right half of the time and wrong the other half. I hope the browsers do it wrong the right half of the time.
  2. You must tell the browser which language to use by a lang attribute. Use the simplest solution and declare it on the html tag, like: 
    <html lang="en">
    I noticed that this attribute does not work on a p: no browser picks up the language. It works fine on a div, though. So if a certain section of a page is in a different language, add the lang attribute to something above a p and test hyphenation properly.

That’s it. It works. Great, isn’t it?

This is the blog of Peter-Paul Koch, web developer, consultant, and trainer. You can also follow him on Twitter or Mastodon.
Atom RSS

If you like this blog, why not donate a little bit of money to help me pay my bills?

Categories: