Comments for Cantina

Comment on Little Details: Subpixel vs Greyscale Antialiasing by Ricardo

Ricardo — Fri, 18 May 2012 22:14:19 +0000

There’s no difference on Chrome (18 OSX, 19 W7) or Safari on Mac.

Comment on Little Details: Subpixel vs Greyscale Antialiasing by tomelders

tomelders — Fri, 18 May 2012 19:53:55 +0000

I've been using this for a while, but instead I add text-shadow to the body like this

text-shadow: 0 0 0 rgba(0,0,0,0);

And I get the same effect. I've not noticed any performance issues thus far.

Comment on Little Details: Subpixel vs Greyscale Antialiasing by Matthew Crist

Matthew Crist — Fri, 18 May 2012 18:54:00 +0000

@evan – yes, though I don’t think of it as the best solution. as one of the commenters on HN mentioned, this issue is really a bug in webkit. Once they solve that (which it appears the latest Chrome has), the font will render consistently using the transform method. Unless you apply -webkit-font-smoothing: antialiased to the entire document it will still render inconsistently after the fix.

Comment on Little Details: Subpixel vs Greyscale Antialiasing by Evan Walsh

Evan Walsh — Fri, 18 May 2012 18:46:02 +0000

Have you considered just using -webkit-font-smoothing: antialiased?

Comment on Little Details: Subpixel vs Greyscale Antialiasing by Jay Levitt

Jay Levitt — Fri, 18 May 2012 18:36:54 +0000

On Chrome 19.0.1084.46 under Lion 10.7.4, the middle example renders with subpixel anti-aliasing no matter which state the red box is in.

Comment on Little Details: Subpixel vs Greyscale Antialiasing by Mandy

Mandy — Fri, 18 May 2012 17:16:16 +0000

It’s been said that in Opera, even 0,0 transform will distort the text. Another way I’ve gotten past this issue is to keep a text-shadow on the text (forcing it to anti-aliased) that is transparent or the same color as the background. Also be sure to utilize text-rendering:optimizeLegibility;

Comment on Little Details: Subpixel vs Greyscale Antialiasing by Nicholas

Nicholas — Fri, 18 May 2012 16:04:05 +0000

That's sound advice. It's also an option to apply an opaque background to the text element (or even text-shadow, if I recall correctly).

For subpixel calculation, the rendering engine needs the text and the background color—but, under hardware acceleration, the type with an alpha channel is cached as a texture. Knowing this, you can elect to force the element to always be grayscale AA, or you can ensure that your cached elements are opaque.

Comment on Little Details: Subpixel vs Greyscale Antialiasing by J

Fri, 18 May 2012 15:43:56 +0000

The ironic thing is that the font on this website is very difficult for me to read.

Comment on Little Details: Subpixel vs Greyscale Antialiasing by Brad

Brad — Fri, 18 May 2012 15:02:44 +0000

Congratulations Jodo, that's the most pedantic and useless comment I'll read all day and it's before noon.

Thanks for the helpful tip, Matthew. Good developers will gladly appreciate this knowledge.

Comment on Little Details: Subpixel vs Greyscale Antialiasing by Jodo

Jodo — Fri, 18 May 2012 14:48:47 +0000

This isn't front-end 'development'. It's front-end 'design'.

It has to do with how it looks, not how it is performing/populating, whether dynamically or from a feed.

As long as you are tweaking the way something 'looks' you're dealing with 'design presentation', not 'development'.