Hacker News Reader

Comment by stianan | Hacker News Reader

Why is text aliased and ugly in Firefox 4?

This is usually a graphics driver problem. Try updating your drivers or disable hardware acceleration in the Firefox preferences (under Advanced: General: Browsing).

Disabling hardware acceleration worked for me.

I'm on Windows 7, and now, with it disabled, it looks like Cleartype is working as it should. With hardware acceleration enabled, it looks like Cleartype isn't working, but Firefox doing its own anti-aliasing, and doing a worse job of it. Does that sound reasonable?

I don't understand why getting anti-aliasing right is so hard. Just render text a few times bigger, use some kind of low-pass filter (box filter will do) and down-sample it. It's what every graphics program does. That would put an end to using Photoshop or Flash for headlines just to make them look decent.

Because that's a very CPU and memory inefficient way of doing it. If you value performance, you don't want to render something "a few times bigger" filter it and then scale it down. You want to render the text and anti-alias it at the same time. And that's not a trivial thing.

Cleartype uses subpixel rendering as well, I'm not so sure you can achieve that by simply down-sampling a larger render.

Actually, while it will do that it also tries to shift edges to lie on pixel boundaries when possible. This distortion can make edges look clearer though it also looks brutal with certain type faces. Most people like whatever they are used to.

wladimir: Up-sample/filter/down-sample is the standard way of doing it, and any other way will just be an optimization of that transformation.

For graphics, yes, but not for fonts. If you scale text linearly, it just looks bad at smaller sizes, which is why vectorized fonts come with plenty of rendering hints. Add to that subpixel rendering and a lot of other typography rules, and font rendering is suddenly pretty difficult to get right.

Try it yourself, make an image of some text in 80px, shrink it 8 times, and compare that to the same text rendered as 10px. You'll notice that the shrunken image is harder to read than the actual text.

With hardware acceleration, Windows DirectWrite is handling the text rendering. Unfortunately, there are bugs in many graphics drivers that interfere with this.

Update after talking to Mozilla graphics hacker Joe Drew:

What I wrote above used to be true, but in current versions of Windows/Firefox these bugs have been fixed, and what you're seeing is probably the intended rendering.

The reason it looks blurry is that Microsoft's accelerated DirectWrite API uses different font rendering than the old GDI API. The DirectWrite rendering is less agressively hinted, and looks more like Mac OS X font rendering.

If you don't like the look of the text rendering on our system, try: http://www.microsoft.com/typography/ClearType/tuner/tune.asp...

> The reason it looks blurry is that Microsoft's accelerated DirectWrite API uses different font rendering than the old GDI API.

Oh. Well, that sucks, because it means that I have to choose between hardware acceleration and readable fonts.

> If you don't like the look of the text rendering on our system [...]

That makes no sense. First, it's for Vista and not Windows 7, and second, I've already tuned Cleartype on my system. Even if it's possible to change my settings so it looks good in Firefox with hardware acceleration, changing it means it will look bad everywhere else.

Mozilla folks are looking into fixes for this:

https://groups.google.com/d/topic/mozilla.dev.platform/M4IBj...

I'm afraid that is just how it is. Hardware-accelerated font rendering through DirectWrite (in both FF4 and IE9) is of a lower quality than the software (GDI) rendering.

The only solution: disable it in Options. Sux.

It's really annoying. People say it looks more like Safari. I don't agree, it's just fuzzy and ugly. I was trolling the internet to find a solution to no avail.

Reply on news.ycombinator.com