Full CSS3 Text-Shadows — Even In IE

In the last few months, I have written two articles where I discussed a few strategies to do CSS3-style transforms in IE (CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript? and CSS Blurred Text-Shadow in IE — Part I). While demonstrating the possibilities to creating a varied range of text-shadows in IE, there wasn’t any silver bullet that produced what I considered one of the Holy Grails of CSS polyfills: a method that could take an existing page and render multiple CSS3 text-shadows in IE with few, if any, changes to the CSS code. To that end, at the end of my last article, I dropped the gauntlet at the end of my last article and challenged the web development community to help come up with a better solution. I got a few takers, but one stood out from the rest. Kazumasa Hasegawa submitted his script and blog post (in Japanese and then in English) about his script that could do exactly what I asked: full CSS3-style text-shadowing in IE. It can do multiple blurred and unblurred shadows per block of text. The only caveat is that one would have to set the CSS selectors inside a JavaScript file. However, the code was extremely well written, and it was very easy for me to refactor it to become a plug-in for my CSS3 polyfill library, cssSandpaper. Now, all a developer has to do now is include a few <script> tags into the <head>, and BAM!!! — instant text-shadow goodness in IE7+.

Yeah Whatever! Show Me Proof!

If you are viewing this page in IE7+, here are the droids you are looking for:

Okay, What Are The Caveats

Like any polyfill solution, there are a few things one has to keep in mind when using a solution like this.

As you can see from the above examples, blurred text-shadows in IE look slightly different because of the different algorithm IE’s Blur Visual Filter uses compared to what CSS3 text-shadow uses. This is not so obvious on the second example above, but becomes more obvious the more blurred text-shadows are applied on the same text. For most applications, this is acceptable, but for those of us who like to pixel-bitch (i.e. complain when something is not pixel-perfect), you should be aware of this difference (No, I don’t know where I got that term from. I may have made it up. Anyone else heard of it before?)

Creating a large text-shadow blur (i.e. greater than 70px) on a large piece of text can cause Internet Explorer’s rendering engine to slow down when the text is scrolled into view.

Sometimes IE cuts off the shadows when the line-height is too small:

The letter 'P' and other letters with descenders may get cut off if the line-height is not set to be larger than the actual font-size.

In IE7-8, elements above text-shadowed text that have a line-height property measured in em units may effect the text-shadow in IE. If there is a problem, the shadow is one pixel off from where it is supposed to be, as shown in this screenshot:

Examples of a correct looking text-shadow (left) and a text shadow that is a pixel off (right).

As you can see from the screenshots above, this problem is much more obvious when there is no blur-radius in the text-shadow. I am trying to see if I can work around this problem, but it looks like it has to do rounding errors when IE converts em units to pixels. If you have a lot em units in your document, you may want to consider using my non-JavaScript solution when using a single, non-blurred text-shadows.

Sometimes, in order for the text-shadows to render correctly when using ClearType, you may have to use the -sand-chroma-override CSS property on the HTML you applied the text-shadow on. This property is used by cssSandpaper to fix a problem with ClearType and IE’s Visual Filters, as described in my previous blog post, How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together. Most of the time, this property should be set to be the color that that is behind the text value of the background of the text, but sometimes you will have to look at the outline of the texts and the solid shadows to get an idea as to how it should be set. Let’s take, for example, the “Law and Order” style text at the top of this page. We used the following CSS to produce the text-shadow on the “CSS3” text:

Why did I end up using #666666? It is a greyscale color that is roughly between the brightness of the off-white text and the blue shadow. If I set it to black instead, the outline of the text’s first dark text-shadow would be blocky, as seen here:

-sand-chroma-override: #000000

-sand-chroma-override: #666666

Scale 100%

Scale 300%

What you set this value to will depend on the text-shadow recipe you are using and, to paraphrase my Mathematics text-books in college, I leave it up to the reader to play around with the -sand-chroma-override value to see what looks best in which situation.

In Conclusion

This script opens up a lot of great possibilities for styling text in IE. There is still some work to be done to make the script even better with some inevitable bugs that will need to be fixed, and I will continue to work on it to make improvements. If you see areas for improvement, or any bugs that you see with the code, please make a comment on the cssSandpaper issues page on github. If you have something to contribute, I would be most grateful. :-)

Other changes that I am planning for cssSandpaper will include:

Choice of Selector Library: I will be refactoring cssSandpaper to use other selector libraries besides cssQuery, which is currently bundled with it. This will include, but not restricted to, jQuery. This will allow developers to reduce the number of libraries included in their documents and reduce load time.

Modularity: I will make it easy for developers to make their own plugins to support CSS properties not currently supported by cssSandpaper. This module framework will also allow developers to only add support for the CSS properties they want to use (e.g. if a developer doesn’t use any CSS3 transforms, then they don’t have include that code or supporting libraries, like Sylvester.js).

