Using Internet Explorer filters and ClearType

Question

I've read at length about issues with IE disabling ClearType when using filters, and I'm hoping that my conclusions are wrong. It seems that it is impossible to turn ClearType back on after applying a filter (e.g. Shadow or Alpha). Is that so?

With every other browser supporting text-shadow now I'd really like to be able to use it, falling back on IE's Shadow or DropShadow filter when necessary. But applying any filter to text makes it look terrible.

Is there a way to enable both ClearType and filters in Internet Explorer?

Some sources:

• http://blogs.msdn.com/b/ie/archive/2006/08/31/730887.aspx
• IE is losing ClearType
• Correcting IE Cleartype/Filter Problem when Animating Opacity of Text with jQuery

Answer 1

Is there a way to enable both ClearType and filters in Internet Explorer?

No. Filters came before ClearType support in Internet Explorer and were never designed to work with partial transparency. The issue in the blog post you linked to was never fixed and, with CSS3 improvements in the latest browsers, the future's bleak for filters.

There are some tricks you can use to approximate text-shadow in Internet Explorer, however. The varying approaches involve positioning a copy of the element directly below, containing the same text but applying the Blur or Shadow filters.

Double-markup method, works for IE 6-9

Assuming you're applying the shadow in moderation, for example to a section title or photo caption, you can duplicate the text into two separate elements and position one at the back, blurring it with a filter:

<h1><span class=".shadow">Fear my shadow!</span><span>Fear my shadow</span></h1>

body { background-color: lightgreen; }
h1 {
    color: white;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    text-shadow: #333 2px 2px 3px;
    padding-bottom:2px;
}
.shadow { display: none; } /* For non-IE browsers */
.ie > h1 > span {
    position: absolute;
    color: white;
}
.ie > h1 > span.shadow { 
    display: inline-block;
    zoom: 1;
    color: #333;
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}

Working example: http://jsfiddle.net/PdZxB/

For IE6, you need to omit the direct-descendant selector >. It doesn't look so great in IE 6, though.

---

Easy method — using :before and attr()

By far the easiest approach is the one that requires no JavaScript, but works only in IE 8 and IE 9 because it relies on the :before pseudo-class and CSS attr() function. It does require targeting CSS towards specific versions of IE, though.

h1 {
    color: white;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    text-shadow: #333 2px 2px 3px;
    padding-bottom:2px;
}
.ie8and9 > h1 {
    zoom: 1; /* make element have layout */
    color: #333;
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}
.ie8and9 > h1:before {
    position: absolute;
    color: white;
    content: attr(data-innertext);
}

Working example: http://jsfiddle.net/zFYga/

A step-by-step guide to this method is located at http://www.useragentman.com/blog/2011/04/23/css-blurred-text-shadow-in-ie-part-i/.