When creating my main page I wanted to hyphenate words in some places. This can be especially useful when putting content in narrow, justified columns. Unfortunately this rather rudimentary technique in paper media is rarely seen on the web. Currently the best way to break words on your web page is to literally1 add the soft-hyphen characters to your text. Soft hyphen in html is encoded with a ­ entity.

Fortunately, unlike how some posts dated a few years back describe it, this entity now displays properly in all modern browsers. Properly means that ­ displays a hyphen when there is a need to break a word, but doesn’t display anything when the word fits the line. There are other issues though.

<div style="border: 1px solid #000; width: 15em; display: inline-block;">
<div style="border: 1px solid #000; width: 3em; display: inline-block;">

It’s not perfect though. Beside some text selection and copying quirks that you might notice there’s also a major problem. Some browsers do not handle in-page search correctly. Try searching for “antidisestablishment” on this page.

Two browsers that I’ve tested seem to handle this correctly. All the other not only do not find a word that had hyphen inserted, but don’t even find a word that fits the line if it contains some &shy; entities inside it. I’m going to lay it out in a table including both possible behaviors even though there’s currently no browser that demonstrates partial support for searching for words with soft hyphens.

Finds a word that fits Finds a hyphenated word
Chrome 8
Firefox 3.6
Safari 5
Opera 11
IE 8

You might also be interested how search engines handle this. This post suggests that at least google doesn’t have any problem with the &shy; entity.

  1. Literally doesn’t mean you have to type them in manually. I use patched Text::Hyphen Ruby gem and a Rails block helper to calculate and insert the hyphens for me.