Note:

The stylesheet for the polyfill was not included correctly when this post was first published, and as a result, the examples below were not showing up correctly on IE7-8 and Safari 5.1+. The problem has been corrected.

Screenshots of HTML5 progress bars with different styles applied. Details given below.

The HTML: Simple

The HTML for a Progress bar is dead simple:

<progress max="100" value="60">
  <strong>Progress: 60% done.</strong>
</progress>

Note that the HTML inside the <progress> tag is the fallback for browsers that do not support it. That, unfortunately, includes all versions of IE and Safari so far, as well older versions of Firefox (5.x and lower) and Opera (10.x and lower). Although the fallback is acceptable, we can go a step further and use Lea Verou’s excellent <progress> tag polyfill, which adds pretty much full-support for all of these browsers except for Safari 5 and lower (so you should always put in the fallback HTML just to be on the safe side). Let’s take a look at these screenshots to see what how <progress> looks across the browserverse:

	Windows 7	Windows XP	Mac OS X	Ubuntu Linux
Firefox
Chrome
IE7+ (polyfill)		N/A
Safari 5.1+ (polyfill)				N/A
Opera

Note that:

• Firefox and Chrome will render the progress bar the same way that the host operating system would … except for Chrome for Linux, which uses it’s own custom style (thanks to Mounir Lamouri for correcting me on this exception).
• The color of the Opera progress value is always green (more on this later).
• The browsers that use the polyfill all render the progress bar with a nice bluish gradient effect

A progress bar can also have an “indeterminate” state, which happens when there is no value attribute.

<progress max="100">
  <strong>Progress: 60% done.</strong>
</progress>

This effect is used to show that the state of progress is currently unknown (e.g. how long it will take for a web server to initiate the download of a file if is generating it on the fly). How this looks varies from browser to browser as well.

	Windows 7	Windows XP	Mac OS X	Ubuntu Linux
Firefox
Chrome
IE7+ (polyfill)		N/A
Safari 5.1+ (polyfill)				N/A
Opera

Note that:

• Opera is the only browser that doesn’t distinguish between a progress bar with an indeterminate state and one with a value of zero.
• All of the other browsers (including the ones that use the polyfill) animate the indeterminate states. (I have opted to not show all the animations here to avoid readers getting seizures … I hear that would be a bad thing).

But I Want To Style Them My Way!

If you are particular in how you want your <progress> tags to look, the good news is that you can pretty much style them any way you want. You must, however, be aware about the browser quirks that can trip you up … and it isn’t all IE’s fault this time! Follow this three-to-four-step process, and you’ll be styling progress bars in your sleep in no time:

Step 1: Turn off default styling

The first step is to turn off the default styling in all browsers:

progress,          /* All HTML5 progress enabled browsers */
progress[role]     /* polyfill */
{

	/* Turns off styling - not usually needed, but good to know. */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;

	/* gets rid of default border in Firefox and Opera. */
	border: none;

	/* Needs to be in here for Safari polyfill so background images work as expected. */
	background-size: auto;

	/* Dimensions */
	width: 400px;
	height: 60px;

}

/* Polyfill */
progress[role]:after {
	background-image: none; /* removes default background from polyfill */
}

/* Ensure fallback text doesn't appear in polyfill */
progress[role] strong {
	display: none;
}

Simple stuff: remove the border and add a specific width and height. I added the second rule to remove the background image inserted by the polyfill’s stylesheet, but if you wanted, you can modify the polyfill’s stylesheet directly (or leave it out completely if you elect not to use the polyfill). The final rule is to ensure the polyfill doesn’t display the fallback content — it assumes that is always wrapped in a <strong> tag, so this may be something you should keep in mind when setting the default content (if you don’t like using a <strong> tag as a wrapper for your fallback content, use whatever tag you like).

Note that the appearance property (and its vendor-specific brethren) are there to turn off the default operating-system styling on the progress bar — it doesn’t seem like it is really necessary, but I put it here for reference in case it becomes mandatory in the future.

Step 2: The Progress Bar Background.

Now let’s change the background color of the progress bar to a light red.

progress,                          /* Firefox  */
progress[role][aria-valuenow] {    /* Polyfill */
   background: #ffeeee !important; /* !important is needed by the polyfill */
}

/* Chrome */
progress::-webkit-progress-bar {
    background: #ffeeee;
}

Notice that with Firefox and the polyfilled browsers, all you need to do is change the background of just the progress tag itself, while in Chrome (and I assume future versions of Safari) it is necessary to use the -webkit-progress-bar pseudo-element. Note that even though the code inside these rules are the same, you cannot put all of these selectors in one rule: doing so breaks Firefox and Opera (so much for degrading gracefully).

Step 3: The Progress Bar Value

Now let’s change the color of progress bar value to black. The CSS is a wee bit longer than it really should be:

/* Firefox */
progress::-moz-progress-bar {
    background: black;
}

/* Chrome */
progress::-webkit-progress-value {
    background: black;
}

/* Polyfill */
progress[aria-valuenow]:before  {
    background: black;
}

Yes, three rules to rule them all! Again, putting them all together in one selector breaks every browser on the planet (including the polyfilled ones), so we have to write three separate rules with the same CSS properties in them! <sarcasm>Yaaayyy!!!!</sarcasm>

Note that there is no way that I know of to style the progress bar value in Opera 11.52 and lower. It just stays the same green no matter what you do. :-( If anyone is reading this and knows otherwise, I would be indebted to you to let me know how.

Step 4: The Indeterminate Value

This part is optional, and I would only put these rules in if I know I’ll need a style for the indeterminate value (not all applications need it):

/* Firefox */
progress:not([value])::-moz-progress-bar {
  background-image:  url(../images/indeter.gif);
}

/* Chrome */
progress:not([value])::-webkit-progress-bar {
  background-image:  url(../images/indeter.gif);
}

/* Polyfill - IE */
progress[role]{
	background-image: url(../images/indeter.gif) !important;
}

/* Polyfill - Safari */
progress:not([value])  {
	background-image: url(../images/indeter.gif) !important;
	background-size: auto;  /* Needs to be in here for Safari */
}

It even works in Opera! Note that the background-size must be set to auto in order to override the default style in the polyfill. :-)

See the above CSS in action in a “clean room” page

That’s Too Basic! I Want Fancy-Pants™ Progress Bars

So, now that you know the basics, let’s take a look at some more complicated and interesting progress bars:

Two Image Effect

This progress bar uses two versions of the same image (one grey-scale, one color) to differentiate between the progress bar background and value:

See the above example in action in a “clean room” page

Gradients

Note that not only can you use background-colors and -images, but also use the variety of gradients that are available for developers today in supported browsers (this does not include IE9 and lower). To prove this, I took Chris Croyer beautiful <div> style progress bars from his blog post on CSS3 based progress bars and HTML5-ified™ them here:

Unfortunately, due to CSS gradients being implemented by the browser vendors using vendor-specific prefixes, the CSS tends to be a wee long. Here is the CSS of the first example (scroll the code to see the whole lot of it):

/*
 * Gradient Shadow
 */

/* All HTML5 progress enabled browsers */
progress.example3 {

	/* Turns off styling - not usually needed, but good to know. */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	/* gets rid of default border in Firefox and Opera. */
	border: solid #cccccc 5px;
	border-radius: 10px;
	/* Dimensions */
	width: 238px;
	height: 45px;
}

/* Polyfill */
progress.example3[role]:after {
	background-image: none; /* removes default background from polyfill */
}

/*
 * Background of the progress bar background
 */

/* Firefox and Polyfill */
progress.example3 {
	background: #cccccc !important; /* !important only needed in polyfill */
}

/* Chrome */
progress.example3::-webkit-progress-bar {
	background: #cccccc;
}

/*
 * Background of the progress bar value
 */

/* Firefox */
progress.example3::-moz-progress-bar {
	border-radius: 5px;
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(43,194,83) 37%,
		rgb(84,240,84) 69%
	);
}

/* Chrome */
progress.example3::-webkit-progress-value {
	border-radius: 5px;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(43,194,83)),
		color-stop(1, rgb(84,240,84))
	);
	background-image: -webkit-linear-gradient(
		center bottom,
		rgb(43,194,83) 37%,
		rgb(84,240,84) 69%
	);
}

/* Polyfill */
progress.example3[aria-valuenow]:before {
	border-radius: 5px;
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(43,194,83) 37%,
		rgb(84,240,84) 69%
	);
	background-image: -ms-linear-gradient(
		center bottom,
		rgb(43,194,83) 37%,
		rgb(84,240,84) 69%
	);
	background-image: -o-linear-gradient(
		center bottom,
		rgb(43,194,83) 37%,
		rgb(84,240,84) 69%
	);

}

Note that I did not use the Gradient filter to polyfill CSS3 gradients in IE6-9. This is because Visual Filters don’t work in CSS3 pseudo-elements like :before or :after. Oh well.

See the above CSS in action in a “clean room” page

Monkeys!

What blog post about HTML5 progress tags would be complete without monkeys? These simians appear in all browser except for IE8 and lower (as explained below).

Apologies to the great Banksy — it’s not his monkey but one grabbed from this Animated GIF site and converted into a CSS sprite using André Gil’s super-cool Gif2TileSet tool. I took this sprite and animated the monkey using blitting whenever the progress bar changes values (thanks to my friend and colleague Noel Tibbles for turning me on to this technique).

Note the HTML has an extra <div> tag so the monkey has a place to live:

<progress class="monkey" min="0" max="100" value="60"></progress>
<div class="after"></div>

I wish that I could have used :after (or ::after) rules instead, but these pseudo-elements don’t work with the progress tags in any browser that doesn’t use the polyfill. And no, :before doesn’t work either. I have no idea why it doesn’t work, but it’s a shame — using them would be perfect to get rid of the extra markup.

The CSS that makes the monkey animate when the progress bar changes values is here:

progress.monkey[value="0"] +  .after{
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif');
} 

progress.monkey[value^="1"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -77px ;
}

progress.monkey[value^="2"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -154px ;
}

progress.monkey[value^="3"] +  .after,
progress.monkey[value="100"] +  .after  {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -231px !important ;
}

progress.monkey[value^="4"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -308px ;
}

progress.monkey[value^="5"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -385px ;
}

progress.monkey[value^="6"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -462px ;
}

progress.monkey[value^="7"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -539px ;
}

progress.monkey[value^="8"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -616px ;
}

progress.monkey[value^="9"] +  .after {
	background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0  -693px ;
}

Each of these rules are applied when the first digit changes in the progress bar, which is done using the ^= attribute rules. This works because the progress bar goes from 0 – 100 and the progress bar increments by 10. They monkeys don’t appear in IE8 and under because of it’s lack of support of the ^= attribute selector (but it works well in IE9).

Note that this would be much easier if CSS allowed us to combine the CSS3 calc() and attr() attributes together like Lea Verou dreams about in one of her blog posts:

/*
 * Don't try this - it doesn't work in any browser, but it would be nice if it did.
 */

progress.monkey::after {
   background-image: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif');
   background-position-x: 0;
   background-position-y: calc(-77 * attr(value), 'px');
}

Hopefully this will come to pass in the future.

See the above CSS in action in a “clean room” page

Speedometer

My last example is radically different than the others. How about we apply the speedometer metephor to the progress bar with some fancy-pants CSS3? This example in all browsers except IE8 and lower (due to lack of support for native CSS3 transform)

The CSS is similar to the monkey example in that I add an extra <div> after the progress tag, except that it has an image of a pointer inside of it.

<div id="progressContainer">
  <progress id="rot" class="example_r" min="0" max="100" value="60"></progress>
  <div data-arrow-for="rot" class="arrow"><img src="/blog/wp-content/uploads/2012/01/hand.png" /></div>
</div>

I wrapped both these tags inside a relatively positioned container <div>. This is so I could absolutely position both the progress bar and the arrow in order for them to line up properly. I make the progress bar into a semi-circle by using border-radius and part of a photo from Flickr user ‘listener42′ …

progress.example_r {

	/* gets rid of default border in Firefox and Opera. */
	border: solid 1px black;
	display: inline-block;

	/* Produces the semi-circle */
	border-radius: 238px 238px 0 0;

	/* Dimensions */
	width: 238px;
	height: 126px;
	padding: 0;
}

… and make the arrow rotate as the progress bar increments by using CSS transforms:

progress.example_r[value="0"] + .arrow {
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
}

progress.example_r[value^="1"]:not([value="1"]):not([value="100"]) + .arrow {
	-moz-transform: rotate(288deg);
	-webkit-transform: rotate(288deg);
	-o-transform: rotate(288deg);
	-ms-transform: rotate(288deg);
}

progress.example_r[value^="2"]:not([value="2"]) + .arrow {
	-moz-transform: rotate(306deg);
	-webkit-transform: rotate(306deg);
	-o-transform: rotate(306deg);
	-ms-transform: rotate(306deg);
}

progress.example_r[value^="3"]:not([value="3"]) + .arrow {
	-moz-transform: rotate(324deg);
	-webkit-transform: rotate(324deg);
	-o-transform: rotate(324deg);
	-ms-transform: rotate(324deg);
}

progress.example_r[value^="4"]:not([value="4"]) + .arrow {
	-moz-transform: rotate(342deg);
	-webkit-transform: rotate(342deg);
	-o-transform: rotate(342deg);
	-ms-transform: rotate(342deg);
}

progress.example_r[value^="5"]:not([value="5"]) + .arrow {
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
}

progress.example_r[value^="6"]:not([value="6"]) + .arrow {
	-moz-transform: rotate(378deg);
	-webkit-transform: rotate(378deg);
	-o-transform: rotate(378deg);
	-ms-transform: rotate(378deg);
}

progress.example_r[value^="7"]:not([value="7"]) + .arrow {
	-moz-transform: rotate(396deg);
	-webkit-transform: rotate(396deg);
	-o-transform: rotate(396deg);
	-ms-transform: rotate(396deg);
}

progress.example_r[value^="8"]:not([value="8"]) + .arrow {
	-moz-transform: rotate(414deg);
	-webkit-transform: rotate(414deg);
	-o-transform: rotate(414deg);
	-ms-transform: rotate(414deg);
}

progress.example_r[value^="9"]:not([value="9"]) + .arrow {
	-moz-transform: rotate(432deg);
	-webkit-transform: rotate(432deg);
	-o-transform: rotate(432deg);
	-ms-transform: rotate(432deg);
}

progress.example_r[value="100"] + .arrow {
	-moz-transform: rotate(450deg);
	-webkit-transform: rotate(450deg);
	-o-transform: rotate(450deg);
	-ms-transform: rotate(450deg);
}

Again, the CSS would be much smaller in size if I could use calc() and attr() together, but again, oh well. Also note that this example doesn’t work in Opera very well because we cannot turn of the green in the progress bar value. :-(

See the above CSS in action in a “clean room” page

Summary of Gotchas

As mentioned before, there are a few annoyances I have found with they way the browsers have implemented HTML5 progress bars:

1. You cannot use :before/::before or :after/::after pseudo-elements on the progress element. Why this is not allowed is unclear to me, and I hope this is allowed in the future.
2. Safari 5.0 and lower cannot use the polyfill, so you should always use the fallback HTML inside the <progress> tag.
3. It seems like it is impossible to change Opera’s progress bar style to anything besides green.
4. There is a small bug in the polyfill when applying borders to the progress bar. I have a fix that has been submitted as a pull request and I assume being reviewed, but in the meantime, you can get my forked version of the polyfill (with the bug fix) on GitHub.

Help Me Keep This Page Up-To-Date!

If you find out more information about the HTML5 progress tag, I’d love to hear from you! Please let me know in the comments below. I will add relevant information to the above article and credit you fully. :-)

If you are using a desktop browser (except for Opera), play with the paint widget on the left. When you select a tool and mouse over the white canvas, your mouse arrow will change to a custom cursor representing that tool (à la Photoshop or The GIMP). This is not done by creating a DOM object and moving it to the mouse’s coordinates — we are using CSS to do it using the cursor property’s url() function. When used properly, custom CSS cursors can add a little bit of polish to your web sites and applications. However, doing this in a cross browser way can be a little confusing unless you know all the gotchas, and this article will go into depth about them. We will also explore issues such as when to use custom cursors, performance, what makes good cursor design, cursor file formats, and cursor size.

When Should I Use Custom Cursors Instead of the Built-in Ones?

In general, CSS cursors (built-in or custom) should be used as a hint to the user as to what action the mouse can perform. Let’s take a look at an example that doesn’t use custom cursors to illustrate a common use-case: drag and drop. To give users a visual cue that an item is draggable, it is common practice to set an object’s CSS cursor property to move. Mouse over the object draggable object below to see how this works.

This is done with the following CSS:

a[draggable="true"] {
    cursor: move;
}

The code above ensure that when a user “mouses over” a link with the HTML5 Drag and Drop “draggable” attribute, the move cursor appears. It is a great way to help the user “figure out” how to use the user interface with minimal instruction. A list of the built-in cross-browser cursor property values can be seen at CSS2 Cursor Style Page.

The built-in cursors are great, but there are a few things to keep in mind.

• Built-in cursors may look different depending on what browser/operating system is being used. For example, some browsers (e.g. Firefox on Windows 7) will show the move cursor as a four-pointed arrow () while others (e.g. Firefox on Mac OS X) will show a hand (). Using custom cursors, you can ensure all applications are using the same cursor for a more consistent expeience. The example below is the same as the one above, except in all browsers, you will see the a hand icon.
  Drag me!
• Not all browsers support all the same “built-in” cursors, and custom cursors allows you to add support for them. For example, while Firefox on Windows doesn’t support context-menu, it seems to be the only browser that supports the zoom-in and -out cursors. Using custom cursors, you can implement all of these in all browsers.
• There may not be a built-in cursor for the use-case you need to solve. A good example is in the paint widget at the beginning of this article — none of those cursors exist natively in any browser.
• It’s nice to design your own cursors, since sometimes the built-in ones may be a little basic looking (If you do this, please keep in mind that users are used to the built in ones, so your custom cursor shouldn’t look too much different than them if you want your application to be easy-to-use).

The CSS of Custom Cursors

Here is some sameple CSS code that will show custom cursor when the user mouses over a div with an id of dragMe. If the browser doesn’t do custom cursors (like Opera), the cursor fallback to the built-in move cursor.

#dragMe {
    cursor: url('customMoveCursor.cur'), move;
}

As long as your cursor is in the same directory as your stylesheet, and as long as it is an uncompressed .CUR file, it’s as simple as that. Note that a .CUR file is just an .ICO file with extra information that allows the developer to define the “host spot” position of the cursor (i.e. the part of the image which points to the position of the mouse). Note that .CUR files support 32-bit color (16.7 million colors plus alpha channel transparency), so designers can create cursors that have semitransparent areas like shadows and anti-aliasing.

How does one create a .CUR file? Not too many graphic tools create .CUR files natively, but there are some easy solutions. If you are a Photoshop user, the ICO (Windows Icon) file format plugin for Photoshop is what you are looking for (I have not used it myself, but it apparently can save .CUR files directly. Any comment on how well this works would be most welcome). If, like me, you use the GIMP, simply save the file as a .ICO file and convert it with this command line tool written in Python by Jan Thor.

The Gotchas of Custom CSS Cursors

There are a few things you need to remember when using CSS cursors

1. You must add a default “built-in” cursor after your custom cursor, or the custom cursor will not load in Firefox. Think of it as Mozilla’s way of enforcing good web practices. :-)
2. Internet Explorer interprets relative URLs as relative to the HTML document, and not the CSS file like God (and the W3C) intended (Sometimes it seems that IE goes out of its way to make lives difficult for us developers). This is true for all versions of IE, even IE9. To ensure cross-browser compatibility, you must either use an absolute URL:
   

   #dragMe {
       cursor: url('/cursors/customMoveCursor.cur'), move;
   }
   

   or a fallback url for IE:

   /*
    * Assume this the HTML is in a directory above this CSS file
    */
   
   #dragMe {
       cursor: url('../cursors/customMoveCursor.cur'),     /* Modern browsers    */
               url('cursors/customMoveCursor.cur'),        /* Internet Explorer  */
               move;                                       /* Older browsers     */
   }
   

3. It is best that your .CUR files are 32×32 pixels in size. IE9 seems to resize cursors that are smaller than this to 32×32, and IE8 and under cannot show cursors larger than this size. While it is true that you can fit multiple file sizes inside a .CUR file, sticking with one 32×32 image will ensure cross-browser consistency.
4. Although .CUR files can be saved in either a compressed or uncompressed format, not all browsers can read the compressed ones. It is best to save your cursors in uncompressed format. If you are using the GIMP to save to .ICO format first before you convert to .CUR, make sure that the .ICO is saved without compression.

Performance Issues

As mentioned earlier, a lot of browsers (like Firefox or IE6) cannot show compressed .CUR files, but they can show .PNG files. Since we would like to use a compressed version if possible, one could do this:

#dragMe {
    cursor: url('/cursors/customMoveCursor.png'),      /* Modern browsers    */
            url('/cursors/customMoveCursor.cur'),      /* Internet Explorer  */
            move;                                      /* Older browsers     */
}

This works well as long as the cursor hotspot is 0,0. You can define a PNG hotspot using the CSS3 cursor syntax, but it breaks IE:

#dragMe {
    cursor: url('customMoveCursor.png') 5 15, /* Modern browsers, hotspot is (5, 15)            */
            url('customMoveCursor.cur'),      /* IE chokes on the above line .. never gets here */
            move;                             /* Older browsers (IE never gets here either)     */
}

In order to fix this issue, one must you conditional comments to make a separate IE from everyone else. Let’s use a variation of Paul Irish’s Conditional Comment pattern to do this. Change the html tag to this:

<!--[if (lte IE 9) ]><html class="ie9 oldIE">    <![endif]-->
<!--[if (gt IE 9)  ]><html class="modern">       <![endif]-->
<!--[!(IE)]><!-->    <html class="notIE modern"> <!--<![endif]-->

Now we can use this CSS to ensure .PNG loads in non-IE browsers:

html.modern #dragMe {
  cursor: url('customMoveCursor.png') 5 15, /* Modern browsers, hotspot is (5, 15).   */
          move;                             /* Older browsers                         */
}

html.oldIE #dragMe {
  cursor: url('customMoveCursor.cur'),      /* IE .CUR file loads                     */
          move;                             /* In case IE can't load the above.       */
}

The extra bytes used to create the conditional comments may or may not be worth the trouble. If you are using conditional comments (like I do all the time), it may be worth it.

A Final Word On Testing in IE

If you edit a .cur file on the web server and reload your page with that cursor in Internet Explorer, you may not see the edited change, since IE has kept the older cursor in cache and has a hard time letting go, kind of like that person you dated in high-school. You will need to clear IE’s cache in order to see the new cursor. This is quite annoying, and it is something you should keep in mind when troubleshooting in IE.

Further Reading

• Cross-browser custom CSS cursors by Adrian Ber

CSS3 Box-Shadows are a great to quickly decorate the outside of block-level elements. There are many CSS box-shadow recipes you can use to produce a variety of effects, including simple, glowing and blurred shadows. And, unlike CSS3 text-shadows, box-shadows are natively supported by the latest version of IE. However, if you want them to appear in older versions of IE (i.e. 6 through 8), you will want to learn how to use a variety of Visual Filters to simulate them. This article will cover a few CSS3 box-shadow effects, the equivalent Visual Filter recipes for IE 6-8, and the differences between them. It will also cover the differences in the CSS3 implementations in all the modern browsers. Box-shadows like the example on the left is possible in all commonly used browsers.

First off, what is a box-shadow?

A box-shadow is equivalent to a CSS3 text-shadow except it is applied to the box of the block-level element instead of the actual text. Just like text-shadows, you can have one shadow:

#box {
  box-shadow: <x-offset> <y-offset> <blur-radius> <color>;
}

… three shadows:

#box {
  box-shadow: <x-offset1> <y-offset1> <blur-radius1>, <color1>,
              <x-offset2> <y-offset2> <blur-radius2>, <color2>,
              <x-offset3> <y-offset3> <blur-radius3>, <color3>;
}

… or as many as you want. The x- and y-offsets measure the position of the horizontal and vertical shadow respectively, and the blur-radius measures the amount of blur in the shadow. Let’s take a look at a simple example:

#box {
  box-shadow: 5px 5px 0px #ff0000;
}