Only Download Code If Needed: I want to make cssSandpaper only download plugins if actually needed. This will probably be done with Alex Sexton’s and Ralph Holzmann’s excellent yepnope.js library. While this library can be used today to speed things up, I want to look into making a little more integrated, if possible.

Further CSS3 Support: I am looking into polyfills at the moment, like border-image. Any other ideas for plugins will be most welcome.

@Jason: Please do! Perhaps we have a cross-pollination of ideas here – as mentioned in the post, I just refactored Kazumasa Hasegawa‘s work, including cssSandpaper support tweaking the color shading routine slightly and adding code to make the Visual Filters look less blocky with ClearType on. I hope it can benefit your already excellent work. Thanks for the feedback. :)

Everyone else: For those of you who haven’t read the article he is referring to, it is Tim Brown’s Shading with CSS text-shadows. It does a good job talking about some of the ways text-shadowing has been used in sign painting back in the day, and how these techniques can be simulated in CSS3. Highly recommended. This article, however, has indirectly brought to my attention a bug in the JavaScript code that prevents it from being used correctly with the TypeKit service. I will be posting a fix for this issue in the next few days, and will update my article when this is done.

Very helpful it would be if you were to enhance Tim’s Page with IE8 support and post it somewhere.
(I’m not that concerned about going as far back as IE6 or 7 – text can degrade to shadowlessness in those for all I care – but IE8’s going to be around for a long time to come. Just an idea. Make a nice post here.

BTW – if there is a fix for IE 6/7, too, hey, let’s reach for the brass ring, why not.

@Richard: Way ahead of you! As soon as I fix the TypeKit bug, I will definitely be posting a version of that page (pending Tim’s permission, of course). From what I can see, it should work with IE7-9. Will keep you posted.

I just love your tools to make CCS3 properties to work on IE and olders versions. I was looking for a solution to incorporate into my “HTML5/CSS3 Enabled Joomla Template Framework” and I have to say that you did a good Job as well Jason, from CSS3Pie. I’m incorporating both solutions to the framework.

I have been trying out the latest version with support for text shadows, but I think I have found that this solution does not work in conjunction with MooTools :( I am trying to get this working on Joomla 1.7 and if I prevent Mootools loading the text-shadows show and if I don’t I get the error ‘Line: 199
Error: Unable to get value of the property ‘split’: object is null or undefined’ in cssSandpaper.js. I also have jQuery running but that does not seem to be an issue (its in noConflict mode). Is there anyway to make this run in a kind of ‘noConflict’ mode, like jQuery and/or to use jQuery to get the selectors anyway rather than cssQuery?

Very nice library. However there appear to be problems with using cssSandpaper transforms in conjuction with CSS3 style text shadows in IE8. Also when interactive application of a textShadow e.g. onclick=”document.getElementById(‘myBox’).style.textShadow= ‘0 0 20px yellow, 0 0 60px yellow”; does not work in IE8.

@Phil: Regarding the first question, I have noticed that there are some issues with fixing transforms and text-shadows in IE, and am looking into a fix for that. I will also be adding a way to add text-shadows programatically in IE in a similar way as the other CSS3 properties supported by cssSandpaper (text-shadows are the only property which cannot currently do this).

This is really awesome. I mocked up a page with this tonight and was quite impressed with the result.

I had a small issue though, I threw my example in with some simple jquery which uses $.ajax to update a span which I’d applied the text-shadow to. Once the span is updated, the style goes away. Any way to refresh it?

Well I was pretty excited about this. I downloaded you files and looked over the examples. the all worked, but i noticed there wasn’t an example of text shadow in there.
Anyway text shadow is the only thing I can’t get to work. I looked at the code for this page and saw that you had [[/asamuzak.jp/textshadow.js]] in the head so I copied that too. but no joy!
what is the secret “User Agent Man”?

I would appreciate it. Drives me nuts when I can’t get things to look the same accross browsers

I just tried this in a new site I’m building and the text-shadow on my hover states don’t seem to work. Actually nothing works with :hover. Is this a known bug or just a feature you haven’t added? It’s definitely working, just not on hover states, which is what I need.

textShadowForMSIE script would cause a serious problem in accessibility.
So I canceled publishing it and re-published a new one.
Please replace the script.http://asamuzak.jp/html/446#source
(New one only supports IE9, won’t support IE8 nor IE7 anymore.)

Give Feedback

Don't be shy! Give feedback and
join the discussion.

Please Note: If you are asking for help using the information on this page or if you are reporting a bug with the code featured here,
please include a URL that shows the problem you are experiencing along with the browser/version number/operating system
combination where the issue manifests itself. Without this information, I may not be able to respond.