Two Hidden Features New in Firefox 3

Tweet

Firefox 3 Release Candidate 1 was revealed to the world last week, which means the final release is only about a month away. If you haven’t yet checked that your site works smoothly in the new browser, now’s the time!

A few (understandably) angry Linux users aside, the consensus seems to be that Firefox 3 represents a huge leap forward for end-users. The browser is much faster, better looking, and sports some awesome new end-user features over its predecessor.

For us developers, much has been said about the main improvements coming in Firefox 3. Stuff like built-in support for features web applications that work offline with locally cached data, and full-page zoom that makes it easier to design for visually impaired users, are all great to see, but in this post I’m going to take the opportunity to look at a couple of features that could be easily overlooked.

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:

<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&shy;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.

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 (&shy;). 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.

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. Consider, for example, a thumbnail gallery layout based on this HTML code:

<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>
  …
</ul>

Using a technique familiar to many designers, we can lay out the list items (li) in a grid by giving them all a specific width and floating them to the left:

.gallery li {
  float: left;
  width: 100px;
}

The list items are stacked horizontally against the left-hand margin, and when the available page width is consumed, the browser moves the next list item down until there is room for it. This produces the neat grid layout shown here:

a neat grid layout, illustrating how list items are stacked horizontally

Now, that’s all well and good as long as the image captions are all the same length. As soon as we factor in the real-world need for captions of varying lengths, this technique runs into problems:

an image with a longer caption disrupts the layout

As shown, if one of the list items is taller than the others, it can disrupt the grid layout. Since the browser will only move a list item down the page as far as is necessary to find room for it, list items can end up stacking against earlier list items that stick out from the bottom of the row.

To solve this problem while still using floats is messy at best. You could set the clear property on the list item at the start of each row of the grid to force it clear of the preceding list items. Not only is this messy to code, but it assumes you know which list item will start each row. One of the nice features of this grid-like layout is that it automatically arranges the list items into rows based on the available space—which can change in a stretchy page layout.

display: inline-block is what’s needed here. Like floated blocks, inline blocks stack horizontally across the page. Unlike floats, however, inline blocks are neatly arranged into horizontal lines—not stacked wherever they’ll fit.

Here’s what the code looks like:

.gallery li {
  display: inline-block;
  width: 100px;
}
 
/* In an IE-only style sheet */
.gallery li {
  display: inline;
}

The second rule is necessary due to a bug in IE7 and earlier. Setting display: inline-block correctly causes the contents of the list items to behave as if the list items are blocks, but to get the list items to behave as inline elements you must subsequently (and in a different rule) set display: inline. Since doing this would remove the inline-block display mode in other browsers, the second rule must be placed in an IE-only style sheet (or targeted with a CSS hack).

We must also make a slight tweak to the markup. Since the list items will now be treated as inline elements, the whitespace between them will become significant, and add extra space between the list items on the page. This can be avoided simply by getting rid of the whitespace:

<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>
  …
</ul>

And here is the result, with the invisible line boxes shown as dotted outlines:

The list items line up neatly into rows, despite their varying heights

Not bad, eh? The one difference that sticks out is that the list items are aligned against the bottom of each line box, so that their bottom edges line up. This actually works well in this example, since the captions are above the images, but if the captions were below the images it would look pretty ugly.

It turns out this is a feature, not a bug. You can control the alignment of inline blocks within a line using the vertical-align property. Simply set vertical-align: top on your list items, and you can get something like this:

The images with captions below them are neatly aligned so that their tops line up

Try it yourself