Live HTML result	Firefox 4.0 Screenshot (for browsers like IE6-8 that can’t see the Live result)
This is an example of a simple box-shadow without blurring

Note that although box-shadow is the official property name, one must use the vendor-specific prefixes in order to use it in Webkit browsers (i.e. Chrome and Safari) as well as older versions of Firefox:

#box {
  box-shadow: 5px 5px 0px #ff0000,          /* Firefox 4.0+, Opera, IE 9 */
  -webkit-box-shadow: 5px 5px 0px #ff0000,  /* Chrome and Safari         */
  -moz-box-shadow: 5px 5px 0px #ff0000;     /* Firefox 3.6               */
}

Furthermore, there are two optional parameters, the spread (which allows you to determine the size of the shadow) as well as the inset parameter that can allow you to put the shadow inside the box instead of outside of the box. I direct readers to Mozilla.org’s great reference for box-shadow to read more on these properties, since they are not, as far as I can tell, reproducible in IE 8 or lower.

What about IE?

IE9 has no problem showing box-shadow except when shadowing a box within a table-cell (If the CSS of the table has its border-collapse property set to collapse then the box-shadow is not applied. Hopefully this is fixed in a future release).

As mentioned earlier, IE6-8 requires Visual Filters to simulate CSS3 box-shadows without JavaScript. In order to illustrate this, I will show several different types of box-shadows below and show both the CSS3 syntax and the equivalent Visual Filter CSS recipe. Some of these recipes produce almost identical results, while others are rough equivalents. Note that all these examples use a variation of Paul Irish’s Conditional CSS Pattern in order to create the IE-only rules. This involves replacing the <body> tag of the document with this HTML:

   <!-- Extra white-space below is just to make it easier to read. :-) -->

   <!--[if lt IE 7 ]>   <body class="ie6">          <![endif]-->
   <!--[if IE 7 ]>      <body class="ie7">          <![endif]-->
   <!--[if IE 8 ]>      <body class="ie8">          <![endif]-->
   <!--[if IE 9 ]>      <body class="ie9">          <![endif]-->
   <!--[if (gt IE 9) ]> <body class="modern">       <![endif]-->
   <!--[!(IE)]><!-->    <body class="notIE modern"> <!--<![endif]-->

We can then apply CSS specific to a version of IE. For example:

body.ie7 #box {
   /* insert IE7 specific CSS here */
}

(Note: Paul Irish’s technique officially has the conditional comments around the html tag, not the body tag. You can use either for these techniques to work. I just prefer using the latter.)

All these Visual Filter recipes depend on the box “having layout”. If you have any difficulty with the Visual Filters activating, set zoom: 1 or a static width inside the IE6-8 specific CSS to force the block to have layout.

Type #1: Simple, Unblurred Shadows

In order to simulate simple, unblurred box-shadows in IE, we use IE’s DropShadow Visual filter:

#box {
  /* CSS for all browsers. */
  border: solid 1px #808080;
  background: #ffffcc;
  margin: 10px;
  padding: 10px;

  /* CSS3 Box-shadow code: */
  box-shadow: 5px 5px 0px #ff0000;
  -webkit-box-shadow: 5px 5px 0px #ff0000;
  -moz-box-shadow: 5px 5px 0px #ff0000;
}

/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a simple box-shadow without blurring that also works in IE6-8.

There are two exceptions to this solution. The first deals with when the block has a transparent background, and the other has to do with negative box-shadow offsets.

Type #1a: Blocks With Transparent Backgrounds

Let’s say you use the above CSS, but omit the background property:

#box {
  /* CSS for all browsers.  Note there is no background-color, so box will be transparent */
  border: solid 1px #808080;
  margin: 10px;
  padding: 10px;

  /* CSS3 Box-shadow code: */
  box-shadow: 5px 5px 0px #ff0000;
  -webkit-box-shadow: 5px 5px 0px #ff0000;
  -moz-box-shadow: 5px 5px 0px #ff0000;
}

/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}

Doing this will results in some unexpected results in IE6-8:

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a box with a transparent background and simple box-shadow without blurring. IE6-8 is having a hard time dealing with the transparent background.

The results in IE7 are as hideous and unreadable as the average YTMND page! In order to fix this issue in elderly IE, one must add a background color in IE6-8 only and remove it with the Chroma filter (more information on this technique can be found on my previous blog post, How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together).

#box {
  border: solid 1px #808080;
  margin: 10px;
  padding: 10px;

  /* Box-shadow code: */
  box-shadow: 5px 5px 0px #ff0000;
  -webkit-box-shadow: 5px 5px 0px #ff0000;
  -moz-box-shadow: 5px 5px 0px #ff0000;
}

body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   background-color: #ffffff;
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000),
           progid:DXImageTransform.Microsoft.Chroma(Color='#ffffff');
}

As you can see below, adding this CSS logic produces much better results:

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a box with a transparent background and simple box-shadow without blurring, with a fix for IE6-8 to deal with the transparent color.

Note: All the other types of box-shadow recipes that follow should also use this Chroma filter method when it is desirable to have a transparent background in the box itself.

Type 1b: Negative Shadow Offsets

If there are negative shadow offsets, you will see a small difference with the position of the box being shadowed:

#box {
  /* CSS for all browsers. */
  border: solid 1px #808080;
  background: #ffffcc;
  margin: 10px;
  padding: 10px;

  /* CSS3 Box-shadow code: */
  box-shadow: -10px -5px 0px #ff0000;
  -webkit-box-shadow: -10px -5px 0px #ff0000;
  -moz-box-shadow: -10px -5px 0px #ff0000;
}

/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=-10, OffY=-5, Color=#ff0000);
}

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a simple box-shadow without blurring that also works in IE6-8.

You will note that the offsets in IE push the box down and to the right. This is because IE’s Visual Filters believes that the box-shadow as part of the box itself, while CSS3 believes that it should be outside of the box. As a result, negative box-shadows shift the box in IE6-8. In order to compensate for this, one can use margin-top and margin-bottom to move the shadow to where CSS3 thinks it should be:

#box {
  /* CSS3 Box-shadow code: */
  box-shadow: -10px -5px 0px #ff0000;
  -webkit-box-shadow: -10px -5px 0px #ff0000;
  -moz-box-shadow: -10px -5px 0px #ff0000;
}

/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=-10, OffY=-5, Color=#ff0000);
   margin-top: 10px;
   margin-left: 5px;
}

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a simple box-shadow without blurring that also works in IE6-8.

Note that one could also make use relative positioning and use the CSS top and left properties to do the same thing in IE. I leave it up to readers to decide which method would be more appropriate for the situation they find themselves in.

Type #2: Glowing box-shadow

The second box-shadow I use a lot is what I call the “glowing box” effect. This happens when a shadow with a large blur radius is put directly behind a box (i.e. the x- and y-offsets are set to 0, and the blur-radius is a non-zero number). It is possible to simulate this effect in IE using the Shadow filter. This filter must be applied four times (north, south, east and west of the box) in order to simulate the CSS3 effect. Here is the CSS recipe:

#box {
   box-shadow: 0 0 5px #666666;
   -webkit-box-shadow: 0 0 5px #666666;
   -moz-box-shadow: 0 0 5px #666666;
}   

body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);
}

… and here are the results as rendered in Firefox 4 and IE7:

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a box that has short blurred shadows horizontally and vertically on all sides.

Note that the color in the Visual Filter syntax is lighter than the CSS3 one. In order to get the equivalent IE color, I take a screenshot of the CSS3 box-shadow, open the image in The GIMP or Photoshop, and find the color that is just outside of the box. This is the color I use in the IE syntax. If you don’t want to go through all this trouble, you can also guess, which is what I do if I’m lazy. Which is a lot of the time.

You can increase the blur radius/strength to produce larger glows as well:

#box {
    box-shadow: 0 0 15px #cccccc;
   -webkit-box-shadow: 0 0 15px #cccccc;
   -moz-box-shadow: 0 0 15px #cccccc;
}	

body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=0),
           progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=90),
           progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=180),
           progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=270);
}

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a box that has longer blurred shadows horizontally and vertically on all sides.

You can also use this alternate recipe I have used one or twice if you want a darker color closer to the box, with it becoming dramatically lighter father away:

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is another example of a box that has longer blurred shadows horizontally and vertically on all sides.

Sure, the IE7 screenshot looks slightly different from the Firefox one, but let’s take a look at what all the modern browsers look with exactly the same CSS code:

Opera	IE 9
Safari 5	Chrome 13

They are all slightly different. It is almost impossible to be pixel perfect with blurred box-shadows unless you give different rules to the different browsers using vendor-specific prefixes.

Two important caveats about the Visual Filter rules:

1. As mentioned before, the CSS for IE6-8 uses a lighter color for the shadow. This is due to the way the Shadow filter behaves: it requires a lighter shade to simulate the same effect.
2. Note that the Visual Filters examples are pushed down and to the right compared to the CSS3 example. This is for the same reasons as stated in Type 1b, and a developer would again have to use margins or positioning to get the box in exactly the same place as it is in IE6-8:
   

   #box {
      box-shadow: 0 0 5px #666666;
      -webkit-box-shadow: 0 0 5px #666666;
      -moz-box-shadow: 0 0 5px #666666;
   }   
   
   body.ie6 #box,
   body.ie7 #box,
   body.ie8 #box {
      margin-left: -5px;
      margin-top: -5px;
      zoom: 1;
      filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
            progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
            progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
            progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);
   }
   

Type #3: Blurred box-shadow

Up until a few days ago, I thought this last type of text-shadow could not be simulated in IE using just CSS. I then came across an interesting recipe from CSS-Tricks and this demo by Christian ”Schepp” Schaefer. These CSS recipes came close, but was not able to control the color of the shadow itself (it assumed grey shadows only) or the exact location of the shadow. I decided to take this work to the next level and add full control of the text-shadow, with some nice results:

Live HTML result	Firefox Screenshot	IE7 Screenshot
This is an example of a box with a blurred box-shadow. It uses a special CSS recipe in order for it to work in Internet Explorer 6-8 involving a container HTML element and the Blur Visual Filter.

Here is the HTML:

<div id="box">
        <div class="content">
                This is an example of a box with a blurred box-shadow.
                It uses a special CSS recipe in order for it to work in
                Internet Explorer 6-8 involving a container HTML element
                and the Blur Visual Filter.
        </div>
</div>

and here is the CSS:

#box {
        /* CSS3 syntax */
	box-shadow: 5px 5px 5px #cccccc;
	-webkit-box-shadow: 5px 5px 5px #cccccc;
	-moz-box-shadow: 5px 5px 5px #cccccc;

        /* Place any other shared CSS properties here, except for those in the next rule */
        margin: 20px auto;
	text-align: center;
}

#box,
body.ie6 #box .content,
body.ie7 #box .content,
body.ie8 #box .content {
        /*
         * Any width, height, padding, border and background information goes here, so it is
         * shared between the CSS3 and legacy-IE solutions
         */
	width: 200px;
	padding: 10px;
	background: white;
	border: solid 1px black;
}

body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
        /* This contains the color of the shadow in the CSS3 syntax */
	background: #cccccc;

        /* This contains the blur-radius in the CSS3 syntax */
	zoom: 1;
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5);

        /* You must remove the border in IE, since it will be replaced in the next rule */
	border: none;
}

