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

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 2

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)