2009-07-19 11:09

I just recently learned that soft hyphens are now usable and effective in HTML markup, as they are finally supported in a sensible way by most modern browsers. (Pity Jukka Korpela, author of the preceding link: he has been writing that document for twelve years.) The soft hyphen — which has the entity code ­ or ­ or ­ — can be interpreted as a hyphenation hint, letting the browser or rendering engine know where are the ideal places to break up a long word, leaving a hyphen behind, should it encroach on the margin. The soft hyphen is not displayed if the word is not broken upon rendering.

I have tested the below and verified that it works as intended in Safari 3 and 4 on a Mac; IE 5, 6, 7, and 8 on Windows; and Firefox 3.0 and 3.5 anywhere. (Firefox 2.0 ignores soft hyphens.) Opera on Vista and OS X render perfectly, according to readers.

This is a test of how various browsers handle soft hyphens. Here are a few long, or long­ish, words that should help us see how things go when one of them gets near a margin: asyn­chron­ous uni­later­al un­pre­medi­tated guber­na­torial ante­delu­vian http://­recov­er­ing­phys­i­cist­.com ex­acer­bat­ed on­o­ma­to­poe­ic ex­has­perat­ed re­barb­a­tive per­hel­ion ante­delu­vian asyn­chron­ous ex­acer­bat­ed ex­has­perat­ed guber­na­torial on­o­ma­to­poe­ic per­hel­ion re­barb­a­tive un­pre­medi­tated uni­later­al.

This discussion on Reddit contains lots of detail about the behavior in other browsers and operating systems.

As a Reddit commenter pointed out, a disadvantage of using soft hyphens is that what gets copied onto a clipboard from the rendered text is unpredictable. You might expect that if you mark and copy the text above, then paste it into a text editor, you would see hyphens in those words that happen to break at the margin. On the Mac using Safari 4, all the soft hyphens in the source come through the clipboard as regular hyphens. It’s reported that using Safari 4 on Windows results in spaces where the soft hyphens were.

Another problem: a word containing a soft hyphen may not be found by searching on the page from within the browser. For example, in order to find the word “exacerbated” on this page (in the example block above), I found “ex acer bat ed” to be the string that worked.