body.ie6 #box .content,
body.ie7 #box .content,
body.ie8 #box .content {
	position: relative;

        /*
         * Margins must be added here to place the box above the shadow correctly.
         * The margin-left and margin-right properties should be -2 times the CSS3 x-offset.
         * The margin-top and margin-bottom properties should be -2 times the CSS3 y-offset.
        /
	margin-top: -10px;
	margin-left: -10px;
	margin-bottom: -10px;
        margin-right: -10px;
}

Yes, the Legacy-IE Specific CSS as long and as painful like a meeting with your accountant, but it gets the job done.

Conclusion

These Visual Filters CSS recipes can come handy when you want IE6-8 to have similar box-shadow effects that modern web browsers have. There are probably other types of box-shadows that can be handled using them, and if you are interested I encourage those with time and patience to check out Microsoft’s reference to Visual Filters and start playing with them. Although Visual Filter support will probably be taken out of IE10, developers won’t need worry since IE9 already has box-shadow support — these experiments should only be used to add box-shadow support in older versions of IE.

Further Reading

• Mozilla.org’s box-shadow reference page
• CSS Box Shadow from CSS Tricks
• CSS3 Box-Shadow for Legacy IEs from Christian ”Schepp” Schaefer
• Drop shadow with CSS for all web browsers by Robert Nyman. Note his article includes an alternate simpler solution for a blurred box-shadow that involves the Shadow filter:
  

  Live HTML result	Firefox Screenshot	IE7 Screenshot
  This is an example of a box with a blurred box-shadow. It uses the Shadow filter for Internet Explorer 6 through 8.

  but does not as similar when dealing with large shadows:

  Live HTML result	Firefox Screenshot	IE7 Screenshot
  This is an example of a box with a blurred box-shadow. It uses the Shadow filter for Internet Explorer 6 through 8.

  This difference may or may not be important to you, and again, I leave it up to the reader to decide what the right solution would be according to the situation.

In the last few months, I have written two articles where I discussed a few strategies to do CSS3-style transforms in IE (CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript? and CSS Blurred Text-Shadow in IE — Part I). While demonstrating the possibilities to creating a varied range of text-shadows in IE, there wasn’t any silver bullet that produced what I considered one of the Holy Grails of CSS polyfills: a method that could take an existing page and render multiple CSS3 text-shadows in IE with few, if any, changes to the CSS code. To that end, at the end of my last article, I dropped the gauntlet at the end of my last article and challenged the web development community to help come up with a better solution. I got a few takers, but one stood out from the rest. Kazumasa Hasegawa submitted his script and blog post (in Japanese and then in English) about his script that could do exactly what I asked: full CSS3-style text-shadowing in IE. It can do multiple blurred and unblurred shadows per block of text. The only caveat is that one would have to set the CSS selectors inside a JavaScript file. However, the code was extremely well written, and it was very easy for me to refactor it to become a plug-in for my CSS3 polyfill library, cssSandpaper. Now, all a developer has to do now is include a few <script> tags into the <head>, and BAM!!! — instant text-shadow goodness in IE7+.

Yeah Whatever! Show Me Proof!

If you are viewing this page in IE7+, here are the droids you are looking for:

Live CSS/HTML	IE9	Firefox	Text-Shadow Syntax
Simple			2px 2px 0 #E51919
Blurred			3px 3px 3px #B24C4C
Etched			0px 1px 0px white
Flaming			0px 0px 4px white, 0px -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200
Neon			0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 3px #ffffff, 0 0 4px #ff00de, 0 0 7px #ff00de, 0 0 8px #ff00de, 0 0 10px #ff00de, 0 0 15px #ff00de;
Unfocused			0 0 3px #fff
Glowing			0 0 20px yellow, 0 0 60px yellow
Embossed			-1px -1px white, 1px 1px #333333
Pillow			1px 1px white, -1px -1px #444
Fake 3D			1px 1px rgba(255,128,0,.7), 2px 2px rgba(255,128,0,.7), 3px 3px rgba(255,128,0,.7), 4px 4px rgba(255,128,0,.7), 5px 5px rgba(255,128,0,.7)

(Note that the Blur example does not appear correctly in IE7 and 8, due to lack of support of the transparent color)

These examples were inspired by these excellent examples on the web:

• Text-shadow, Photoshop like effects using CSS by CSS3.info (cssSandpaper version)
• Using CSS Text-Shadow to Create Cool Text Effects from Chris Spooner (cssSandpaper version)
• 8 css3 text-shadow effects by Fatma Alemadi (cssSandpaper version)

How Can cssSandpaper Give Me text-shadow Goodness?

1. Download the code from github.
2. Include the following in the head of the document you have text-shadowing on:
   

   <script type="text/javascript" src="/path/to/EventHelpers.js">
   </script>
   <script type="text/javascript" src="/path/to/textshadow.js">
   </script>
   <script type="text/javascript" src="/path/to/cssQuery-p.js">
   </script>
   <script type="text/javascript" src="/path/to/cssSandpaper.js">
   </script>
   

3. It should now work in IE. With the HTML5 Doctype, you can remove the type="text/javascript" attributes.

Download the latest version of cssSandpaper with IE text-shadow support.

Okay, What Are The Caveats

Like any polyfill solution, there are a few things one has to keep in mind when using a solution like this.

1. As you can see from the above examples, blurred text-shadows in IE look slightly different because of the different algorithm IE’s Blur Visual Filter uses compared to what CSS3 text-shadow uses. This is not so obvious on the second example above, but becomes more obvious the more blurred text-shadows are applied on the same text. For most applications, this is acceptable, but for those of us who like to pixel-bitch (i.e. complain when something is not pixel-perfect), you should be aware of this difference (No, I don’t know where I got that term from. I may have made it up. Anyone else heard of it before?)
2. Creating a large text-shadow blur (i.e. greater than 70px) on a large piece of text can cause Internet Explorer’s rendering engine to slow down when the text is scrolled into view.
3. Sometimes IE cuts off the shadows when the line-height is too small:
   
   

   The letter 'P' and other letters with descenders may get cut off if the line-height is not set to be larger than the actual font-size.

4. In IE7-8, elements above text-shadowed text that have a line-height property measured in em units may effect the text-shadow in IE. If there is a problem, the shadow is one pixel off from where it is supposed to be, as shown in this screenshot:
   
   

   Examples of a correct looking text-shadow (left) and a text shadow that is a pixel off (right).

   As you can see from the screenshots above, this problem is much more obvious when there is no blur-radius in the text-shadow. I am trying to see if I can work around this problem, but it looks like it has to do rounding errors when IE converts em units to pixels. If you have a lot em units in your document, you may want to consider using my non-JavaScript solution when using a single, non-blurred text-shadows.

5. Sometimes, in order for the text-shadows to render correctly when using ClearType, you may have to use the -sand-chroma-override CSS property on the HTML you applied the text-shadow on. This property is used by cssSandpaper to fix a problem with ClearType and IE’s Visual Filters, as described in my previous blog post, How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together. Most of the time, this property should be set to be the color that that is behind the text value of the background of the text, but sometimes you will have to look at the outline of the texts and the solid shadows to get an idea as to how it should be set. Let’s take, for example, the “Law and Order” style text at the top of this page. We used the following CSS to produce the text-shadow on the “CSS3″ text:
   

   -sand-chroma-override: #666666;
   text-shadow:
   	-4px 0px 0px #0f1128,
   	-8px 0px 4px rgb(50, 152, 234),
   	-10px 0px 4px rgba(50, 152, 234, 0.3),
   	-8px -4px 4px rgba(50, 152, 234, 0.6),
   	-8px 4px 4px rgba(50, 152, 234, 0.6);
   

   Why did I end up using #666666? It is a greyscale color that is roughly between the brightness of the off-white text and the blue shadow. If I set it to black instead, the outline of the text’s first dark text-shadow would be blocky, as seen here:

   	-sand-chroma-override: #000000	-sand-chroma-override: #666666
   Scale 100%
   Scale 300%

   What you set this value to will depend on the text-shadow recipe you are using and, to paraphrase my Mathematics text-books in college, I leave it up to the reader to play around with the -sand-chroma-override value to see what looks best in which situation.

In Conclusion

This script opens up a lot of great possibilities for styling text in IE. There is still some work to be done to make the script even better with some inevitable bugs that will need to be fixed, and I will continue to work on it to make improvements. If you see areas for improvement, or any bugs that you see with the code, please make a comment on the cssSandpaper issues page on github. If you have something to contribute, I would be most grateful. :-)

Other changes that I am planning for cssSandpaper will include:

1. Choice of Selector Library: I will be refactoring cssSandpaper to use other selector libraries besides cssQuery, which is currently bundled with it. This will include, but not restricted to, jQuery. This will allow developers to reduce the number of libraries included in their documents and reduce load time.
2. Modularity: I will make it easy for developers to make their own plugins to support CSS properties not currently supported by cssSandpaper. This module framework will also allow developers to only add support for the CSS properties they want to use (e.g. if a developer doesn’t use any CSS3 transforms, then they don’t have include that code or supporting libraries, like Sylvester.js).
3. Only Download Code If Needed: I want to make cssSandpaper only download plugins if actually needed. This will probably be done with Alex Sexton’s and Ralph Holzmann’s excellent yepnope.js library. While this library can be used today to speed things up, I want to look into making a little more integrated, if possible.
4. Further CSS3 Support: I am looking into polyfills at the moment, like border-image. Any other ideas for plugins will be most welcome.

Download cssSandpaper

Download the latest version of cssSandpaper with IE text-shadow support.

Notes:

• Before reading this article, you may want to read my previous article, which covers producing other text-shadow effects in IE.
• After reading this article, you may want to read my subsequent article, which covers using my cssSandpaper JavaScript library to produce multiple blurred and un-blurred text-shadows in IE7+
• When I first posted this article, I wrote that this solution works with IE8 as well as IE9. However, further testing has shown that IE8 produces unpredictable results. Please see the Caveats section for more information

Last week, I discussed several strategies web developers can use to simulate CSS text-shadow in IE. In that article, I mentioned that there was no way that I knew of to simulate text-shadow with a blur-radius in IE without JavaScript. Since then, I have discovered a way to simulate the CSS text-shadow effect in IE9 that does not use JavaScript and does not add extra elements to the DOM. There are some other caveats to this solution, and because of this, I have titled this article “Part 1″, since I believe more work can be done in this area to improve support for blurred text-shadows in IE.

Step by Step Text-Shadowing in IE9

This solution makes use of Paul Irish’s Conditional CSS Pattern, and I would suggest reading that article first before proceeding any further. I would also recommend reading my previous article, CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript?, since this solution relies on some ideas presented in that article.

After you become familiar with the above two articles, implementing text-shadow in IE9 becomes a two-step process.

For this tutorial, let’s assume the following HTML:

<div id="intro" class="alignLeft">
  <p data-innertext="Blurred Text-Shadow in IE9 Without JavaScript">
    Blurred Text-Shadow in IE9 Without JavaScript
  </p>
</div>

(Note the data-innertext attribute in the element we want to add the text-shadow to. This must contain exactly the same text that the element itself contains. We’ll explain why we need this later on).

Let’s also assume we want a gray text-shadow with both an x- and y-offset of 3 pixels as well as a blur radius of 3 pixels:

#intro p {
     text-shadow: 3px 3px 3px #cccccc;
     width: 230px;
}

Let’s look at the result so far:

Firefox screenshot	IE screenshot

As one would expect, works in Firefox but not in IE9.

See the above text-shadow code in action (without any IE9 goodness)

Step 1 – IE Blur Filter

Using Paul Irish’s Conditional CSS Pattern, we make an IE9 only rule that will blur the text

#intro p {
     text-shadow: 3px 3px 3px #cccccc;
     width: 230px;
}

/* Step 1: apply the Chroma and Blur filter to the text you want the Drop Shadow on */
body.ie9 #intro p {
	zoom: 1;
	color: #cccccc;
	background-color: #ccccce;
	filter: progid:DXImageTransform.Microsoft.Chroma(color=#ccccce),
	        progid:DXImageTransform.Microsoft.Blur(pixelradius=3);
}

Note four things:

1. I set the color to be the color of the text-shadow.
2. We set a background-color to be halfway between the color of the text (black) and the visual background of the text (white). In this case, I chose #ccccce since #cccccc is already being used by as the color of the text-shadow.
3. We remove the background color with the Chroma Visual Filter (this is necessary to avoid the Blur filter from being pixelated, in the same manner as the text-shadows in my previous article).
4. We apply the Blur Visual Filter to have a pixelradius of 3 (which is the same as the blur radius from the text-shadow.

Firefox screenshot	IE screenshot

See the above code in action (IE9 will only show the blurred text)

So now we have the shadow in IE! But what about the solid text on top?

Step 2 – Use :before To Replace the Solid Text

We now must add one more selector in order to get our black, un-blurred text back:

/* Step 2: create a :before rule on the blurred text */
body.ie9 #intro p:before {
  /* color and width of the original text */
  color: black;
  width: 230px;

  /* This is needed to place the text directly over the shadow. */
  position: absolute;

  /* This assumes that the data-innertext is the same as the text inside the element. */
  content: attr(data-innertext);

  /* Positions the text */
  margin-top: 0px;
  margin-left: 0px;
}

