Notes on the interaction of ClearType with DXTransforms in IE7


Hello again, this is Peter Gurevich, IE PM for ClearType (among other things, as my blog posts have shown).  Today I want to give you a little heads up on an issue we have seen with DXTransforms and ClearType,  and let you know what we have done to ensure good readability of text in IE. 

During our testing we noticed that DXTransforms are sometimes applied to elements that contain text (now rendered in ClearType).  As our users also noticed, the ClearType text then looks extremely blurry – unfortunately these two technologies just don’t mix well.  This is because the basic convolution transform used by DXTransforms does not take into account the spatial nature of ClearType.

To ensure good readability of Text in IE, in the Release Candidate build we decided to disable ClearType on elements that use any DXTransform.  We will render the text in those elements as aliased text, in order to increase readability.  The rest of the text in the page will render with ClearType.  This may explain why some sites (or portions of sites) will render as aliased text, rather than ClearType.

Thanks, and I look forward to continuing to use your feedback to improve IE.

Peter Gurevich
Program Manager

Comments (53)

  1. Brett Merkey says:

    §

    Many uses of the graphic transformation engine result in problems in the readability of text. One of the most common is the very bad display of bold text by IE when alpha transparency is altered by CSS or script.

    The solution to IE’s alpha filter problem on the surface does not appear to have a direct connection.

    Giving an explicit background-color will correct the blurring. Example from production code:

    filter:alpha(opacity=100);

    opacity: 1.0;

    background-color: white; /*corrects IE’s ugly display of bold text*/

    Brett Merkey

    §

  2. Why on *all* filters – they don’t all affect text – we use shadow for example.

    You say u disabled it in the RC. Does that mean it’s going to stay that way??

    This is a step *backwards*.

  3. Aedrin says:

    Dao: Please troll somewhere else. It is not helping anyone.

  4. streaky says:

    It’s intresting, I just noticed this not 10 minutes ago whilst using scriptaculous’ Effect.fade, funny timing :p

  5. Dao Gottwald says:

    > Dao: Please troll somewhere else. It is not helping anyone.

    I’m going to stay, but thanks. Speaking of "help anyone", I think parts of Peter’s previous posting are defective to that effect. And I do think that should be corrected.

  6. Todd says:

    I use shadow effects on all popup menus, because it really helps make the popup menu stand out nicely from the rest of the page.  Havig ClearType disabled just because the Panel has a shadow applied seems like a mis-use of this new rule, especially since the shadow has no bearing on the text.

    Also, please do not suggest a workaround, such as wrapping the popup with another Panel, and applying the shadow to the wrapper.  That is the kind of jury-rig that IE7 is supposed to get developers AWAY from.

    Many thanks for listening.

    -Todd

  7. carter says:

    Essentially this change has made readability worse in a lot of cases by not using ClearType.

    Doesn’t this bug only show up where Opacity is thrown into the mix? For eg. as mentioned by Streaky, http://script.aculo.us home page while the text is fading in (hit refresh a few times to watch it). And for the record the bug still seems to be there in RC1 anyway where the text is bold – even though this text is now just using standard font aliasing (watch it closely).

    Please reconsider fixing this properly rather than just disabling ClearType and hoping for the best!

  8. carter says:

    Oh and to show your support for getting this fixed, please see the following Feedback item 🙂

    https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=185087

  9. Ron Evans says:

    So I’ve got a GEFORCE FX5200, and after the installation of IE7 RC1 I noticed the fonts looked really bad everywhere, in browser and out. Not sure what happened or if it is related to this post, but lowering the refresh rate from 72 to 60 seems to clean things up. The effect was some letters would look more antialiased than the others, kinda like what happens when you stretch a .gif. Can’t find anything else on this anywhere, anybody know what’s happening? I like the higher refresh rate butthe fonts just look awful.

    Thanks!

  10. Matt Ellis says:

    We noticed this on an element that had a fade effect. As a previous commenter noticed, explicitly setting the background colour sorted this out.

    If you zoomed in on the problem you could see that the anti-aliasing of the font smoothing was working with a black background – as soon as you set the colour to anything else, it works fine (with that colour). It looks like the rendering was internally happening on an improperly initialised background…

    Cheers

    Matt

  11. Tom says:

    Nice to see this issue is getting some attention. It particularly affects (well, affected) some of the Telerik ASP.NET form controls when used with transitions.

    If I understand right, "aliased" text is sort of smoothed in a similar way to "cleartyped" text anyway, so the net effect on the visual result should be pretty minimal, apart from the obvious one of cleaning up the nasty bug?

  12. Jerry Mead says:

    Presumably your "switch ClearType off in the presence of *any* DXTransform" accounts for the very poor IE7 user experience on http://my.msn.com/?

    If so, then this is a good illustration of why the ‘blunderbuss’ approach won’t work.

  13. Phylyp says:

    Peter, How about a screenshot or two demonstrating the problem, and how it looks after ClearType is selectively disabled [I’m at work and don’t have IE7 here]

  14. Kevin says:

    Can we please have ClearType (aka FuzzyType) turned off by default!

    As a System Admin, I don’t want to have to reset this to disabled on hundreds of machines!

    (This is based on our testing, that of the 25 users that are now testing IE7 (RC1), all of them requested to turn it off. Note, about half are on CRT, the others on LCD, but the choice was unanamous for turning it off)

    Is there a registry key, that we can push to our workstations?

    thanks, kev.

  15. Steve says:

    @Ron Evans

    You can make all the text look super clear, by turning off the (oh-so-badly-named) ClearType feature.

    This is what causes the blurry text, because they try to perform anti-aliasing across pixel RGBs.

    The ugly "rainbow" blur you get on all your text is the same problem you see on TV, when a person is wearing a shirt with thin black & white stripes, or a heringbone pattern.

    (note to anyone going on TV, don’t wear thin black & white stripes, you look like an electrified rainbow)

    We’re hoping that MS turns this feature off by default in the final install.  There are several active bugs in the Feedback site where you can vote for this.

  16. Brett Merkey says:

    §

    Here is a test page for the less radical but simply effective fix which does not also mess with Clear Type.

    [b]Alpha Opacity Transform Bug Fix:[/b]

    [url]http://web.tampabay.rr.com/bmerkey/examples/alpha-opacity-fix.html[/url]

    Brett Merkey

    §

  17. Peter, this change has a negative impact on FeedDemon, which uses "Gradient" transforms in many of its views.

    I’m in agreement with those suggesting that IE shouldn’t disable ClearType on *all* filters.  

  18. Nocturnal says:

    According to feedback: 185407, this will not be fixed in IE7 at all.  They’re completely done with almost everything so I guess RC1 is pretty much the final version that we’ll see.  I’m very disappointed that they made this decision to remove the ClearType feature one everything.  I never saw this distortion and I’d prefer to have it all ClearType or disable it altogether instead of having certain text CT and then certain non-CT.  Doesn’t make any sense to me.

  19. stephen says:

    After checking out the documentation on the next post, I saw a screen shot that signified everything that is wrong with cleartype.

    <http://img410.imageshack.us/my.php?image=blurrytypems3.png&gt;

    This image, was snagged from the web, with _NO_ cleartype turned on.  The dialog, in the screenshot, is from WindowsXP/IE7 with ClearType turned on.

    "Without a shadow of a doubt" as they say in the legal dramas I’ve seen, you can _CLEARLY_ tell, that ClearType (a.k.a BlurryType), is by far one of _THE_WORST_ user enhancements I have ever seen.  It reminds me of what I expect my sight to be, wearing someone else’s glasses.

    Find me *ANYONE*, that thinks the content of the dialog, is more clear, crisp, and readable than any of the surrounding code.

    *ANYONE*

    *ANYONE*

    *ANYONE*

    ?????????

  20. stephen says:

    Man this Blog software is bad!

    The real URL from above is:

    http://img410.imageshack.us/my.php?image=blurrytypems3.png

  21. Nocturnal says:

    I guess this is where I lose.  However, I prefer ClearType over standard alias fonts to be honest.  I really wish MS would just give us the OPTION to either enable it or disable it.  I’d prefer to enable it globally on every site I visit be it a site where text will be blurry or not.  I’m one of the anomalies, I guess you could say.

  22. Stephen, the link you posted has a bad screenshot; it appears to have been reduced in color depth (look at the posterization on the red X close button and blue shield), which has smeared ClearType’s antialiasing.

    As a comparison, see: http://www.tonyschr.net/images/cttest.png

    That has your aliased text, the smeared dialog, a normal dialog, and, at the bottom, normal web page text. Note that I use 120 DPI, which is why things appear a bit bigger.

    That said, ClearType does not look good on all displays, but on a good high-DPI LCD it really makes a difference (IMHO).

  23. RubenP says:

    Stephen, the dialog you show does indeed look blurred. But it’s not due to ClearType. The text in the dialog looks like aliassed text is being blurred or resampled. If it was ClearType, you’d have seen color fringing. It’s just a very poorly resized screen shot of a dialog with ClearType turned off. (If the dialog was using ClearType, it would have looked really awful, as ClearType doesn’t survive resampling.)

  24. Mike Dimmick says:

    Your wonderful new IE Developer Centre has aliased text all down the right-hand column, due to MSDN’s use of a Gradient DXTransform for the background of this right-hand column. This is consistent across all MSDN developer centres.

    It’s a regression from IE6, which didn’t have the smarts to do this, simply using the operating system ClearType setting globally. Don’t disable ClearType when a transform is involved to counter _some_ minor errors when the effect is to make _all_ uses of transforms look terrible.

  25. Mike Dimmick says:

    Basically I think we’re all arguing that we either do like ClearType and want it used everywhere regardless of a few minor colour fringing issues, or we hate it and don’t want it used anywhere. That means, _despite_ your clear love of it, that you _must_ follow the operating system’s common setting. Adding extra settings in all applications to disable it (Office 2007 is another culprit) is extremely irritating to a CRT user who hates it, who has to now turn it off in every application, not just globally.

    I’m an LCD user at home and love it there, and used to love it on the Diamondtron CRT I used to have. At work I have some pretty poor shadow-mask CRTs, and hate it.

    Please, just respect the user’s choice. It’s all about respect.

  26. Fduch says:

    The bad thing about ClearType in IE is that they seem to push it regardless of the system-wide setting.

  27. Fduch says:

    But the fact that they disable it regardless of DXTransform type is bad too.

  28. carter says:

    When IE7 gets installed, it’s ClearType setting should match the system setting, then you don’t have any angry users. But that’s not what this article is about.

    If ClearType is turned on it should stay turned on. Disabling it just makes pages look crap, especially on LCD screens. The link above to http://my.msn.com is a perfect example, it looks hideous!

    I think this should be put back to how it worked in Beta 3, and then a real fix should be implemented in one of IE’s first patches.

  29. verdy.p says:

    Unlike what stephen is saying, ClearType is a very useful enhancement and it has NOTHING in common with "blurrying" the image (and it is NOT subpixel sampling). What it is really is taking into account the difference of positions of the 3 color masks, so that text is rendered at the SAME pixel number, without requiring any subpixel, by computing each color grid separately: the source position is adjusted to the effective position on each color grid. So when drawing a black line on white background, the black remains black. For this reason, it is important to know exactly the relative position of each color grid, and that’s why ClearType must NOT be used on TFT, otherwise, the shifts of positions of the color grids will be visible. DON’T ENABLE ClearType on something else than LCD/TFT displays, because pixels don’t have exact positions on a CRT screen, as they are not aligned exactly with the hardware CRT pixel pattern (the electron beam will pass through approximate positions through the tiny holes on the CRT pixel grid before they reach the surface of colored luminescent phosphores, based on the difference of angle of direction of the electrons through the holes of the grid).

    Additionally, there’s antialising, but antialiasing is computed separately on each color mask and this is definitely not like blurrying: it adjusts the quantity of monochromatic color level to apply on each pixel, depending on whever the delimiting stroke border is nearer or farther from the surrounding pixels in the same color mask. This is like computing variable transparency on the stroke border. (On a CRT this transform can be applied, but the three color masks are computed at the same position. This is NOT ClearType but antialising.)

    Now pretend that ClearType is not enhancing the display: this is plain wrong! All notebook users with CRT/TFT displays DO really love ClearType because it really reduces a lot the otherwise very visible scaling effect (which is much less visible on a CRT, because a CRT naturally applies some level of blurrying, as the electron beam hits one side or the other of a grid hole, using random distribution around a central position).

    I suggest NOT suppressing ClearType, but applying it always AFTER DXTransforms, never before (because DXTransforms alter the distance between the sampled pixels, and the three colormasks no longer match the shifted positions of the hardware pixels if ClearType is computed before the DXTransform). For this to work correctly, a DXTransfom that transforms the pixel coordinates must be based on a transform matrix and the logical pixel positions must have extra subpixel precision. ClearType must be disabled only if there’s a transform that works by duplicating an already rendered text image into multiple physical positions in the image with the effect applied.

    Also a image rendered for ClearType must not be used in a screen capture to perform other effects, and must not be displayed on a TFT. ClearType must remain only as the final step for display; an effect that applies the value of a RGB pixel ignoring the fact that these pixels are NOT a single square but three distinct squares is bogous, such transform must consider each color mask separately, because the level of transparency applied to each color component is DIFFERENT for each colormask at the same RGB pixel position.

    Modeling a CRT/TFT display should not be done with the (R,G,B,Alpha) model, but with the (R,R.alpha,G,G.alpha,B,B.alpha) color model. When you transform this color model to (R,G,B,Alpha) and then to (R,G,B) with a composite Alpha, on the physical screen buffer, you loose the positional information which is important to keep the display accurate. Unfortunately, screen captures never get the separate transparency of each color component, and that’s why some effects have desastrous effects. It would not be a problem if we used a 48-bit color depth or storing each of the 6 components, instead of the 32-bit color depth for only 4 components.

    In a ClearType display, it is always wrong to consider that the composite Alpha can be transformed equally for the three color planes. Keep Alpha planes separate, and you’ll get consistent results (even in a CRT display).

    The alternative to the 48-bit (RGBA) model is a 32-bit (R,Ralpha,G,Galpha,B,Balpha) with 2 bits for Ralpha and Balpha, and 3 bits for Galpha. Or a 64-bit model, where each of the 6-planes component would be on 8 bits, and the reamining 16 bits could be used to store the background color used to compute the final RGB shades, so that transforms can later be applied on the rendered image when taking a capture of it in the screen buffer; but I wonder if there’s a graphics accelerator that uses such color model.

  30. verdy.p says:

    Note that ClearType is applied and works perfectly if you use one of the XP color themes. Only some myMSN themes apply color effects that disable ClearType (but then it is hideous on a LCD display, with black text on white background, in the columns, with horrible scales, and very poor).

    On a LCD/TFT the MyMSN "Space" color theme is extremely poor BECAUSE ClearType is disabled, even when the background is plain white and the text is black.

    So choose your myMSN color theme carefully.

    Personnaly I do like the "Windows XP Olive" color theme, where ClearType remains in action: the text in the column is much more readable like this.

    It seems that ClearType is now disabled if the background is a bitmap image, instead of a plain color or computed color shades.

  31. verdy.p says:

    However I do agree that IE settings about ClearType should take into account the local system settings, and not user preferences in IE or even on visited websites, because the same users may use his profile on various types of display when going to another host.

  32. John says:

    The same filter problem can be seen in several other places (bold text or alpha-blended PNGs with opacity, for example).  They all have the same workaround: set a background color.  While that is not an acceptable long-term solution, it at least is the kind of thing developers are used to when dealing with IE and we can create a page that does what we want (more or less).  With this change, that workaround is no longer an option.  That means we can either have nice-looking text or the possibility for opacity, but it is impossible to have both.  That is not acceptable.  And since the problem is not fixed everywhere (you have just special-cased a single example of a larger problem), this just introduces one more quirk in a long line of quirks that make it very difficult for developers to deal with IE.  Either fix it or leave it alone, but don’t start adding internal special cases that page developers have no control over.  Another possible option would be to introduce a text-rendering hint or filter (‘-ms-text-smoothing’ or similar).  You could even default it to ‘none’ when filters are involved if you absolutely feel you must.  But at least then it would be possible for developer’s to deal with the bug and not lose functionality.

  33. Jamie says:

    @verdy_p

    very nice story, but as a PC user for decades, I have never liked ClearType, on any PC, regardless of screen. 680×480 to 1600×1200 and beyond.

    I will never enable the setting myself, and don’t expect many people to keep it on either.

    Looks like fuzz on my screen(s), every one of them.  I too would appreciate a default off setting, and for it to follow my windows settings.

  34. grant says:

    This whole cleartype thing is messed up.

    Below are samples of images (of copy from NY Times website (all rights to NYT))

    First, cleartype off (best setting):

    Normal:

    http://img443.imageshack.us/my.php?image=ie7cleartypeoffrx2.png

    Zoomed In:

    http://img443.imageshack.us/my.php?image=ie7cleartypeoffzoomedcf8.png

    Now, with cleartype on:

    Normal:

    http://img443.imageshack.us/my.php?image=ie7cleartypeoncy1.png

    Zoomed In:

    http://img443.imageshack.us/my.php?image=ie7cleartypeonzoomediu1.png

    Notice how in the zoomed image, with cleartype on, how the black text, now shows as a muddy greeny-brown.  This is just like those PC printers, with cyan-yellow-magenta [BUT NO BLACK].  The printout looks ok from a distance, but when you are within 18" of it (e.g. same as a PC screen), it looks like garbage.

    I don’t think that the DX stuff is on the NYT, thus I think this setting is something that either needs more work, or needs to be off by default.  It just hurts my eyes to look at, because my eyes try desperately to make the text look "crisp", for legibility, therefore strianing them.  I got headaches reading the screen with this setting turned on, so I now have it turned off.

  35. I love cleartype, but noticed that it is disabled in IE7 on Vista RC1. After I enabled it it worked everywhere except on my Live Space.

  36. Jim says:

    @Stephen: I hate "clear" type on my CRT monitor.

    @verdy_p: I hate "clear" type on my CRT monitor.

    @Peter Gurevich: Get it?

    @All

    You tech-heads are so far removed from the average computer user. The average PC user with a CRT won’t know how to disable the shoved-down-your-throat default ClearType (ClearType is a misnomer BTW). This means frustrated and confused average users will be flocking to Firefox. I’ve already decided to make sure my out of town mother downloads Firefox before the FORCED automatic update to IE7.

  37. Nocturnal says:

    With FireFox, it’s always on.  Can’t this be the same?  Can’t you guys implement an on/off setting?  I’d prefer to have CT on ALL the time.

  38. carter says:

    Wow, some of you guys really don’t get it…

    If ClearType looks bad on your CRT then turn it off. CRTs don’t need ClearType for a font to look reasonably smooth, unless you use a small screen resolution like 800×600 (ugh – buy a new monitor already you cheapskate!).

    If you think ClearType looks blurry on an LCD then you either have a nasty cheap screen or you need to visit the optomitrist to get your eyes checked.

    And whether you like or dislike ClearType has absolutely NOTHING to do with this article, so move the discussion elsewhere!

  39. Romendo says:

    @carter: Why is it so hard for you to understand, that this whole ClearType issue does indeed depend on the user? I hate ClearType because it makes everything very blurry. All it does is to turn on extra subpixels. Since each subpixel has a different color it will produce color fringes on the (normally) black-on-white text.

    I have a NEC MultiSync LCD 2080UX running at a native 1600×1200 resolution. On XP, with ClearType off, everything is very crisp. On Vista, with ClearType on, it is just blurry. And this is a high-quality monitor.

    I also hate the inconsistencies:

    – Some web sites have anti-aliased and aliased parts on the same page.

    – You can’t turn off ClearType in Vista, not completely.

    – After turning off ClearType, the Personalization control panel is still anti-alised. So are *some* menus in WMP, the task bar, etc.

    I wish MS would fix these issues. An on/off switch should turn it on/off *everywhere*.

  40. Jack Chapple says:

    Well , how UTTERLY disappointing. This is indeed a step back. Where as before you could work around the issue by defining background-color.. Now – we have no choice in the matter!

    You are giving us aliased text and we have no choice.

    Congratulations Microsoft, you really know how to irritate us developers! 🙂

  41. Aaron says:

    Websites all over the internet are affected by this change in RC1, even including http://microsoft.com !

    Has anyone heard anything from the IE team or does anyone have any idea if this issue will be solved before final release?

  42. Yuhong Bao says:

    There is the ClearType Tuner, which is part of the Windows XP PowerToys or online at http://www.microsoft.com/typography/cleartype/tuner/Step1.aspx

  43. Mark Jones says:

    The clear type feature needs an off button or something else. I got headachs from reading web sites in the new IE7 RC1.

  44. download yahoo mobile messenger for pda