Degrading Unicode characters for web browsers with missing fonts

Question

I am using the Unicode 'CHECK MARK' (U+2713) in a html document. I find that it renders OK in most browsers, but occasionally I encounter someone with a missing font on their PC. Are there any HTML / JS tricks to specify an alternative display character (or an image) if the font is missing?

Answer 1

Unicode is pretty standard, I always use unicodemap.org. Here is the character your using [link] this will give you all codes associated with the checkmark. If you want full backwards compatibility you will need to use an actual image. 1 image file for a checkmark is more lightweight than a javascript hack/plugin. Probably your best alternative.

Answer 2

There's not a direct way to tell if any particular character has rendered in a useful way. About all you can do from JavaScript is to create a <span> containing one (or several) of the target character in the target font, and compare its width to another <span> containing the same number of characters you know won't render usefully(*). If they're the same width, chances are you've got a load of boxes or question marks in each, so you can take backup measures like adding an image.

Since this is quite a lot of annoyance you may prefer to just go for the image. Or you could try using @font-face embedding on modern browsers to use a known-good font in general. Since it is typically IE that has poor Unicode font fallback support, be sure to include an EOT font.

(*: you could try a character that's currently unassigned and will hopefully stay that way, eg. U+08FF, or a guaranteed-invalid character like U+FFFF, though it's questionable whether you should be allowed to put that in an HTML document.)

Answer 3

If you can devise a way to remotely check if MS Office 2000 or newer is installed, you should be able to assume that Arial Unicode MS is installed and hence having this code point in a font (as long as you have the CSS font family set to something like "Arial Unicode MS, Arial, sans-serif").

I believe this will only work in Microsoft Internet Explorer, but you should be able to detect a Word installation by trying to create its ActiveX object in JavaScript:

if(new ActiveXObject("Word.Application"))
{
    window.alert("Word is installed, go ahead and use the Unicode check mark in HTML");
}
else
{
    window.alert("Word is not installed, use your image of a check mark.");
}

But given that this really only works in IE, will probably throw a security warning in IE8, and you still need a fallback mechanism for other browsers or IE browsers without MS Office, using an image all the time is probably the best way to go.

Answer 4

This is not quite what you're asking for, but it might solve your problem (assuming your goal is to output HTML without it needing to rely on outside images, etc)

Have you considered image data URLs (also known as RFC2397): http://www.ietf.org/rfc/rfc2397.txt

Instead of using:

✓

to represent a check mark, you would use:

<img src="data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsj
zmpzmj0FADs="/>

This won't require any particular Unicode fonts with the CHECK MARK character to be installed on the client side, BUT it won't work in Internet Explorer 7 or lower. (Internet Explorer 8, Firefox, Safari, etc. should work just fine)