The :before rule duplicates the blurred text, colors it black and places it before the blurred text. The text is then duplicated because of the content property, which uses the value of the data-innertext attribute as the generated content — now you know why we set data-innertext at the beginning of this example. It is absolutely positioned, and since the top and left properties are not set, it places the text on top of the original text. Also note that the width is the same as the original element (in this case 230px). This is very important, otherwise the shadow will not appear below the text correctly.

The only thing left to explain is the margins and how they position the text. We must use these formulas to produce the x- and y- offsets of the original text-shadow

Why do we need to do this? Because adding the Blur filter pushes the text a few pixels from down and to the right — namely, the same amount of pixels from the blur-radius. These simple formulas compensate for that, and place the shadows according to what you set for the x- and y-offsets.

Firefox screenshot	IE screenshot

And now, let’s take a look at the difference close up:

Firefox screenshot	IE screenshot

Note: the other browsers look about the same in Firefox, so I didn’t bother posting screen captures of them.

See the above code in action, with IE9′s blurred text-shadow workaround.

Caveats

This solution only works under certain conditions:

1. You cannot have more than one type of font, font-size, font-weight or font-style with the shadowed element. This is due to the way we produce the shadow (i.e. the data-innertext cannot contain any HTML elements to control the style).
2. The shadowed element cannot be an inline element. It can be a block or an inline-block though.
3. Any background colors or background-images that you want to appear in with the text-shadow must appear in an outside element. For example, in the following HTML, you would put the background-image or background-color on the <div> tag, not the <p> tag which would have the text-shadow.
   

   <div id="intro" class="alignLeft">
     <p data-innertext="Blurred Text-Shadow in IE9 Without JavaScript">
       Blurred Text-Shadow in IE9 Without JavaScript
     </p>
   </div>
   

4. The shadowed element must be of fixed width (i.e. widths can be measured in px, em, etc. Percentages will not work).
5. As far as I know, it is impossible to have multiple text-shadows on the same block of text. If you wish to do this do glow text, you may want to look at my previous article, CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript?.
6. It only works in IE9. When I originally posted this article, I claimed it worked with IE8, but after further testing, when setting a font on a :before rule, IE8 sometimes produces unpredictable results (sometimes, the font is set to something different than the original text, and other times, the letter spacing is not correct). IE8 and lower are out of luck. :-(

An Open Challenge To Improve This Technique

Think you can do better? I challenge you! I am almost certain there has to be a better way with fewer restrictions that the solution I give here. I also know there are quite a few smart people out there who read this blog, so I am dropping the gauntlet and challenging everyone reading this article to help come up with a better solution. Post a URL with an example below, and if I like what I see, I will post a follow up article to this one with what I believe are the best solutions. Here’s your chance to solve what I think is a huge web development problem and be recognized as Someone Really Clever™.

Unless, of course, I come up with a better solution first. :-)

Update: April 24, 2011

Since writing this article, I have also discovered a way to implement blurred text-shadows in IE8+.

When IE9 was released, I was really happy to see all the great CSS3 features it supported. 2D Transforms, advanced selectors, border-radius, rgba/hsla colors, WOFF fonts … the list goes on. And no polyfills required! I was, however, disappointed that IE9 doesn’t support two of my favorite CSS3 effects: border-image and text-shadow. I’m sure that I will notice other CSS3 effects missing over time, but these are two features that I currently find incredibly useful. This article will deal with text-shadow: how it works in browsers that support it, and strategies we can use today to emulate some of its functionality in IE. Although the solutions I present here are based on IE’s Visual Filters, and that some articles like this one by Neil Crosby have looked into it as a solution, I present here some new information – how to make them work correctly with Windows Standard and ClearType font-smoothing and how to write the final CSS that won’t break any browser.

How does CSS3 text-shadow Work?

Before we go on about IE, let’s have a quick overview of how the CSS3 specification works. In all the other browsers (i.e. Firefox 3.0+, Safari 4.0+, Opera 10.0+ and Chrome 4.0+) text-shadow has pretty solid support. Its basic syntax is:

#obj {
   text-shadow: <x-offset> <y-offset> <blur-radius> <color>;
}

The x-offset and y-offset state how many pixels horizontally and vertically the shadow is positioned with respect to the original text, while the blur-radius is used to express how much the shadow is blurred (the higher the value, the more blurry it is). All of these values can be expressed using any CSS unit of measure (e.g. px, em, etc). The color can be any CSS color value, representing the color of the text.

Here are some examples:

Pure CSS Example (will be visible if your browser supports text-shadow	Firefox Screenshot (similar in other browsers except IE)
text:shadow: 5px 5px 0px black;
text:shadow: 5px 5px 5px black;
text:shadow: 1px 0px 0px white;

You are not restricted to just one shadow. You can have multiple shadows, separated by commas. For example:

#obj {
	text-shadow:
		 1px -1px 5px rgba(0, 0, 0, 0.2),
		-1px  1px 5px rgba(0, 0, 0, 0.2),
		 1px  1px 5px rgba(0, 0, 0, 0.2),
		-1px -1px 5px rgba(0, 0, 0, 0.2),
		 0px  1px 5px rgba(0, 0, 0, 0.2),
		 0px -1px 5px rgba(0, 0, 0, 0.2),
		 1px  0px 5px rgba(0, 0, 0, 0.2),
		-1px  0px 5px rgba(0, 0, 0, 0.2);
}

renders white text legibly on a white background:

Pure CSS Example (will be visible if your browser supports text-shadow	Firefox Screenshot (similar in other browsers except IE)
This is white text on a white background

Well … What About IE?

Currently, no version of Internet Explorer natively understands the CSS3 Syntax for text-shadow. However, IE 4.0+ can do text-shadow-like effects using Microsoft’s proprietary Visual Filters — unfortunately, if the user’s computer has any type of font-smoothing technology enabled, the DropShadow Visual Filter effect is quite messy and ugly. Since ClearType is enabled by default in modern versions of the Windows operating system (i.e. Vista, Windows 7) and is very difficult to disable it in Internet Explorer 9, this is a show-stopper. Don’t dispair, there is a workaround. Let’s see how DropShadow is supposed to work, and see how we can “clean-up” the result to look much nicer in modern versions of Windows.

Basic Text-Shadow

Let’s first take a look at a basic text-shadow without any blurring of the shadow:

#basicTextShadow {
	background-color: white;
}

#basicTextShadow p {
	text-shadow: 3px 3px 0px #99cc99;
}

The equivalent Visual Filter syntax is:

#basicTextShadow {
	background-color: white;
}

#basicTextShadow p {
	zoom: 1;
	filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);
}

Note that the zoom line — it is here since it forces IE to recognize that the object “has layout”. Visual Filters do not work unless a node “has layout”.

The problem is that when ClearType is turned on, many Visual Filters, including DropShadow don’t render text very well:

IE DropShadow without ClearType	IE DropShadow with ClearType

The text renders much better when you have a background-color.

#basicTextShadow p {
	zoom: 1;
	background-color: white;
	filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);
}

IE using the DropShadow Visual Filter with a background-color.

However, this will cause DropShadow to behave more like the CSS3 box-shadow property.

How can we have the font render well without the background-color. All we have to do is cut-out the background-color using the Chroma filter:

#basicTextShadow p {
	zoom: 1;
	background-color: white;
	filter: progid:DXImageTransform.Microsoft.Chroma(Color=white)
		progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);
}

Firefox using CSS3 text-shadow	IE with Chroma and DropShadow Filters Applied

The Chroma filter allows us to remove a specific color from the rendered element. In this case, we are removing white, which is also the background-color. As a result the font renders smoothly, and the DropShadow filter behaves almost like a true text-shadow. This is similar to the method I describe in a previous article I wrote, How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together. To sum-up: regardless of whether you use @font-face or not, you can make Visual Filters render text correctly by creating a background for the element, and then removing that background with the Chroma filter.

See the above three examples in action (IE is recommended in order to see the Visual Filter differences)

Here is some actual HTML that is styled so that all browsers, including IE, will render a text-shadow correctly:

Here is the CSS for "compliant" web-browsers:

#basicTextShadow p {
	text-shadow: 3px 3px 0px #99cc99;
}

And here is the CSS for IE (using Paul Irish’s Conditional CSS Pattern):

body.ie6 #basicTextShadow p,
body.ie7 #basicTextShadow p,
body.ie8 #basicTextShadow p,
body.ie9 #basicTextShadow p {
	zoom: 1;
	background-color: #cccccc;
	filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
	        progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);
}

There are some things that you should keep in mind with this solution:

• Since we are using the Chroma filter to remove the background-color of the object, any background image or color that you want to appear in the document must be placed in the containing tag. In this example, the background-image is styled on a <div> tag, while the text-shadow appears in a <p> tag inside it.
• Unlike CSS3, it is impossible to use multiple shadows using Visual Filters (to be more accurate: it is syntactically possible, but it doesn't look good or behave as one would expect).
• According to Microsoft's documentation, IE8+ is required to have an extra line containing an -ms-filter property which is identical to the filter one except the property's value is contained on one line within a set of quotation marks.
  

  body.ie6 #basicTextShadow p,
  body.ie7 #basicTextShadow p,
  body.ie8 #basicTextShadow p,
  body.ie9 #basicTextShadow p {
  	zoom: 1;
  	background-color: #cccccc;
  	-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc) progid:DXImageTransform.Microsoft.DropShadow(Color=#99cc99, OffX=3, OffY=3)";
  	filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
  	        progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);
  }
  

  I have, however, noticed that the CSS works in IE9 standards mode without this additional line.

Text Glowing

Text glowing is a term to describe a shadow that "envelopes" some text in a glow of color to make it more legible. Let's take the following example of black text on a dark background:

Hard to read, isn't it? We could change the color of the text to white, but you could also put a white glow around the text to keep it black and maintain the dark atmosphere of the image:

Using the CSS3 text-shadow property, this is just a case of creating a set of eight shadows around the text in question:

#sky.textShadowTest p {
	text-shadow:
		 0px -1px 5px #eeeeee,     /* north      */
		 0px  1px 5px #eeeeee,     /* south      */
		-1px  0px 5px #eeeeee,     /* west       */
		 1px  0px 5px #eeeeee,     /* east       */
		-1px -1px 5px #eeeeee,     /* north-west */
		-1px  1px 5px #eeeeee,     /* north-east */
		 1px -1px 5px #eeeeee,     /* south-west */
		 1px  1px 5px #eeeeee;     /* south-east */
}

It basically creates a text-shadow in all eight directions and blurs them together, giving us a glow effect. Pretty neat, but it doesn't work in Internet Explorer. However adding this CSS code will give IE something roughly equivalent:

/* Use Paul Irish’s Conditional CSS Pattern to isolate the rule for Internet Explorer */
body.ie6 #sky.textShadowTest p,
body.ie7 #sky.textShadowTest p,
body.ie8 #sky.textShadowTest p,
body.ie9 #sky.textShadowTest p {
	background-color: #cccccc;
	filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
		progid:DXImageTransform.Microsoft.Glow(Strength=5, Color=#eeeeee);
}

Firefox using CSS3 text-shadow	IE using the Chroma and Glow Visual Filter.

Note a few things about this solution:

1. The results aren't exactly the same. Doing a side by side comparison reveals that the CSS3 version looks a little smoother. Here are the above examples blown up 300% to show detail:
   

   Firefox using CSS3 text-shadow	IE using the Chroma and Glow Visual Filter.

2. The Strength in the Glow filter is the same amount of pixels in the blur-factor in the CSS3 text-shadow code.
3. You'll notice that background-color I removed with the Chroma filter in this case is not blue, but gray, a color halfway between the color of the text (black) and the color or the glowing text (white). This is so that the smoothness obtained by ClearType is somewhat preserved. Choosing black would make the text look to "thick", while choosing white would make the text look too "thin".
4. You'll notice the IE glowing text is "pushed" a little down and to the right. That's because IE treats the Glow as part of the width and height of the element. This can be fixed by relatively positioning the object and setting the top and left properties to the negative value of Glow's Strength value to compensate:
   

   body.ie6 #sky.textShadowTest p,
   body.ie7 #sky.textShadowTest p,
   body.ie8 #sky.textShadowTest p,
   body.ie9 #sky.textShadowTest p {
   	zoom: 1;
   	background-color: #cccccc;
   	filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
   		progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee, Strength=3);
   	position: relative;
   	top: -3px;
   	left: -3px;
   }
   

   The results are subtle, but will help to make the result a little more pixel perfect.

   Firefox using CSS3 text-shadow	IE using the modified version of the Chroma fix.	IE using the both positioning and modified Chroma fix.

   If you don't like using relatively positioning the text, you can also use negative left and top margins to achieve the same effect, or you can leave it the way it is — after all, what are a few pixels between friends? ;-)

