Click for text version
Magnus Wedberg / home

Antialiased text, corners etc. in IE

Transparency in browsers
Generally, transparency on the web means either on or off. For example, in a GIF file, you can define one color as transparent, but you cannot define grades of semi-transparency. In a JPEG file, you cannot get even on/off ("1-bit") transparency.

A couple of years ago the PNG format was defined. PNG (pronounced "ping") is the replacement for the aging GIF format, and among other things has transparency support. PNG supports 8-bit transparency, whch means 256 levels. Unfortunately not all browsers support the PNG format fully, especially not the transparency channel (called "alpha channel"). This is especially true for Internet Explorer, which has a long and proud tradition of not supporting this. *)

The problem
A very common problem in web work is to put text on an image. Ideally, this should be as easy as this:

One image containing both text and background image. The text has smooth, anti-aliased edges. But what if we also want this background:

and this:

Of course we can create lots of different images, all containing both text and background image. But then we get very little flexibility as we can't just drop in any image, and we can't move or fade the background image behind the text. So, normally, we'd have to resort to use normal text on top (losing control over both antialiasing and font) or use the PNG format mentioned above (losing Internet Explorer compatibility, meaning 90% of the world). Something else has to be considered.

Something completely different
Let's consider another approach. Let's look at the text a little closer (and let's make it black):

...in fact, let's look at it really close:

It consists of sixteen shades of grey on a white background. The thing is, this can be reduced to even less, four shades still looks good:

Considering this, we can use CSS and normal GIF images to create anti-aliased text... in almost all browsers.

Transparency, reloaded
Let's discuss transparency functions not directly related to images. There has been talk about transparency in CSS for I don't know how long; the official CSS property is "opacity", with the value a fraction between 0 and 1. No browser (except Opera 9, which as of writing this is in beta) supports this however. Mozilla based browsers use the "-moz-opacity" property, Konqueror uses "-khtml-opacity", and IE uses a "filter" property hack. However, the important thing is, as CSS allows you to stack properties, you can use them all.

Back to our image. White background, four shades of grey. The shades are distributed like this:
(this is 90% black in the combined image)
(53%)
(27%)
(9%)

Now, let's simply make the white background in each image transparent with normal 1-bit GIF transparency, and set the appropriate transparency level on each of these images, and finally stack them on top of each other. I use this code:

<div>
<img style="-moz-opacity:0.9; -khtml-opacity:0.9; opacity:0.9; filter: alpha(opacity=90); position:absolute;" src="docs/Antialiasing/pics/6.gif" />
<img style="-moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; filter: alpha(opacity=50); position:absolute;" src="docs/Antialiasing/pics/7.gif" />
<img style="-moz-opacity:0.3; -khtml-opacity:0.3; opacity:0.3; filter: alpha(opacity=30); position:absolute;" src="docs/Antialiasing/pics/8.gif" />
<img style="-moz-opacity:0.1; -khtml-opacity:0.1; opacity:0.1; filter: alpha(opacity=10); position:absolute;" src="docs/Antialiasing/pics/9.gif" />
</div>

Mouse over and out on this resulting four-image composite to get different background colors!

Simple, eh? And these monochrome GIF images only take up 1188 bytes, for all four of them. This principle can of course be extended to lots of things, anti-aliased corners, lines, the lot. Go crazy!




(* Footnote: Internet Explorer 5.5 and 6 can support PNG with alpha channels using a very ugly hack including DirectX filter functions, but it has some problems. It is outside the scope of this article. IE7 supports Alpha channels natively, but the beta still seems a little buggy with regards to this.


photos articles services about