Friday, May 23rd, 2008

Soft-hyphens and inline-block; Subtleties in Firefox 3 RC 1

Category: Browsers, Firefox

Kevin 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:

Soft Hyphens

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.

  1. <ul class="gallery">
  2.   <li>
  3.     <div class="caption">A short caption</div>
  4.     <div class="thumb"><img src="thumb1.jpg"/></div>
  5.   </li><li>
  6.     <div class="caption">A short caption</div>
  7.     <div class="thumb"><img src="thumb2.jpg"/></div>
  8.   </li><li>
  9.   …
  10. </li></ul>

The code above gives you:

See it in action.

Posted by Dion Almaer at 4:30 am

4.4 rating from 26 votes


Comments feed TrackBack URI

Long awaited inline-block. If FF2 would support it properly then by now we wouldn’t need to hack layouts with floats.. eh :)

Comment by medikoo — May 23, 2008

Soft hyphens are not supported in table cells in Firefox 3.

Comment by Jeria — May 23, 2008

We can finally get rid of the exotic -moz-inline-box :)
Can’t wait the final version of FF3

Comment by Marin — May 23, 2008

Finally our websites look normal now in Firefox 3 because of inline-block.

Comment by Jordan1 — May 23, 2008


Comment by polterguy — May 24, 2008

Leave a comment

You must be logged in to post a comment.