I have used this method in my previous blog post about CSS3 border-image:

Firefox	IE9

Here is the CSS that I used to produce it:

#introExample p, #introExample code {
   color: white;
   text-shadow:   2px  2px 3px #333333,
                 -2px -2px 3px #333333,
                 -2px  2px 3px #333333,
                  2px -2px 3px #333333;
}

/*
 * The "poor man's" version of text-shadow for IE's Visual filters.
 */
body.ie6 #introExample p,
body.ie7 #introExample p,
body.ie8 #introExample p,
body.ie9 #introExample p {
	zoom: 1;
	background: #000003;
	filter: progid:DXImageTransform.Microsoft.Chroma(Color=#000003)
		progid:DXImageTransform.Microsoft.Glow(Color=#3e3e3e, Strength=4); 

}

The values of the Visual Filter code doesn't match exactly with the text-shadow. This is in part that I only used four directions in the text-shadow code (i.e. south-east, north-west, north-east and south-west). I don't believe this conversion is an exact science ... it is worth your time to experiment with these values, using the examples in this article as a guide.

But How About Other Types Of Shadows?

The short answer for now is that you are out of luck. There are no Visual Filters, as far as I know, that will allow you to do other types of shadowing, like a Basic Text-Shadow with blurring: Update April 24, 2011: Since writing this article, I have a discovered a way to implement blurred text-shadows in IE8+. I have left the rest of the information here since it is still relevant, interesting and influenced my own work.

There is no way that I know to do this in IE without JavaScript or without affecting the DOM

Kilian Valkhob also has a solution for this which involves making a copy of the desired text and blurring it with the Blur filter. While I think the results look pretty good, I hesitate using this method since search engines may see the text repeated in the document and index that text higher than it should be rated (or they might penalize the document because the search engine thinks the author is trying to do some unethical hack of the page ranking algorithm it uses). Vilkhob has, however, also created a text-shadowing JavaScript library that automates this process, and since the repeated text isn't actually in the document, it may be a solution to the search engine concern. This solution is something i am currently looking into adding to cssSandpaper, but I want to do more research into this before I implement it in a public version of my library. For example, how would screen readers handle this JavaScript generated "double text"?

Conclusion

CSS3 text-shadow is a great effect in a web developer's toolkit. Hopefully IE will natively support it soon, but in the meantime, at least there are some use cases you can use Visual Filters to do some of eye-candy it supports.

This is an example of CSS3 border-image in action. Browsers that don’t support it will see a normal solid coloured border, while modern browsers will see a nice framed border-image. Note that the clouds are produced with an additional background-image, showing the possibility of having separate images for borders and backgrounds.

The border-image property is something I’ve been wanting for a long time. For years, I have been cutting up images into several pieces in order to emulate this effect (the most recent example of this was used in this demo of the CSS3 Font Converter). The difference is that CSS3′s border-image property uses only one image and two lines of CSS (well … 6 if you include the vendor-specific properties and the fallback for browsers that don’t support it).

Since it is newly implemented in most web browsers, there are a few gotchas that developers should be aware of before implementing border-image. This article will cover these caveats, a tool that you can use to help generate border-images effectively, and a few things you should keep in mind so that pages don’t look funny in browsers that don’t support border-radius.

Let’s Look At An Example

This is an example of a block level element that uses the border-image property. The border-image is viewable in all major browsers except for IE (more on that later). It uses only one image to produce the border — no images were cut-up into pieces or harmed in any other way. The code to generate this border is fairly straight-forward once you know how it works:

#object {

   /*
    * These border widths must match the border-image numbers.
    */
    border-width: 23px 22px 22px 26px;

   /*
    * Note that all browsers use their respective vendor prefix.  Also note
    * that, unlike the border-width values, the widths in the border-image
    * property don't have the 'px' unit at the end.
    */
   -moz-border-image:    url('image.png') 23 22 22 26 round round;
   -webkit-border-image: url('image.png') 23 22 22 26 round round;
   -o-border-image:      url('image.png') 23 22 22 26 round round;
   border-image:         url('image.png') 23 22 22 26 round round;

   /*
    * You should include a border-color and border-style as a fallback for
    * browsers that don't support border-image
    */
    border-color: #cccccc;
    border-style: solid;
 }

The original image looks like this:

It is an edited version of an image produced by Free Printable Borders.

Note that the image repeats to the size of the block it borders. When you design a border-image, the border should tile in a similar way that a background-image does. There are some major differences though, so let’s show in depth how border-image is used, and introduce you to the tool that will help even the laziest developer in the world (i.e. me) create them quickly.

Basic Syntax

Note that the basic CSS is quite easy if you know how border-width works:

#selector {

  border-width: <top-width>px <right-width>px <bottom-width>px <left-width>px;

  border-image: url(<image-url>) <top-width> <right-width> <bottom-width> <left-width> 
                <horizontal-effect> <vertical-effect>;

}

Note that if you are measuring your widths in pixels, then you must put the px unit inside the border-width declaration, but you must leave it out in the border-image one. I know it doesn’t seem logical, but it’s just the way it is.

To illustrate the all of the border-image parameters, let’s take this image:

First we must grab the border widths in the right order:

A diagram showing how the borders widths are ordered.

(Note that the order of the border-image widths is consistent with the order that margin and padding uses).

Now, let us apply effects on our image.

Pure CSS Example (will be visible if your browser supports border-image	Firefox Screenshot (Opera and Webkit are similar, except for the round effect, which Chrome and Safari currently don’t support.)
This is an example of a stretched border. Note that the square in the corner remains intact, while the other squares are the ones that stretch.
This is an example of a repeated border. You’ll note that the browser will apply symmetry on the border, so that it looks “balanced”.
This is an example of a rounded border. In this example, the browser tries to “round” the widths and lengths of the squares so they are not abruptly cut off. Currently, this property is only supported by Firefox and Opera.

But I Hate Counting Pixels!

If you are the laziest developer in the world (i.e. me), you don’t want to crack open your graphics editor, open up a image file and count the pixels by hand – you want a tool that will generate the CSS for you. After all, don’t we use computers so that they will do things for us? At least, until they take over the world?

I was in the middle of creating my own tool, but I noticed that Kevin Decker beat me to it with his excellent Border Image Generator. You can take any image, from the web or your desktop, drag a few sliders around, and voilá!, you have your code, vendor-prefixes and all. You should definitely check it out if you are as lazy as I am.

Percentage Widths

The border-image property can also take percentage values, which correspond to the image’s width in height. For example, let’s take this 81×81 image:

As you recall, we used the following pixel dimensions:

border-image: url('/border-image/images/borders/chain.png') 23 22 22 26 round;

If you wanted to convert the pixel widths to percentages, you must take each value and divide it by either the entire width of the border-image (for the left and right widths) or by the height of the border-image (for the top and bottom widths). In the above case:

• The top border width percentage = (top border width in pixels) / (border-image height) = 23 / 81 = 0.283… = 28%
• The right border width percentage = (right border width in pixels) / (border-image width) = 22 / 81 = 0.271… = 27%
• The bottom border width percentage = (bottom border width in pixels) / (border-image height) = 22 / 81 = 0.271 = 27%
• The left border width percentage = (left border width in pixels) / (border-image width) = 26 / 81 = 0.320 = 32%

Note that these percentages can only be used in the border-image property. The border-width property must continue to use the pixel values:

Now, why on earth would you want to use percentages, since pixels are probably more accurate? I don’t see there being any need for bitmap images, but Webkit browsers (i.e. Safari and Chrome) can use SVG vector images as a border-image as well. Since SVG images are resolution independent, I would assume it is more accurate to use percentages. It would be worth looking into percentage widths more when SVG border-image support reaches critical mass, since the other browser manufacturers may handle SVG support differently than Webkit.

Degrading Gracefully and Progressive Enhancement

It is important that developers ensure their designs degrade gracefully so that pages not only look decent in browsers that don’t support border-image, but also look nice when a compliant browser is loading the images, especially when loading a high-bandwidth page or a page on a slow connection. Not only should you ensure the border-color and border-style are set, but it is a good idea to ensure that the look of the fallback border is as close as possible to border-image as possible. Let’s take a look at the “framed border” we used at the top of this page:

Firefox	IE9
Screenshot of how the border-image example at the top of the page looks in Firefox.	Screenshot of how the border-image example 'falls back' in IE9 using the ridge border-style.

You can also be fancy and use modernizr to do some extra progressive enhancement styling by using the
html.no-borderimage selector. I have done this using the comments section of my blog posts.

Firefox	IE9
Screen shot of comment on my blog using the balloon border-image in firefox (Click to see full screenshot).	Screen shot of the same comment using modernizr to style the comment differently on browsers that don't support border-image (Click to see full screenshot).

Using With Background Images

If you are using a border-image without a transparent colour or alpha channel, the center of your border-image will hide any background-image the object may have. If you want to have a separate background-image, you must “cut-out” the middle of the border-image using your graphics editor with a transparent colour. For instance, the example at the top of the page with the picture frame border-image has a photo of clouds as a background-image. This allows developers to create more graphically rich block-level elements.

Hey! What about IE?

Unfortunately, IE doesn’t support border-image natively. I may have a workaround for this using cssSandpaper, but it needs a lot more testing to see if it is a truly viable polyfill for this effect. If I am successful, I will post whether that solution as an addendum to this blog post.

Conclusion

border-image can be used today to make some very interesting effects that can be degraded gracefully in browsers that don’t support it. It can speed up design time considerably since you don’t have to use your graphics editor to cut up images. And I’m sure it will waste a lot of your time while you play and see how it can be used effectively.

Converting fonts quickly will help speed up production of your projects and can easily integrate into your workflow.

I love experimenting with web fonts, but using the hodgepodge of free and open source desktop tools to convert them manually is time consuming. To speed things up a bit, Font Squirrel created the excellent @Font-Face Generator web application which not only generates the fonts for you, but also creates a stylesheet a developer can import and use the font immediately. I really like this tool and it inspired me to write a command line tool that would create a package like Font Squirrel’s generator, The result is a shell script that uses FontForge, Batik and Readable Web’s EOTFast to do the heavy lifting. It was originally developed under Windows using Cygwin, but I spent a bit of extra time to ensure that it can run under Linux and Mac OS X (using ttf2eot instead of the Windows-only EOTFast to generate the .eot fonts). Since it runs on OS X, it should run under BSD flavours of Unix as well, but I haven’t confirmed this (I would be grateful to hear from any BSD users on how it works).

This tool is not intended to replace Font Squirrel’s tool (as a matter of fact, their tool has a few more options than mine). However, I find it useful when trying out a variety of fonts on my local web server, so I thought I’d share.

If you’re not familiar with the command line on your particular operating system, this may not be the solution for you. I will, however, give step-by-step instructions on how to install and run the shell script. If you stumble into any problems, and especially if you find any inaccuracies with the instructions here, please post a comment below and I will try my best to address them. I find this script quite useful and would love to help the rest of The Community™ as much I can if they would like to use it as well.

Download the CSS3 Font Converter from GitHub

Examples

Before we start using the tool, I have included a few examples. They are intended to show situations where a developer may not want to use fonts that are not included on your computer’s font-stack.

Argor Biw Scaqh/Old London	Peanuts	Aaaaight!!!!!
Serif or Sans-serif? How about neither? This example makes heavy use of Black Letter fonts, which are not included in most operating systems today.	Why use a font everybody seems to hate when there are other cartoony fonts to choose from?	Grafitti style fonts have a unique look all their own.

In all cases, the original fonts were in True Type format. The font-converter then converted the fonts into all the other @font-face formats, and created a style sheet containing the appropriate @font-face rules that can be easily imported by the author.

Usage

You can convert as many .ttf or .otf fonts in a directory by using the following command:

convertFonts.sh <filelist>

For example, if you wanted to convert all the .ttf files in the directory you are in, you could type in the command:

$ convertFonts.sh *.ttf

The fonts will then be converted to the .eot, .woff, and .svg formats. It will also generate a stylesheet, stylesheet.css, that will produce the @font-face rules using The New Bulletproof @Font-Face Syntax.

If you are converting .otf fonts, a .ttf font will be generated first before the other fonts.

Installation

I have tried to make this tool as easy to use as possible. If you follow these easy steps, it should work. If you have trouble installing the tool after you have followed all these steps, please leave a comment at the end of this post — I really want to make this as bulletproof as possible.

1. If you are using Windows XP/Vista/7, install Cygwin with the FontForge package. If you have never done this before, I have created a supplementary blog post to walk you through the installation process. If you have installed Cygwin before, you still may want to read the last half of the article, since installing FontForge can be difficult under Cygwin (at least it was for me until I did some digging).
2. Download and Install FontForge (if you are a Windows user, this is covered in step one). There are complete instructions on how to do this under OS X, and Linux as well. Update (May 14, 2011): The Linux page doesn’t mention this, but if you are an Ubuntu user, you can use apt-get to do the installation for you easily:
   

   sudo apt-get install fontforge
   

   Thanks to Richard Curran for pointing this out.

3. If you don’t have it already, install Java (it is required for Batik). If you are not sure how to do this, there are installation instuctions available for Windows, OS X, and Ubuntu Linux).
4. Download the latest version of Batik. Make sure you remember where you unpack the archive — you’ll need this later.
5. Download EOTFast (if you develop using Windows) or ttf2eot (for OS X and Linux, installation instructions are here).
6. Download the sfnt2woff package (this page has packages for Windows and OS X, as well as the source that one can compile for Linux).
7. Download the CSS3 Font Converter and unpack the contents in your path someplace.
8. Open up a terminal window (under Cygwin, that would be the either the “Cygwin Bash Shell”, or, better yet, “rxvt native” if you have that installed). Then, cd into the directory that you unpacked the CSS3 Font Converter, and edit convertFonts.sh (if you are using Windows, don’t use notepad to edit this file, since shell scripts don’t like to be saved as Windows text. If you are familar with it, use vim instead). You will need to edit the first few lines:
   

   #!/bin/bash
   
   #########################################################################
   ## CONFIGURATION AREA: This stuff is the only stuff you may need to     #
   ##                     change.                                          #
   #########################################################################
   
   # Linux and Mac users, this directory should be changed to be of this form:
   # BATIK_DIR="/Users/webtest/src/batik".  Windows should use the form below.
   BATIK_DIR='c:\Program Files\Batik\batik-1.7'
   
   # The path should contain the directories where EOTFAST-1.EXE, ttf2eot,
   # fontforge, and all the scripts in the @Font-Face Contruction Set reside.
   # Uncomment the line below with the right directories.  Remember the
   # $PATH at the beginning of the string, or the script will forget what
   # was originally in the PATH.
   # PATH="$PATH:/some/directory:/some/other/directory/"
   
   ....
   

   You have to change the value of BATIK_DIR to the directory that contains the Batik code (ensure that it includes the batik-1.7 directory at the end). If you haven’t installed the other packages in directories in your PATH, you must uncomment the PATH line and edit it so that it contains them.

