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.
Safari 4
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.
Safari 3
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?
Not bad, my young padowan. Very useful.
Real nice. Nice explanation with screen shots. I kind of just put it off and did not think there was a fix, thx for pointing it out to the rest of us.
Nicely done. Using black at 1% like that is also good forward-thinking, since Firefox 3.5 will have text-shadow implemented. I’ve seen a number of sites that implemented the old Safari 3 text-shadow hack that look terrible in FF 3.5.
This, on the other hand is just fine in FF 3.5, which I’m using to write this.
Very cool. Maybe this will be the motivation I need to create a reversed site design!
Beautiful fix! Thanks for the post!!!
@Mike Jones It doesn’t seem like a lot to do, but I really appreciate you saying thanks. It amazing how much a little gratitude greases the wheels of inspiration…
Great work Rogie, I hadn’t experimented using RGBA to alleviate this issue. Thumbs up.
@Sam Brown Yes, your fix was great and I was using it for a bit, but then realized that the issue was with the color,not with the shadow itself. Thanks!
While it is a wonderful technique, I’d say it’s a bit presumptuous to name it the “Komodo text-shadow Hack”.
I know many people have been using similar hacks, including myself, for a long long time now. Nevertheless, a good article and illustration, and thank you for spreading the word.
Am I the only one who dislike Safari4 and its rendering?
Nice fix! I like the one-liner, too — I can keep my browser-specific hacks to a minimum. I, too, shall call it the Komodo text-shadow hack :-)
Great minds, eh: http://twitter.com/makenosound/statuses/1246848046. Yours is a little cleaner than mind though.
Komodo text-shadow Hack == Great attention to detail.
Awesome work Rogie.
I never knew such a thing existed, never even noticed the difference in rendering in Safari until now.
I knew the text was fatter in Safari 3, and Saf 4 sorted that out. It’s this attention to detail that makes you stand out from the pack.
[...] See the original post: Safari’s text-shadow anti-aliasing CSS hack Revision · Komodo Media [...]
[...] Programming – Safari’s text-shadow anti-aliasing CSS hack Revision [...]
Holy heck! I’ve always wondered why Safari rendered it’s text fatter than other browsers. Now I know, thanks! I’ll add this to me reset style sheet.
I doesn`t seems to work in Safari 4 Developer Preview.
It shows here:
text-shadow: rgba(0, 0, 0, 0.0078125) 0px 0px 0px;
It looks just the same as the Safari 3 text rendering pic, with the text on the left.
Could it be a problem of the developer preview?
I didn’t have any lick with it until is changed it to:
text-shadow:rgba(0,0,0,0.01) 0 0 1px;
Have you tested this in Chrome 2.0?
Seems to not work out very well.
(but then again: dark shadow beneath light text in anyway seems to make the text rendering go bad in general with Chrome. Maybe it’s a but they’ll fix.)
[...] Safari’s text-shadow anti-aliasing CSS hack Revision · Komodo Media – font, hack, render, safari, shadow, text, weight [...]
could someone explain to me where to put this briljant piece of code. Is it in the html or in the CSS. I’m a iWeb user. I don’t know much of code.
many thanks
@Eric put this in the CSS
[...] von heller Schrift auf dunklen Hintergründen auch im Safari 4 nutzen will, sollte den Artikel “Safari’s text-shadow anti-aliasing CSS hack Revision” von Rogie lesen. Tags: CSS, Tipps Kategorie: Sideblog Ähnliche Beiträge Safari 3 beta [...]
[...] is a revised version of the technique above to create a slightly different anti-aliasing effect, especially [...]
[...] is a revised version of the technique above to create a slightly different anti-aliasing effect, especially [...]
[...] is a revised version of the technique above to create a slightly different anti-aliasing effect, especially [...]
[...] is a revised version of the technique above to create a slightly different anti-aliasing effect, especially [...]
Guys, if you take the screenshots into photoshop and zoom in, you’ll see safari 3 is using LCD subpixel rendering (you see the green and red fringes). The safari 4 screenshot is using standard CRT font smoothing (grey scale anti aliasing). I’m surprised none of you has noticed this
This hack is just disabling subpixel rendering. I’m on windows and safari 4 has these font options in its preferences. On mac this is controlled by your OS system settings instead.
It looks like safari 3 wasnt respecting your OS prefs and now safari 4 does?
Apple’s subpixel rendering makes the fonts too thick even on the “light” setting.
[...] is a revised version of the technique above to create a slightly different anti-aliasing effect, especially [...]
I also don’t see a difference until I set it to text-shadow:rgba(0,0,0,0.01) 0 0 1px; and even then It is only in Chrome that it works. Safari 4 and Firefox 3.5 both look really fat on my mbp.
Steve Smith from ordered list found something that worked for me in safari:
body { -webkit-text-stroke:1px transparent; }
@media only screen and (max-device-width:480px) {body{-webkit-text-stroke:0 black;}}
http://orderedlist.com/our-writing/resources/html-css/thinning-text-in-webkit-safari/
What we need now is to detect if the user is running OS X or Windows, as the standard rendering in Safari 4 on Windows is okay. It’s only a problem if they changed the preferences but I don’t think many people will switch to fat text mode. Any clever ways to do this in CSS or do we need to load extra styles just for Mac Safari?
Also, is there similar fix for Firefox on the Mac?
[...] is a revised version of the technique above to create a slightly different anti-aliasing effect, especially [...]