Ben Summers’ blog

Avoiding the blurs: web font icon rendering

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 <canvas> element.

Here’s a proof of concept, which shows massively improved icon rendering in Firefox and IE9:

Web font icon canvas rendering proof of concept

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.

 

COMMENTS

blog comments powered by Disqus

 

Hello, I’m Ben.

I’m the Technical Director of Haplo Services, an open source platform for information management.

 

About this blog

 

Twitter: @bensummers

 

Subscribe

Jobs at Haplo
Come and work with me!