Fonts and Web Applications
In my Route planner toy, I use the airplane character from unicode (✈) for the airports. I got a complaint today, that it looked crap because they only got a little square instead of a plane. Of course not all machines are going to have a font containing the plane character, so what are the options?
One option would be to use images instead, but this is slower to render and download aswell as a more complicated DOM to parse (and in an ideal world, you’d still need to thing of how to make it accessible when images are disabled).
Instead I’ve decided to have a go at detecting if the font is actually supported, and if it is not, replace the plane symbol with a simple +. The code is pretty simple, and relies on the fact that symbols in fonts have different sizes, so it compares the size of a 10 of the testing symbols, with 10 of a symbol from a private use area in unicode.
function symbolSupported(testChr) { var testDiv=document.createElement('div'); testDiv.style.display=\"block\"; testDiv.innerHTML=\"<span class=airport style='font-size:10em;'>󰀀󰀀\"+ \"󰀀󰀀󰀀󰀀󰀀󰀀󰀀󰀀</span><\"+ \"span class=airport style='font-size:10em;'>\"+repeatStr(\"&#x\"+testChr.toString(16)+\";\",10)+\"</span>\"; document.body.appendChild(testDiv); var supported=!(testDiv.firstChild.offsetWidth*testDiv.firstChild.offsetHeight == testDiv.lastChild.offsetWidth*testDiv.lastChild.offsetHeight); document.body.removeChild(testDiv); return supported;}function repeatStr(str,n) { var out=[]; for (i=0;i<n;i++) { out.push(str); } return out.join(\"\");}This seems to work pretty well, where I’ve tested it, but I’m not that happy with it - is it safe that the private use area is empty? Is it safe that the size, even with 10 characters with 100em is different between the symbols? Still for this use case, it’s relatively safe as the alternative of +’s would be acceptable to anyone, but for more complicated symbols and use cases I don’t think it would be safe.
Does anyone have a better approach that would work here?
null
Not necessarily better but:
1. Use Sifr? http://www.mikeindustries.com/sifr/
2. Use Bir, this loads plane image, but it loads after page load. http://wdhaven.com/article/12/bir
3. use font-embedding http://msdn.microsoft.com/library/default.asp?url=/workshop/author/fontembed/font_embed.asp limited to IE, http://www.efuse.com/truedoc/ I’m thinking this with various css hacks could be combined with methods above to provide good coverage, degrade of display possibilities.
4. branch, IE gets font embedding, Mozilla/FF gets data: protocol http://www.ietf.org/rfc/rfc2397.txt xbm img of an airplane, not sure about Opera. http://www.elf.org/essay/inline-image.html
Wed Jul 13 02:34:00 UTC+0100 2005
Instead of using a symbol from the private use area, why not use the “replacement character” itself? ( , U+FFFD) Some people might have fonts installed that utilise parts of the PUA.
Wed Jul 13 08:13:00 UTC+0100 2005
Because I tried it Porges, and found it gave me a different character!