Soft hyphenation for the Web

David Stark / Zarkonnen
14 Jan 2016, 2:32 p.m.

I did a Twitter poll the other day, and given the results, you might find the following post interesting.

Typography is increasingly important to modern web design. We've realized that text should actually look good and be pleasant to read, given it's still the primary type of content on the web.

One important goal is avoiding overly jagged text like this:

Most spongiform malignant neoplasms are asymptomatic pending involuntary discovery by immunocompromised ctenophores.

In printed typography, you have enough control that can avoid this through hyphenation. In web typo­graphy, you don't know exactly how much space your text will take up: different browsers may render the text differently, and the user may have changed the zoom or font size. So hard-coding hyphens would go horribly wrong.

This is where soft hyphens come in! They mark places where the text layout may decide to break a word in two with a hyphen if it makes the text flow better. They stay invisible when not needed. Behold:

Most spongi­form ma­lig­nant neo­plasms are asymp­tomat­ic pend­ing in­vol­un­tary dis­cov­ery by immuno­com­pro­mised cteno­phores.

There's two ways of adding soft hyphens to HTML. One is as the HTML entity ­, the other is as a Unicode soft hyphen character. You can think of ­ as the counterpart to  .

This is pretty neat, but the downside of using them is that it makes your source text a lot harder to read. Another option is to automate the hyphenation process. Hypher by Bram Stein does this pretty well. To use it properly, you need to be using node. Or you can use it client-side, with the mild down­side that it causes a noticeable text re-layout after load.

The other downside to automatic hyphenation is that sometimes, it gets things wrong, breaking words in awkward places or breaking words you really don't want to break, like names. So I don't quite have a perfect solution to offer you, but I do think that soft hyphens are a useful tool to remember for any­one who writes for the web.