Font Smoothing Techniques? text-shadow rendering differently in Chrome 14.0.833.0 or higher

Question

EDIT:

We're in Chrome 19 now, and this still isn't fixed. Just a clarification: this happens in Chrome on Windows, not Linux or Mac. I think it has to do with Cleartype. Google, please fix this.

I've been using CSS3 text-shadow to emulate IE9's font smoothing on other browsers. Basically I've just set the text-shadow of a container's text to the container's background. You can see the behavior by setting text-shadow on a largish font element in anything lower than Chrome 14.0.833. The text looks smooth. Remove the text-shadow and the font looks jagged. However, in Chrome 14.0.833 (UPDATE: appears it's also "broken" in 14.0.834) this no longer works. The text-shadow property still works, but not in the way it did before. You can see the behavior here (just load it up with diff. Chrome versions) It seems as if in the older Chromes the text shadow began inside the text just a little and then spread out - which is perhaps why the text-shadow hack worked. In the newer Chrome, it appears the text shadow starts just outside the text, which is why it won't work. See what I mean here.

My question is basically: Is this a bug? Which is expected behavior, if either? Are there any other font smoothing workarounds I can use?

The W3C's spec didn't seem to say what the intended behavior is, though I did see that perhaps I should be using text-outline (which is kinda unsupported, which defeats the purpose)

Pencel

In previous (current) versions of Chrome I found text shadows to be utterly hideous. Since you know you're using text shadows for hacky purposes, it's very hard to judge whether this is a bug or an intended change. – Zeniazenith

By the way, which ClearType are you referring to? There's the classic one used by Windows XP and up, and the new one used by many WPF apps and IE9. – Zeniazenith

The new one. I'll update the question. – Pencel

Ah, suddenly your question makes a whole lot more sense (there's a text-shadow trick mentioned in the linked question) :) – Zeniazenith

@Zeniazenith yep, it does to me as well! :) I've heard of -webkit-font-smoothing or something; not sure if that's what I want. – Pencel

It seems -webkit-font-smoothing has stopped working in the latest version of chrome and text-shadow looks borked when using the smoothing trick. Best to forget about the whole thing and have it jaggy..... :) – Sawn

@MiG I don't want to "forget about it." I want a solution. :) – Pencel

Even CSS3Please shows the aliasing, so I doubt there is a way around it currently, aside from providing your own font. – Trevar

@Trevar hm, interesting. Providing my own font isn't a bad idea. As small as it seems, this is really annoying me! – Pencel

Answer 1

Well, I've figured it out, sorta. Annoying since I set a bounty, but whatever. I'm fairly certain this is not a bug and it is expected behavior - especially since we've seen a few more iterations of Chrome and it's stayed the same. A few different methods work. I wrote up a bit for my blog, you can see the full article here, but here's the bulk of it:

First, I tried the -webkit-text-stroke:1px #000 where #000 is the color of the text. But this style is meant for use where the color of the text is different from the stroke, for a nice text-outline. When both are the same color, it looks...odd. I'm not sure why; I'm no font-rendering expert. You can see the behavior in the picture after the article.

Next I tried a simple text-shadow:#000 0 0 1px where #000 is the same color as the text. Due to the same Chrome 14.0.833+ problem, this still leaves the font looking somewhat jagged. It's better than just plain text, however.

Next I tried a combined the two attempts above. This looks a little bit better, but it bulks up the text as it essentially adds 2 pixels to the thinkness of the text.

Lastly, I tried applying two text-shadows: text-shadow:#000 0 1px 1px,#000 0 -1px 1px > > where #000 is the color of the text. What this does is apply two text shadows, one of which is pushed down a little and the other pushed up. This way, the text shadow covers the jagged edges. It bulks up the text a little but definitely smooths it out.

Depending on the size of your text, different methods work. Smaller (but still jagged) text could use the text-shadow, larger text could use the shadow/stroke method, and very large text could use the dual-shadow method. Of course the larger the text the less noticeable the extra few pixels become. You can see all the different methods here

Pencel

Thanks. I have had success with a slight variation: -webkit-text-stroke:#000 .5px; Stroke widths between .3px and .5px seem to work nicely. – Behah

Answer 2

Okay, i've spend quite a bit of time on this and this is what it comes down to: It's a bug.

First of all, -webkit-font-smoothing:antialiased; only works for Mac, not Windows.

I'm on Windows7, I've created a layered Pixlr image with screen shots of a JSfiddle I made that had 4 different elements with different text-shadow applied to each. You can clearly see that text-shadow has changed since Chrome13 and Chrome 14.0.835. I had to switch between the Beta and Dev channel a couple of times because I messed up, uninstalling etc. ugh.

Download the layered Pixlr image file I made from:

http://dl.dropbox.com/u/7353877/Chrome-text-shadow-v13-v14_0_835.pxd

Then go to http://pixlr.com/editor/ and choose to open file from computer, open the file. Now in Pixlr, zoom in to the four rows of text, in the layers panel on the top layer click the checkbox and uncheck it, then check it again, do it over and over and see how drastic the change to text-shadow is.

This should be submitted as a bug. A link back to this page could be used to show the effect, if needed.

JSfiddle (The JSfiddle I used in the screenshots) http://jsfiddle.net/nicktheandroid/Xkp9q/

I put a piece of pie in the microwave an hour and a half ago.... it's cold :(

Anesthetist

Thank you so much for your time spent on this. I'm marking my post as answer because of the "fix" I supplied but you totally earned the bounty. Thanks again. – Pencel

yay bounty! I submitted a bug report to Chrome code.google.com/p/chromium/issues/detail?id=91899 – Anesthetist

awesome; thanks for filing that. I'll def. keep an eye on it. Weird also, I only just thought to upvote your answer (lol!) – Pencel

ha, i was just looking over the bug report, and after reading your comment above, just thought to up-vote your question lol.. geniuses. – Anesthetist

Answer 3

-webkit-font-smoothing:antialiased; 

might work for you

Birck

Answer 4

text-shadow: transparent 0px 0px 0px, #000 1px 2px 1px;

OR

text-shadow: transparent 0px 0px 0px, rgba(0,0,0, 0.75) 1px 2px 1px;

Tested and works fine in different versions of Opera, Chrome, Safari & Firefox.

Brout

Answer 5

YES! I've found a solution for this problem. It's weird, but it works for me.

So, to make it work, put this style on the element you want to smooth:

-webkit-border-bottom-left-radius: 1px;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01);
overflow: hidden;

I've put up a sample HTML file with just this style so you can quickly test it.

Guttate

Your workaround doesn't work, your examples look the exact same, they're both jagged. I'm on Windows 7. – Anesthetist

Answer 6

This was indeed how a lot of webfonts (Google Webfonts and also highly professional fonts from Typekit etc.) looked in Firefox (left) and Google Chrome (right) on Windows systems (and eventually elsewhere too). No joke! To clarify this: The only browser that completely messed up Google Webfonts was Google’s browser Chrome. How sick is that ? In 2013 Opera browser has switched it’s rendering engine to webkit (=the rending engine in Chrome), so this problem exists in Opera too.

more : http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

Gabar