I want to talk about a fix I found for Safari 3 and 4 for it’s issues with bad text-rendering with text, especially light text on a dark background. Previously, web developers have been using a text-shadow hack explained here.
I learned of this technique through Bryan Veloso, who was using a black text shadow with zero blur and zero offset to force Safari’s sub-pixel rendering of text to not appear as a bit more legible, especially on dark backgrounds. Having known nothing of this (I know right, where was I?), I fired up both Safari 3 and Safari 4 to see what was going on. Let’s check out how Safar 3 and 4 render light text on a dark background.
Out of the box, Safari 4’s font rendering looks good with both light on dark text as well as dark on light text as seen here.
Now I know why this hack was created and you can read more about it here. As you can see in the light on dark background text below, the text is bulky, and almost bleeds the letters together. It looks nothing like the sweet text on the right, which looks clean, crisp and legible.
The original text-shadow hack
Let’s see the original text-shadow hack, implemented by the following CSS:
text-shadow: #000 0 0 0;
Safari 3 with text-shadow hack
Safari 4 with text-shadow hack
So the fix that fixed Safari 3 seems to have gone a muck in Safari 4. Here’s where the revised fix comes in. I read over in the comments on Sam Brown’s site that you can apply a text shadow similar to the background color on the offending areas to fix this – in this case, any white background area. I tried it and he’s right, it works like a charm. However, I thought up a neat little solution, which I’m sure others have thought of too that fixes both scenarios with one rule:
text-shadow:rgba(0,0,0,0.01) 0 0 0;
The premise is simple: use an extremely transparent black (1% visible to be exact). This way the black doesn’t bleed around the text as seen in the light background case, but is forces Safari to render the text in a more legible manner. Now, let’s look at what it looks like:
Safari 4 with revised “Komodo” text-shadow hack
Safari 3 with revised “Komodo” text-shadow hack
It’s beautiful! I name it the “Komodo text-shadow hack” or KTSH for short.
That seems like it does the trick to me, what do you think?