Login/Register
IE 9 does not use sub-pixel antialiasing under certain conditions
Asked Answered
Solved internet-explorer-9antialiasingcleartypetext-rendering
T

7

16

[Original title: IE 9 text renders very poorly; is there a workaround?)

IE 9 is rendering the text in my application very poorly. The problem is not in my monitor's Clear Type settings, since IE 9 in compatibility mode, Firefox, and Chrome all render text nicely. Here's a side-by-side comparison of how the text is rendered with IE 9, IE 9 in compatibility mode, and Chrome:

IE 9

IE 9 Compatibility Mode

enter image description here

I tried applying this answer, but it doesn't seem to apply to anything after IE 7. Does anybody know of any workarounds we can apply to our site to fix IE 9's bad text rendering?

Edit:

I've boiled down the problem page to the bare essentials. As you can see, it doesn't take much to reproduce. Be sure that IE has a browser mode if IE9 and document mode of IE9 standards:

<html xmlns="http://www.w3.org/1999/xhtml">
  <body style="background-color: rgb(30, 34, 59); color: rgb(255, 85, 0); font-size: 20px">
    Home
  </body>
</html>
Tempest answered 5/4, 2011 at 21:29 Comment(6)
You are using the final release of IE9? – Kob
I tried in IE 9.0.8112.16421 RTM and it didn't appear blurry. My resolution is 1920x1080 on Windows 7. But then again the sample above from a local file t.html was in quirks mode by default (check with F12) – Kob
@David, if you switch it back to standards mode in that same F12 interface, can you see the issue I'm describing? – Tempest
@Jacob, yes in IE9 standards mode I can see the browser switches over into a different mode and everything is rendered "blurrier". I added some more links to my answers below about IE9 and rendering modes. – Kob
Here's a screenshot of the rendering differences using the example mark-up above. Note the "Document Mode" of the top window is "IE9 standards" and the bottom window is "Quirks". – Arthropod
@Marcel, the bottom does look better, however I'm not sure we want to also pay the penalties of quirks mode; we're excited to finally have rounded corners, for example. – Tempest
A
3

It seems setting opacity:.9999 on body renders the text in IE9 standards mode a lot more similar to how it does in Quirks mode.

Arthropod answered 18/4, 2011 at 12:49 Comment(2)
A patch has been released by Microsoft to fix the font's in IE9 on Windows... support.microsoft.com/kb/2545698 – Kob
I d/led the patch, however, it said that it had already been installed. But the fonts still look blurry. – Cellulitis
K
13

Short answer: this is an issue when you specify font sizes in pt (points), rather than pixels.

So what happens is that the new IE9 rendering engine uses DirectWrite, which won't snap to the nearest pixel as it did with GDI+, so if your pt size doesn't map to a whole pixel number, it will draw it exactly that way, which makes it appear blurry.

The IE8 compatibility mode wouldn't suffer this issue as it uses regular GDI rendering that we are used to.

So check out all your style sheets etc and if you are asking for point size font's, that's exactly what will be given in IE9, and depending on your font used etc, your point size might or might not map to a crisp and clear size.

This is explained in detail here:

Kob answered 12/4, 2011 at 18:14 Comment(3)
Nice link. However, my style sheets are all using pixel-based font sizes, so I don't think that's the cause. The text is specifically 11px in my sample images. – Tempest
Care to share a simple test case that reproduces? – Kob
I've extracted a sample from the page. Look at how bad the "o" and "e" look, in particular. – Tempest
A
3

It seems setting opacity:.9999 on body renders the text in IE9 standards mode a lot more similar to how it does in Quirks mode.

Arthropod answered 18/4, 2011 at 12:49 Comment(2)
A patch has been released by Microsoft to fix the font's in IE9 on Windows... support.microsoft.com/kb/2545698 – Kob
I d/led the patch, however, it said that it had already been installed. But the fonts still look blurry. – Cellulitis
E
1

IE9 in standard mode uses sub-pixel addressing for text. One can say that it "smooths out" text characters, or you can say the reverse, i.e. it "blurs out" the characters. It is essentially the same thing.

Personally I do not find any easily-perceivable differences between your three images, and actually prefer the first one. However, it depends on personal preferences.

I've searched the web a bit, and it doesn't seem to be a way to cleaning turn off sub-pixel rendering on IE9. This link might interest you: Disable Cleartype (text anti-aliasing) in IE9

In WPF, there is an option to turn off sub-pixel font rendering and force letters to "snap to pixels". But IE9 doesn't seem to have such a switch.