9. If all is well, you should now be ready to convert fonts. To test, create a new directory, download and unpack the Old London Font from Dafont.com into it, and execute the following command:
   

   $ convertFonts.sh *.ttf
   

   If all is successful, you should see output similar to this:

   Converting OldLondon to eot
   (Using EOTFAST)
   Converting font "Old London"
   Successfully written "OldLondon.eot"
   Converting OldLondon to svg
   Converting OldLondon to woff
   Converting OldLondonAlternate to eot
   (Using EOTFAST)
   Converting font "Old London Alternate"
   Successfully written "OldLondonAlternate.eot"
   Converting OldLondonAlternate to svg
   Converting OldLondonAlternate to woff
   Writing Stylesheet ...
   Extracting SVG ID
   Getting Font Name
   Extracting SVG ID
   Getting Font Name
   DONE!
   

   Not only does it convert the TrueType font in all the web formats, it produces a nice style sheet you can
   link to:

   @font-face {
           font-family: 'OldLondon';
           src: url('OldLondon.eot?') format('eot'),
                url('OldLondon.woff') format('woff'),
                url('OldLondon.ttf')  format('truetype'),
                url('OldLondon.svg#OldLondon') format('svg');
   }
   
   @font-face {
           font-family: 'OldLondonAlternate';
           src: url('OldLondonAlternate.eot?') format('eot'),
                url('OldLondonAlternate.woff') format('woff'),
                url('OldLondonAlternate.ttf')  format('truetype'),
                url('OldLondonAlternate.svg#OldLondonAlternate') format('svg');
   }
   

Notes

1. FontForge can do way more than convert fonts. It is primarily a font editor, and I have used it to add accents characters to fonts that don’t have them (a necessity if you are a Canadian web developer that occasionally has to work with French text). Play around with it – it may become as important to you as your graphics editor and your IDE.
2. The script will use EOTFast when possible to create the .eot fonts, and failing that, will use ttf2eot as a fallback. EOTFast is the preferred solution because it can compress the converted file, but since it only runs under Windows, ttf2eot is needed for the other operating systems. Note that I have experienced a problem running EOTFast under my copy of Windows 7. I am not sure if this happens on all Windows 7 installations and I would love to hear comments in this area. I have sent a bug report to the developer, but in the meantime, you can use the Windows version of ttf2eot instead.
3. I used Batik instead of Fontforge to generate the SVG fonts because I couldn’t get the Fontforge SVG fonts to work. I don’t know why (to be honest, I didn’t look into it that much).
4. I did not build a GUI for this tool. If anyone wants to, please feel free. I would love to hear about it if you do.
5. The first time you run the script under Cygwin, you may get this warning:
   

   cygwin warning:
     MS-DOS style path detected: c:\Program Files\Batik\batik-1.7/batik-ttf2svg.jar
     Preferred POSIX equivalent is: /cygdrive/c/Program Files/Batik/batik-1.7/batik-ttf2svg.jar
     CYGWIN environment variable option "nodosfilewarning" turns off this warning.
     Consult the user's guide for more details about POSIX paths:
   
   http://cygwin.com/cygwin-ug-net/using.html#using-pathnames
   

   This error won’t affect how the script runs – it is just complaining about the way Java is running Batik. Since Java needs an MS-DOS path, ignore the warning.

6. Before using the tool, make sure you back up files that you don’t want over-written. I am not responsible for any loss of files because you used the tool incorrectly (or because of a bug in the tool itself).
7. Before you convert any fonts with this tool, please ensure that you have the legal right to do so by reading the license that comes with the font.

Image Credit

The image at the top of this post was remixed using works from Abigail Elder, 24oranges.nl, Robbie Sproule and Lisa Brank.

Download the CSS3 Font Converter from GitHub

Notes:

• This article was not rendering correctly in Firefox 4.x due to a change in how that browser handles MathML. This issue has now been fixed as of May 1, 2011.
• If you are not familar with 2D-Transforms, take a look at my other article Cross Browser CSS Transforms – even in IE

The Matrix Construction Set allows you to make a pixel perfect transformation by just dragging and dropping objects around.

The CSS3 transform property can do some really cool things - with it, web designers can rotate, scale, skew and flip objects quite easily. However, in order for deisgners to have fine-grained, pixel level control over their transforms, it would be really helpful to understand how the matrix() function works. With the matrix() function, designers can position and shape their transformations exactly where they want to.

The problem is, not many people actually understand what the numbers in the matrix filter actually mean. To solve this issue, I have created a tool, which I call the CSS3 Matrix Construction Set that can take any block-element, positioned anywhere on the page, transform it anywhere else on the page using the matrix() filter, and reveal the correct CSS code for this operation. Look at the tool now and if that is all you are interested in, you can stop there. However, if you what to know what the numbers in the matrix() function actually mean, and why you want such knowledge in the first place, read on. I'll try to explain this as simply as possible (and please feel free to use the feedback form if you have any opinions on how to make this article better).

Matrices: Why Should I Care?

Matrices are to transforms like RGB hex codes are to colors: they are representations that are easy for computers to understand, but not human beings. Sure, web designers can use the rotate(), skew(), scale() and translate() functions to fulfill their transformation needs ... why should we bother with matrix() at all? There are a few cases when you may want to:

Brevity:

Using matrices, it is possible to represent a complex string of 2D transforms like this:

#object {
    transform-origin: 0 0;
    transform: rotate(15deg) translateX(230px)  scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px)
}

using one matrix() rule like this:

#object {
    transform-origin: 0 0;
    transform: matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px)
}

(Note: I have ignored the vendor-specific variants (e.g. moz-transform, etc.) for the sake of brevity).

Pixel-Perfection:

If you know exactly how you want your transformation to look, it'll take a bit of fiddling around to get it to look how you want using the other transform functions, and it may not be pixel perfect if you lack patience (like I do). However, using a tool like the Matrix Construction Set, you can place the transform exactly where you want (This is analogous to using a color wheel to choose RGB colors for you, instead of using keywords like red, green or peachpuff).

JavaScript:

Revealing an object's transform information using JavaScript's getComputedStyle() function will yield a matrix() function in all current web browsers that support CSS3 transforms, even if it was rendered using other transform functions like rotate(). For example, the object below has been rotated 45° using transform: rotate(45deg):

This object has been rotated 45°

But this link, which shows the object's computed style will reveal that internally it stores a matrix() function.

Ok, What Does The Markup Look Like?

The matrix() function takes 6 parameters in order for it to work:

#transformedObject {
     -moz-transform:    matrix(1.4488, -0.3882, 0.3882, 1.4489, 400px, -100px);
     -webkit-transform: matrix(1.4488, -0.3882, 0.3882, 1.4489, 400, -100);
     -o-transform:      matrix(1.4488, -0.3882, 0.3882, 1.4489, 400, -100);
     transform:         matrix(1.4488, -0.3882, 0.3882, 1.4489, 400, -100);
}

Note the difference with the Firefox implementation of matrix() — the last two elements need the px units after it. For now, think of it is a difference in notation, but we'll explain why this is later.

But What Do The Numbers Mean?

In order to explain what they mean, I will have to define a few math-concepts here. Don't panic if you are mathematically challenged. These concepts are not that hard to understand, but there is a bit of explanation needed. Why should you torture yourself if you hate math?

If you are a designer:

Think of the stuff below as informational. If you use the Matrix Construction Set you won't need to calculate anything by hand (but wouldn't you want to have an idea what the numbers mean anyway?)

If you are a JavaScript developer:

This information will be invaluable when optimizing scripts that rely on transformation effects. Just try to understand the basic concepts here, and if you still need help, use the Sylvester JavaScript library to do the heavy lifting for you.

If you want to be an über-geek:

All those matrix jokes you hear at parties will suddenly start to make sense!

Finally you'll be able to understand why all the geeks at work find this XKCD comic so funny.

Terminology

Matrix

The easiest way to think of a matrix is as a group of numbers written in a rectangle or square. For our purposes, we will be dealing with 3x3 matrices, such as this one below:

That's nine numbers! So how come the CSS3 matrix() function only has six?

#transformedObject {
     transform:  matrix(1, 2, 3, 4, 5, 6);
}

Dot Product

Next we are going to explain what a dot product is. At first, this may not seem like this is related to matrices at all, but I promise it does ... just read on and you'll understand why in no time. Trust me. :-)

Let's say you have two (x, y) points, $\left(\begin{array}{cc}1& 2\end{array}\right)$ and $\left(\begin{array}{cc}4& 5\end{array}\right)$. The dot product of these two points (written $\left(\begin{array}{cc}1& 2\end{array}\right)$ · $\left(\begin{array}{cc}4& 5\end{array}\right)$) is what you get when you multiply the two x-coordinates, multiply the two y-coordinates, and then add them together:

Got it? It's pretty simple, right? Note that when we write (x, y) co-ordinates like $\left(\begin{array}{cc}\mathrm{x}& \mathrm{y}\end{array}\right)$, we call $\left(\begin{array}{cc}\mathrm{x}& \mathrm{y}\end{array}\right)$ a vector. Vector notation can be written horizontally, (e.g. $\left(\begin{array}{cc}\mathrm{x}& \mathrm{y}\end{array}\right)$) or vertically (e.g. $\left(\begin{array}{c}\mathrm{x}\\ \mathrm{y}\end{array}\right)$). When using them in 2D transforms, we always add an extra co-ordinate with a number 1 at the end. So (20, 90) would be written $\left(\begin{array}{ccc}20& 90& 1\end{array}\right)$ or like $\left(\begin{array}{c}20\\ 90\\ 1\end{array}\right)$ in vector notation.

