IE, Unicode, freakout boxes and CSS

November 2, 2008 / Dealing with special characters when Internet Explorer can’t.

Update: Raphael’s solution (e.g. font-family:"Arial Unicode MS",Helvetica,sans-serif;) works like a charm and is much better than the long-winded version I’ve written up here.

My site uses a check mark to denote a visited link. Unfortunately, when I first implemented that style my old friends IE6 and IE7 showed freakout boxes instead.

[IE6 and IE7 showing boxes for unrecognised characters]
IE6 and IE7 show boxes for unrecognised characters.

I have seen these little buggers before and on that occasion they won the round. Although I’m growing increasingly reluctant to hack my personal stylesheets for You Know Who, today I changed my mind about tolerating IE’s mangling of my intentions. (About 40% of visitors to my site use IE so a fair number of people see this.) Regarding freakout boxes I believe the IE development team and I are now even.

For whatever reason, sometimes when IE is asked to render a glyph that does not exist in the font that the stylesheet is saying it should be displayed in, it will give you a freakout box. Other browsers (e.g. Camino, Chrome, Firefox, Omniweb, Opera, Safari) deal with it more gracefully. I think they look for other fonts on the system that contain the glyph the page wants to display and use that font instead, just for that glyph. On OS X it’s Lucida Grande:

[Omniweb 5.6 showing the Unicode check mark]
Omniweb 5.6 showing the Unicode check mark.

The check mark is actually specified in the stylesheet as generated content, rather than in the markup. Perhaps that is what is causing IE7 to choke in this case, because it is supposed to be better at “font linking” for characters in the Unicode BMP (Basic Multilingual Plane), which means characters in the range 0000–FFFF. Check marks are within that range, which makes me think it might be a generated content bug.

Here is the CSS that causes the problem in IE:

a:visited:after {color:#6699CC; content:"\00A0\2713";}

Which means, add a space and then Unicode character 2713, “check mark,” at the end of an anchor (link) element that has a pseudo class status of visited, and make it a certain shade of blue. From the figure above you can see that IE gets the content generation and colour to happen, but chokes on producing the correct glyph.

Earlier this year Eric Meyer wrote about font-family declarations and special characters and it got me wondering if I could fix this problem by specifying a font that IE would know did contain a check mark character—not necessarily the Unicode character, but a similar character. I chose Webdings (a Windows core web font), thinking that I needed something with a lot of symbols in it, and used the arcane Windows Character Map to tell me what the check mark character’s numeric value was. (I don’t know about Vista, but the OS X Special Character Palette smashes the competition on this.)

[Windows Character Map showing Webdings]
Windows Character Map showing Webdings.

I then wrote a kludge for IE6 and 7 that replaced the declaration calling for the Unicode 2713 check mark after a link with the Webdings character 0061:

* html a:visited:after,
*+html a:visited:after {content:"\00A0\0061"; font-family:Webdings;}

I’m not using conditional styles for IE (everything’s in one stylesheet) so this rule uses the “star hack” for IE6 and the new star hack for IE7.

I was a little surprised to see that it worked:

[IE7 showing checkmarks using Webdings]
IE7 showing checkmarks using Webdings.

Lastly, while writing this up I wondered if I was making it harder than it had to be: what if all I needed to do was specify another Windows core web font that contains the check mark character? Then all I’d need to do is use my hack to tell IE which font to use for that glyph. I used the Unicode Font Info tool to check each of Microsoft’s core fonts (other than Webdings) for the Unicode check mark character. It ain’t there.

I might be missing something in all this, but for now I’m going with the generated content bug theory, and using Webdings as the workaround.

† I’m not counting the fact that the Apple command symbol is not in any of Microsoft’s core web fonts. They can have that one.

7 responses

  1. Dan Todd

    a:visited:after {url(/images/checkmark.gif)};

    November 3rd, 2008 at 5:44 pm #

  2. Adrian

    You can add generated content as an image, content: url(). I don’t know how well supported it is. You could also add it as a regular background image, background-image: url(). What I like about using a literal character is that it is more meaningful than “filename.gif.” For content generated from a stylesheet maybe that’s splitting hairs :) Your question jogged my memory: Coudal’s Museum of Online Museums uses check marks in boxes—it’s a sharp touch, especially for that long list. This is done with background images on the links within list items.

    November 4th, 2008 at 12:17 am #

  3. Dan Todd

    Interesting. I like Coudal’s execution, but I hate having to use the background property for something like that. Maybe I feel that it is too much like a dirty hack and not semantic.

    November 9th, 2008 at 1:36 pm #

  4. Raphael

    It should be enough to set the font-family to “Arial Unicode MS”. Most XP systems have it installed…

    February 8th, 2009 at 8:51 am #

  5. Adrian Cooke

    Raphael, I’ll check this out, thanks for the tip.

    February 9th, 2009 at 11:08 am #

  6. sylv1

    How can this work since IE6 & IE7 don’t recognize after and content CSS instructions?? How did you manage to make it work?

    February 26th, 2009 at 10:43 am #

  7. Adrian Cooke

    sylv1, Dean Edwards’ IE7.js should solve the problem for you. It’s not a perfect solution, but it takes care of the majority of cases.

    February 27th, 2009 at 7:10 pm #

Zero to One-Eighty contains writing on design, opinion, stories and technology.