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
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.
1 2 3 4 5 6
<div style="border: 1px solid #000; width: 15em; display: inline-block;"> an­tidis­es­tab­lish­ment </div> <div style="border: 1px solid #000; width: 3em; display: inline-block;"> an­tidis­es­tab­lish­ment </div>
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
­ 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|
You might also be interested how search engines handle this.
suggests that at least google doesn’t have any problem with the
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. ↩