Multiplicatying a Matrix with a Vector

So, what does the dot product have to do with matrices? Well the idea of the dot product can also be extended to matrices. Let's say you need to multiply the following together:

So, How Does This Relate To CSS3 Transforms?

#transformedObject {
     position: absolute;
     left: 0px;
     top: 0px;
     width: 200px;
     height: 80px;
     transform:  matrix(0.9, -0.05, -0.375, 1.375, 220, 20);
     transform-origin: 0 0;
}

What is the end result? Well, first let's take a look at the object without the transform CSS:

When the browser applies the transform to this block, it takes the matrix and multiplies it to each of the corner coordinates. For example, taking the bottom-right corner, (200, 80) or $\left(\begin{array}{c}200\\ 80\\ 1\end{array}\right)$, we get:

Let's look at the results for the other three coordinates. For (200, 0):

For (0, 80) test:

And finally, for (0, 0):

Here is the result:

I don't expect anyone to calculate these by hand on a regular basis (I personally don't). But now you know what these numbers mean. :-)

What About Internet Explorer?

Although transform-origin doesn't work with IE, it is possible to generate the matrix in another browser and use cssSandpaper to generate the shape of the transform in that browser. In order to fix the positioning, one can use Paul Irish's conditional stylesheet fix to position that block manually in IE only (it is what I used on this page so that the matrix transform in my example above appeared correctly in IE). I hope to have transform-origin working in cssSandpaper soon so that it will be unnecessary to do this.

Other Interesting Facts About Matrices

1. All the other CSS3 transform functions have equivalent matrix notation:

   scale(a)	scaleX(x)	scaleY(y)	translateX(x)	translateY(y)	translate(x,y)
   $\left(\begin{array}{ccc}\mathrm{a}& 0& 0\\ 0& \mathrm{a}& 0\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{ccc}\mathrm{x}& 0& 0\\ 0& 1& 0\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{ccc}1& 0& 0\\ 0& \mathrm{y}& 0\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{ccc}0& 0& \mathrm{x}\\ 0& 0& 0\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{ccc}0& 0& 0\\ 0& 0& \mathrm{y}\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{ccc}0& 0& \mathrm{x}\\ 0& 0& \mathrm{y}\\ 0& 0& 1\end{array}\right)$

   skewX(x)	skewY(y)	skew(x,y)	rotate(θ)
   $\left(\begin{array}{ccc}1& tanx& 0\\ 0& 1& 0\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{ccc}1& 0& 0\\ tany& 1& 0\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{ccc}1& tanx& 0\\ tany& 1& 0\\ 0& 0& 1\end{array}\right)$	$\left(\begin{array}{ccc}cos\theta & -sin\theta & 0\\ sin\theta & cos\theta & 0\\ 0& 0& 1\end{array}\right)$

2. A list of transforms in CSS3 like this:

   #o1 {
      transform-origin: 0px 0px;
      transform: rotate(15deg) translateX(230px) scale(1.5);
   }
   

   is the same as multiplying the equivalent matrices together:
   $\left(\begin{array}{ccc}cos\mathrm{15°}& -sin\mathrm{15°}& 0\\ sin\mathrm{15°}& cos\mathrm{15°}& 0\\ 0& 0& 1\end{array}\right)$ · $\left(\begin{array}{ccc}0& 0& 230\\ 0& 0& 0\\ 0& 0& 1\end{array}\right)$ · $\left(\begin{array}{ccc}1.5& 0& 0\\ 0& 1& 0\\ 0& 0& 1\end{array}\right)$
   (I know, I didn't tell you how to multiply matrices together. Stephan Waner has written a good tutorial for matrix multiplication if you are interested.)
3. CSS3 2D-Transforms can only transform blocks into parallelograms. For example, it is impossible to transform a block into this shape:
   
   In order to do this, one must use CSS3 3D Transforms. This is why the Matrix Construction Set only has three control points to drag around, not four. If you would like to see a version of the Matrix Construction Set to use matrix3d(), please let me know by leaving a comment below.

In Conclusion

I don't expect anyone to be an expert in matrix artithmetic after reading this article. But at least you know what those pesky numbers mean, and this information may become useful in the future.

Acknowledgments

• The MathML markup used to display the mathematical equations in this article were rendered by MathJax, an excellent open-source JavaScript library
• The equations on this Physics Forum post was quite helpful in the creation of the Matrix Construction Set.
• The Matrix Construction Set uses the Sylvester JavaScript library written by James Coglan for performing matrix calculations. It also used my own DragDropHelpers library to smooth out the different browser implementations of HTML5 Drag and Drop.
• A blog post that has a bunch of math equations on it may be scary for web designers. My apologies.

An example of ruby text, from a photo by Flickr user eliazar.”

When talking about Ruby Annotations, I don’t mean Ruby on Rails, or anything related to the Ruby programming language. I am talking about ruby characters which are used to annotate text with supplementary information. For example if some readers wouldn’t know what the term “WWW” means, we can use ruby annotations to help them out like this:

The ruby base (in this case “WWW”) is annotated by ruby text (“World Wide Web”). In this case, the ruby text appears in a small font-size above the base. Traditionally, ruby annotations have been used in Chinese, Korean and Japanese text-books to help students of those languages sound out more complicated characters:

In the text above, the ruby base is written in Kanji, many of which are only readable by Japanese with a high-school education. The ruby text is written in Hiragana, which all Japanese grade-schoolers can understand.

I can hear you saying to yourself “Who cares? I’m not Japanese! I can’t read any of it!”. Ruby annotations can also be used to help those who don’t speak the language at all. An author can use ruby to help English speakers pronounce Japanese …

.. or, for that matter, any other language, like Ukrainian.

It can also allow an author to give translations on top of foreign words.

But I Have a Hard Enough Time With English!

Ruby text can also be used for help foreign students pronounce English words that may difficult to read:

It can be also be used to help English speakers read intimidating Eastern European surnames transliterated into English:

(An aside note to telemarketers: if you call my home and ask my to speak to “Mister Have —- um — uk” , “Mister Hawww — ahh — uhhh” or especially “Mr. Zoltar”, I will hang up immediately. If you actually pronounce my name correctly, I’ll give you at least five minutes of my time. I mean it.)

Okay, how is this coded?

Let’s take a look at the markup of the above example:

My name is Zoltan
<ruby>
   <rb>Hawryluk</rb>
   <rp> (</rp>
   <rt>how-real-luke</rt>
   <rp>) </rp>
</ruby>

Let’s break down what each of these tags do:

To illustrate the last point about the <rp> tag, copy and paste the following ruby text into notepad, vi or any other plain text editor:

You will see the following in your text editor:

My name is Zoltan Hawryluk (pronounced: how-real-luke).

This is because the of how the <rp> tags are defined:

My name is Zoltan <ruby><rb>Hawryluk</rb><rp> (pronounced: </rp><rt>how-real-luke</rt><rp>)</rp>

Browser Support

So what browsers support these tags? Originally, the <ruby> tag was a proprietary Microsoft tag that worked in IE 5+. Since then it has become a part of HTML5 and WebKit based browsers like Safari and Chrome now support it as well. In order for Firefox and Opera to join the party, I remixed a stylesheet developed for Prince XML by George Chavchanidze of Opera Software. Below are some screenshots of how the ruby text looks in the various browsers with or without the stylesheet.

	With stylesheet set	Without stylesheet set
IE 6.0+
Firefox 3.6+
Safari 5.0+
Chrome 7.0+
Opera 10.63+

Download the stylesheet used in the examples on this page

I took George’s excellent work and added a few additional features:

• It tells IE to ignore the Firefox and Opera styles (since they don’t look so good in IE)
• It makes the font size smaller in Chrome and Safari (a personal preference).
• It sets the <ruby> tag’s ruby-align CSS property to center, so that IE mimics the way the WebKit browser display ruby text by default (IE’s default seems to be distribute-letter, which looks horrible in a lot of situations).

Also note that without the stylesheet, the ruby text gracefully degrades in Firefox and Opera, so it is still readable, and illustrates the usefulness of the <rp> tags. This stylesheet occasionally cause some unusual rendering in some older browsers (such as Safari 4.0 for Mac), but on the whole it does a pretty good job.

Note that in order to make the stylesheet set to work correctly, you must replace the <body> tag with this variation of Paul Irish’s Conditional CSS design pattern:

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)]><body class="modern"> <![endif]-->
<!--[!(IE)]><!-->  <body class="notIE modern"> <!--<![endif]-->

Using this declaration of the <body> blocks the Firefox and Opera styles in IE.

Advanced Ruby Annotations

Using the stylesheet, it is possible to also break ruby text into parts (e.g. syllables) without using a separate <ruby> tag for each part. This is done with the <rbc> (ruby base container) and <rtc> (ruby text container). Here is an example:

Although Internet Explorer does not understand these new tags, it does degrade gracefully. Here is a comparison of how IE renders the above and how Firefox does.

Firefox 3.6	Internet Explorer 6+

Here is the code that generated the example above.

<ruby class="syllables unicodeRubyText">
  <rbc>
    <rb>com</rb><rb>mu</rb><rb>ni</rb><rb>ca</rb><rb>tion </rb>
  </rbc>
  <rp> (</rp>
  <rtc>
    <rt>kəm</rt><rt>myoo</rt><rt>nĭ</rt><rt><strong>kā</strong></rt><rt>shən</rt>
  </rtc>
  <rp>) </rp>
</ruby>

Note that the <ruby> tag is a member of the classes syllables and unicodeRubyText, which are defined in the stylesheet. The syllables class tells the browser to separate the ruby base text into syllables, separated by the “Interpunct” symbol, while the unicodeRubyText tells the browser to render the ruby text with a Unicode font, so that the pronunciation symbols are printed correctly (it seems that this is only a requirement in Explorer, since the other browsers handle this automatically).

Here is a rundown of these advanced tags:

Unfortunately, there is a bug in older WebKit browsers that gives very strange results. Here are screen shots of the above code as viewed in Chrome 7.0 for Windows, with and without my stylesheet:

Chrome 7.0 Windows (with stylesheet)	Chrome 7.0 Windows (without stylesheet)

This bug appears in Safari 4.x and lower and the current version of Chrome (7.0), for both Windows and Mac. Since this has been fixed in Safari 5.0, I am assuming that this will be fixed in the next version of Chrome as well.

Ruby CSS3 Properties

There are three main CSS3 properties that can be used today … but in Internet Explorer only. Here are a list of them, along with additional properties that the W3C put in their recommendation back in 2001.

Hopefully the other browsers will support these eventually.

And So, In Conclusion …

Here is a quick recap of the various things you should keep in mind when using Ruby Text:

• Firefox 3.6 and Opera 10.x need the stylesheet in order to show ruby text correctly.
• Recent versions of Safari and Chrome don’t need it, but using the stylesheet won’t harm the display of simple ruby text.
• IE doesn’t need the styleheet, but if you use the stylesheet to ensure cross-browser display of ruby text, you must use the special body tag declaration above.
• <rbc> and <rtc> are not recognized in any version of IE, but they will degrade gracefully.
• Ruby text inside of <rtc> tags doesn’t look right in Chrome 7 or Safari 4. Since they do show up right in Safari 5, I assume/hope this will be fixed in the next version of Chrome.
• The advanced CSS3 ruby- properties, such as ruby-align, ruby-overhang and ruby-position are only supported by IE5+.

Additional Reading

• [MS-RUBY]: Internet Explorer Ruby Annotation Standards Support Document from the MSDN Web Site.
• Ruby Rendering in WebKit from the Surfin’ Safari Blog archive
• The W3C Recommendation document for Ruby Annotations, dated 31 May 2001 with corrections made on 25 June 2008
• The W3C CSS3 Rub Module Working Draft dated 14 May 2003.. There is also an editor’s copy dated 04 March 2010.
• XHTML Ruby in Prince, the forum thread where the original stylesheet was developerd. Great to see as a reference.

Download the stylesheet used in the examples on this page