Bakgrunnen for denne problemstillingen er oppsummert i en ieblog på msdn.com:

Notes on the interaction of ClearType with DXTransforms in IE7

(…)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.

DEMO for IE6 og IE7 (og IE8)

Jeg har satt opp fire tester som viser tekst som er lagt over et bilde. Teksten ligger på en hvit, transparent bakgrunn ( filter:alpha(opacity=70) ).

Bildetekst for bilde i demoen for ie og cleartype. Denne bildeteksten viser hvordan cleartype er slått av for ie6 – 7 fordi alpha filter er tatt i bruk (i css) for å sette en gjennomsiktig bakgrunn. Denne teksten har ingen fix for mangel av cleartype.

Bildetekst for bilde i demoen for ie6-7 cleartype. Denne bildeteksten viser hvordan cleartype er slått av for ie6 – 7 fordi alpha filter tatt i bruk (i css) for å sette en gjennomsiktig bakgrunn. Denne teksten har en javascript fix for mangel av cleartype:

$('#myDiv').myClass({
    cleartype:  1 // enable cleartype corrections
});

Bildetekst for bilde i demoen for ie6-7 cleartype. Denne bildeteksten viser hvordan cleartype er slått av for ie6 – 7 fordi alpha filter tatt i bruk (i css) for å sette en gjennomsiktig bakgrunn. Denne teksten har en css fix for mangel av cleartype. Position:relative på p-elementet hjelper for IE8.

Bildetekst for bilde i demoen for ie6-7 cleartype. Denne bildeteksten viser hvordan cleartype er slått av for ie6 – 7 fordi alpha filter tatt i bruk (i css) for å sette en gjennomsiktig bakgrunn. Denne teksten har egen div for den transparente bakgrunnen. Teksten ligger en annen div, og er plassert "over" bakgrunnen. Løsningen er jeg ikke spesielt stolt av, men den er en mulighet. Teksten kommer uansett godt ut av det fordi den ikke lider under at cleartype er slått av. Mer informasjon kommer.

Relaterte eksterne lenker som omhandler IE og cleartype

http://www.malsup.com/jquery/cycle/cleartype.html?v3

http://mattberseth.com/blog/2007/12/ie7_cleartype_dximagetransform.html

http://davidchambersdesign.com/captions-over-images/

Leave a Reply