As you can see, inline blocks provide a much neater and more flexible alternative to floats in many situations. With Firefox 3 likely to see rapid uptake amongst existing Firefox users, and with the other major browsers all having decent support for display: inline-block, you’ll be able to use techniques like this in production in just a few months’ time!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Martin Hassman

    It sounds cool. But the link “Try it yourself” for the last example doesn’t work.

  • http://www.tyssendesign.com.au Tyssen

    The link to your inline-block example is broken.

  • http://www.sitepoint.com/ Kevin Yank

    Fixed, thanks Tyssen.

  • locomotivate

    Thanks for the heads up. Soft hyphen support is great.

  • mactheweb

    You mention adding an IE specific stylesheet for older versions, state that older versions of Firefox also don’t support inline-block. Seems like more than an IE conditional is called for. Couldn’t you simply stack the two statements like this:

    display: block;
    display inline-block;

    Older browsers would ignore the declaration they don’t understand and new ones should give precedence to the later rule.

  • http://www.sitepoint.com/ Kevin Yank

    mactheweb,

    Yup, if you prefer the fallback rendering for browsers that don’t support inline-block to be block rather than the default for li elements, list-item, then that would certainly do the trick.

  • EP

    Very Useful

  • madr

    About time! let’s see how long the Inline-block will survive this time (was part of Firefox before, but was removed).

  • barrybloye

    Thank you! Inline-blocks are going to be so useful with cross-browser support. Abusing floats gets messy and tiresome.

  • Anonymous

    They’re not hidden features, exactly; they are, as you say, listed in the ‘CSS Improvements…’ document.

  • http://thatNorwegianGuy.com/ thatNorwegianGuy

    I’m pretty sure you also use
    display: -moz-inline-box;
    for older Firefoxes.

  • RichardDavies

    Since the list items will now be treated as inline elements, the whitespace between them will become significant, and add extra space between the list items on the page. This can be avoided simply by getting rid of the whitespace.

    I recently encountered this exact problem and found a solution that doesn’t require you to remove the whitespace between the list elements:


    .gallery {
    word-spacing: -1em;
    }

    .gallery li {
    word-spacing: normal;
    }

  • sitehatchery

    display:block;
    float:left;

    works fine for me in all versions of FF.

    display: -moz-inline-box doesn’t give the result expected because it seems to also float everything inside of the box.

  • http://www.brevardwebhosting.com lsalberg

    One of the best uses for soft-hyphens is to have your PHP script parse any URL’s that users enter as straightforward URL’s (no link). You see this typically in comments of blogs or in forums.

    It’s usually not a problem in forums since the forum post containers are wide by default, but blog comments tend to be narrow.

    You can search for “/” in your script and replace it with “/&shy;” so that long URL’s will naturally wrap.

    Only downside is that someone might think the URL includes the actual hyphen. Of course, this would only be in the rare case of a long URL, but I’d rather have a user’s URL wrap than break my design.

    If anyone has a better way to solve this, I’m all ears.

  • robert

    Amazing Firefox just got better at HTML 4.0 and supports CSS2.1.

  • Shawn Fumo

    Thanks for the heads-up! I’ve had to wrangle often enough with floats to really appreciate the inline blocks.

  • percy

    Isalberg,
    I believe you can use WBR for that… nonstandard though.

  • Anonymous

    So, why does sitepoint.com feel the need to redefine decades’ worth of cursor behaviour, and force a normal arrow (instead of a ‘dog bone’) when hovering over text? Do they think they know better than untold hours of GUI research, convention and user expectations? Just curious.

  • bloodofeve

    The inline block is going to prove very useful for me as I build lots of compliant photograph albums for clients by hand and have found it really frustrating when the layout was affected by longer pieces of text. I can now manage the layout with out having to add larger height attributes.

  • http://www.com-http.com Rachel Green

    Helpful and useful

  • http://www.sitepoint.com/ Kevin Yank

    So, why does sitepoint.com feel the need to redefine decades’ worth of cursor behaviour, and force a normal arrow (instead of a ‘dog bone’) when hovering over text?

    Thanks for pointing out this bug! We’ve now fixed it.

  • Anonymous

    Wow. I only just started webdesigning a couple of years ago – and I was APPALLED when I found out that soft hyphens were not an option in html. How could anyone ever think of NOT including that? Thanks for finally supporting the obviously necessary! :o)

  • jonas-e

    Wow. I only just started webdesigning a couple of years ago – and I was APPALLED when I found out that soft hyphens were not an option in html. How could anyone ever think of NOT including that? Thanks for finally supporting the obviously necessary! :o)

  • mathieuf

    I am so glad to see soft hyphens. I used them a lot in the old days of TeX programming, and missed them in HTML. I hope the search tools know how to correctly deal with them, or will be made to.

  • PB

    Thanks so much for this article. I was tearing my hair out trying to make the inline work in FF. For me, sitehatchery’s code

    display:block;
    float:left;

    worked both in IE and FF so that’s the one I used.