However, my recommendation is: is it that big a problem that you'd want to do it in the first place? If sub-pixel text rendering gives you very ugly output on your site (are you using lots of very small type?), perhaps you'll need to rethink your site layout in the first place. Type that is so small that sub-pixel rendering makes them unclear is best avoided in a web site.

And there is no telling when other browsers will add sub-pixel rendering to text in the future -- in fact FF4 already uses Direct2D, but may not be using DirectWrite.

Exhilaration answered 18/4, 2011 at 4:4 Comment(4)
I like anti-aliasing, just not the way that IE 9 does it. I'm frankly surprised that anybody would think that the first of the images is clearer; the l's in "smells" aren't even the same size. – Tempest
@Jacob, there you go. We have different preferences. And I am sure your users will all have their own preferences. Personally, I like the first version better because it is more "refined"... For example, the other two are visibly less packed-tight because you can't do the best kerning without sub-pixel resolution. Also, the "E" in "IE" in the other two is a bit too wide. – Exhilaration
No, I don't really think it's a difference of opinion. Anyone who has been through typography would probably stab themselves in the eye after seeing the first of these, which appears to be melting if I look at it closely. Thankfully, I have poor eyesight! :) – Tautologism
It could be just me! I like the first because it looks more "refined". The second appears to be clearer since it is a bit more spaced out, but I have no trouble reading the first. Can't really see the melting effect... – Exhilaration
A
1

Internet Explorer 9 seems to stop using sub-pixel antialiasing under really random conditions. For example, here is another example that triggers it (I assume there are more):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD>
<TITLE></TITLE>
<BODY>
Outside the div - with sub-pixel AA. :)
<div style="border-radius: 1px; overflow: hidden;">
Inside the div - no sub-pixel AA. :(
</div>
</BODY></HTML>

The text inside the div will not be rendered with sub-pixel ("colored") anti-aliasing, but the text outside of it will. Both the border-radius and the overflow declarations are necessary to trigger the bug.

(Can someone please try if it happens on their system and leave a comment? I'd be interested to know if the bug is only triggered on certain system configurations.)

If you switch the Document Mode in the IE Developer Tools to anything but "IE9 standards", the issue disappears.

I'm personally almost willing to live with it, but if it really bothers you I'd suggest stripping down your stylesheet step by step to track down what triggers it.

Adipose answered 28/1, 2012 at 17:37 Comment(1)
The bug exists, It was causing me some headaches. Removing overflow: hidden fixed the issue. I'm running Win7 on Parallels but it was also showing on a friends PC. – Keynes
C
1

The only way I can make the fonts look good is to fall back to IE8 functionality via:

<meta http-equiv="x-ua-compatible" content="IE=8" />

The Microsoft update http://support.microsoft.com/kb/2545698 had already been installed, and I already use font-size: 11px;

The opacity:.9999 solution was better then nothing, but not as good as what the IE8 mode shows.

Cellulitis answered 20/6, 2012 at 5:3 Comment(0)
K
0

ClearType font rendering is used in all IE9 document modes; sub-pixel positioning is used only in IE9’s default standards mode. IE9’s compatibility modes—Quirks, 7, and 8—use whole-pixel text metrics.

So try switching your doctype to use Quirks mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

or

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or one of the compatibility modes.

More info from MSDN

Kob answered 13/4, 2011 at 5:42 Comment(4)
We don't want to completely disable all of the new functionality introduced by IE 9 (for example, we want to have the CSS rounded corners). Isn't that what quirks mode would also do? – Tempest
You can use F12 to see what the current document mode and browser mode of the site you are viewing is. You can also switch between the modes in the F12 panel. I find that even visiting wikipedia is blurry (IE9 standards mode by default). This is really a horrible default on MS's part. blogs.msdn.com/b/ie/archive/2011/03/24/… – Kob
@David Freitas: this is an insane recommendation, it's like answering "I miss table based layouts, as they were circa 00`, how can I force my site to render just as inconstantly as it did back in the day?" – Stanfordstang
@TechZilla, well this is IE we are talking about, what is sane about that? – Kob
O
0

If you need to use IE and you hate that smoothing like on this image https://i.sstatic.net/SViG0.png Try turn ON Compatibility View (ALT+T to show Tools menu)

Offering answered 19/5, 2011 at 6:51 Comment(1)
This isn't about me seeing the text as I like it in my browser; it's about making sure that users of our applications see good text rendering. – Tempest

© 2022 - 2024 — McMap. All rights reserved.