Soft Hyphens
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:
Supercalifragilisticexpialidocious
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!
Supercalifragilisticexpialidocious
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.
Depending on how you edit your HTML, you may simply want to insert the soft hyphen character itself rather than the HTML character entity reference (). It’ll save a few bytes, and good code editors (jEdit, for example) will display soft hyphens as normal hyphens, so you can see them in your code. Some are even smart enough to ignore soft hyphens when checking your spelling!
You can type a soft hyphen in Windows by holding down the Alt key and then typing either 0173 on the number pad, or the plus key on the number pad followed by 00AD, before releasing Alt. If you can’t remember that (I sure can’t), or if you’re on a Mac, you can find the soft hyphen in the Character Map (the Character Palette in Mac OS X).
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.
Artical from SitePoint. JavaScript & CSS Blog: Stylish Scriptingby Kevin YankTwo Hidden Features New in Firefox 3
No comments:
Post a Comment