Kevin Yank (Sitepoint.com) wrote an interesting lesser known feature of Firefox3. I archive it here for my own documentation. The original article is here.

Tucked away in the list of CSS improvements in Firefox 3 is this innocuous-looking feature: “HTML soft hyphens (­) are now supported.”

Soft hyphens are one of those obscure gems that HTML has always supported on paper, but that no one has taken any notice of because browser support has been spotty. With the imminent release of Firefox 3, however, soft hyphens will be supported by all major browsers including Internet Explorer, Safari, and Opera.

So, what is a soft hyphen, anyway?

A soft hyphen is a character of text that is usually invisible. It signals a spot in the text (usually in the middle of a long word) where it would be acceptable to break the line with a hyphen.

When a browser that supports soft hyphens encounters a long word or other long piece of text with no obvious wrap point that doesn’t fit horizontally inside a block on the page, it will look for a soft hyphen within the text and display it as a normal hyphen followed by a line break.

Take a look at this code sample:

<div style="width: 10em; border: 1px solid

red;">

  Supercalifragilisticexpialidocious

</div>

Display this in any browser, and the long word will protrude from the side of the div.

This situation arises all the time in real-world web design. Say you’ve got a navigation menu that occupies 25% of the width of the page. At small enough browser window sizes, a particularly long word in one of your menu items will either protrude messily from your menu into another part of the page, or force the menu to increase its width, possibly breaking your page layout.

Soft hyphens to the rescue!

<div style="width: 10em; border: 1px solid

red;">

  Supercalifragilistic­expialidocious

</div>

Firefox 3 will be the last major browser to add support for soft hyphens, but you don’t have to wait for it to be released to start using them! Firefox 2 simply ignores the character, leaving it invisible (and leaving your text protruding from its box). Not bad as a fallback, especially compared to Safari, which used to display it as a normal hyphen! Thankfully, Safari 2 or later gets it right.

If you do decide to use actual soft hyphen characters in your code, make sure you know your character encodings, because unlike most Latin-1 characters, soft hyphens are encoded differently in UTF-8, so you need to save your code with the right encoding for the soft hyphens to work.