In The Making of Octicons the chaps at GitHub shared their secrets for making crisp and resolution independent icons for web applications.
As I’m working on a system for rendering icons for my application, I followed their recipe to experiment. However, I found that in their discussion of anti-aliasing in the final “Fine Tuning” section, they omitted to mention that these icons looked a bit blurred in Firefox and Internet Explorer.
Take a look at a random repo in Firefox. The directory and file icons have blurred edges compared to their sharp look in Safari or Chrome.
|Safari: sharp||Firefox: blurry||IE9: unsurprisingly disappointing|
There must be a better way.
The icons look good in WebKit based browsers because you can control the anti-aliasing with
-webkit-font-smoothing, and switch off sub-pixel anti-aliasing. So the question is how to turn off sub-pixel anti-aliasing in Firefox and IE?
One of the things you learn when developing desktop applications is that sub-pixel anti-aliasing is only performed when you’re rendering onto the screen. If you render into an off-screen bitmap, you just get greyscale anti-aliasing — which is what we want here.
This suggested a hack: If you can render into an off-screen bitmap in a non-WebKit browser, then maybe it’ll look better. And fortunately, they provide such a feature, the
Here’s a proof of concept, which shows massively improved icon rendering in Firefox and IE9:
It’s still not as good as WebKit rendering, but should be more than good enough for many icons.
Although they don’t support
canvas elements, earlier versions of IE on XP render icons nicely because they don’t use the fancy font rendering of IE9.
You’ll need to do a little bit of work to make it work nicely in your application, as it doesn’t take advantage of libraries like jQuery nor take account of niceties like background colours. You’ll also want to remove the short delay, necessary for WebKit to load the fonts before rendering them on the
canvas, to eliminate that bit of flicker on page load.
There’s still a bit of work to be done, but it looks like web font icons can give good results in all modern browsers. Even if, predictably, you have to hack it a bit.
COMMENTSblog comments powered by Disqus