I’ve been re-reading Waiter Rant the last couple of days, and noticed something cool in one of his posts — some of the words at ends of lines were hyphenated. Justified text can cause large amounts of space between words; one way of reducing this is to break long words that fall at a line boundary between syllables so they fit better. So I fired up the Web Inspector, and sure enough, there was a -webkit-hyphens property on <p> tags that I hadn’t known about.

In print, hyphenation is not uncommon. On the web, it’s quite rare, because you never know exactly how a user agent will render text, or whether the user has resized the window, and up until recently, there was no way to automatically insert the hyphens where they belong.

So, I thought, “This looks cool, let me try it on my site,” looked up the syntax, added it to my stylesheet, took a look at one of my posts, and immediately decided it was a distraction.

It did even up the right margins somewhat, but I also found my eye sticking at the hyphenated words, and pausing there, in a way I don’t remember doing in print. Either the browser was applying hyphenation a lot more than a typesetter would (there were three or four hyphens added to my Thoughts on the Bombing post) or it’s a lot more intrusive on screen than it is on the page. Either way, it was taking me out of the post, and I immediately backed the change out.

For the curious, here are the styles I briefly added:

hyphens:auto; /* CSS3 standard */
-webkit-hyphens:auto; /* Target Webkit */
-webkit-hyphenate-character:"\2010";
-webkit-hyphenate-limit-after:1; /* rules to try to minimize widows and orphans */
-webkit-hyphenate-limit-before:3;
-moz-hyphens:auto; /* target Mozilla */


It was a lesson — cool new toys should always be tried, but they also should always be evaluated for suitability.