Soft-hyphens and inline-block; Subtleties in Firefox 3 RC 1
Date : 2008 05 23 Category : Tech & Development
AjaxianKevin Yank has zoomed into the features in the new Firefox 3 RC 1, and explained two subtle ones that can help us as Web developers:
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.
Here you see it at work:
Inline Blocks
Another obscure-but-useful new feature making its way into Firefox 3 after all the other major browsers support it (mostly) is the inline block. When assigned to an element, a display type of inline-block causes the element to be positioned inline (like a span), but the element’s contents are laid out as if the element were a block.
This feature will come in handy in a number of situations in which the float property is currently being used for lack of a better option.
PLAIN TEXT HTML:<ul class="gallery"> <li> <div class="caption">A short caption</div> <div class="thumb"><img src="thumb1.jpg"/></div> </li><li> <div class="caption">A short caption</div> <div class="thumb"><img src="thumb2.jpg"/></div> </li><li> … </li></ul>
The code above gives you:
See it in action.