Feature: Implement text-shadow

[lojjic]

The text-shadow style is a commonly used feature in many CSS3 designs. As such we should look into adding some support for it.

It would be relatively simple to implement using the Shadow filter; however this would only be useful for single-pixel offsets with no blur, anything else would not appear accurate at all. But it would probably cover most real-life uses.

Another option would be combining other filters, e.g. the approach described at http://kilianvalkhof.com/2008/design/almost-cross-browser-text-shadow/ -- I can think of a few downsides to that:

1. It requires creating a "copy" of the element's text, basically all of its innerHTML, and positioning it on top. This is horrible for memory usage. Also it would be difficult or impossible to track changes to the contents of the element done via script, which we would have to do to keep the "copy" in sync.

2. These filters are applied to the entire deep contents of the element. This would make it impossible to e.g. apply text-shadow on the main element but remove or change the text-shadow on a descendant element; you can't remove or change a filter from the descendant element.

3. Applying these filters creates an implicit overflow:hidden on the element; any subelements which are positioned outside the bounds of the main element get chopped off. This is because filters apply processing on the rendered pixels within the element's viewport; anything outside that viewport is just ignored.

Suggestions for an approach which gets around these issues are more than welcome.

[rh0023]

I haven't worked out all of the details yet, and it uses the copy method, but instead of using the shadow filter, the blur filter yields better results.

HTML:

A Piece of textA Piece of Text

CSS:

div {
color: #f0f0f0;
font-size: 18px;
width: 255px;
text-align: center;
text-shadow: 2px 2px 2px #000;
padding-top: 3px;
line-height: 22px;
}

and then on a child div
div span.ie-shadow-span {
filter: progid:DXImageTransform.Microsoft.blur(pixelradius=2.2 enabled='true', makeShadow='true', shadowOpacity='0.75');
position: absolute;
z-index: -1;
margin-left: -1px;
margin-top: -1px;
}

Like I said, its not a perfect implementation, but the result in IE8 is very very close to the result in FF4.

As far as memory goes, a few instances of this would be no issue. Everything in moderation.

For dynamic text it would require calling an update function of some sort unless it would be possible to use something similar to the jquery live methods.

[bobeagan]

Any movement on this feature?

[tmikaeld]

+1

I used the text-shadow branch, and it works perfectly on IE6-8 but not on IE9 at all.
Why has IE9 been excluded?

EDIT: I tried using filters on IE9 but the text-edges get all black-ish. Is this why there's no IE9 support in PIE.htc yet?

[lojjic]

IE9 requires a separate implementation because PIE's rendering in IE9 does not produce a positioned element behind the main element like it does in IE6-8, and therefore there's nothing into which to place the cloned text nodes.

I'm hoping that in IE9 I can leverage SVG text with SVG filters to avoid the need for cloned text in the main document altogether.

[tmikaeld]

Sound great, will you apply that on IE6-8 too, i noticed that a black line get stuck on the screen if text-shadow is applied to links that has text-decoration:underline;

Is the SVG technique faster than the positioning? I noticed some quite severe lag on IE8 using the current text-shadow branch.

EDIT: Also, does the SVG technique support fluid designs?

[lojjic]

SVG would likely be faster, yes. Canvas is another possibility. I think there will always be some real slowness to it, just because it has to do so much -- this text-shadow support will definitely come with some caveats one of which is do not use it on large amounts of text.

Keep in mind that the code in the branch for this is very early and rough and totally experimental. It could change completely in the future, this is just one possible direction. I would not suggest relying on it for production sites, and for sure you will find bugs. Let it get further along before reporting them though.

Fluid designs should be supported by both approaches.

[tmikaeld]

Great, thanks for your answers! I find this text-shadow problem quite fascinating. And a good learning experience.

Unfortunately it was quite a chunk of text, that's probably why it lags. I think i will have to set for supporting IE7-8 with filter's for now, and wait for IE9 support. I guess that since IE9 have accelerated rendering, it should be faster.

This filter works great for IE7-8 btw, it's just a simple shadow, but that's all i need.
filter:progid:DXImageTransform.Microsoft.Shadow(color=#242424,direction=135,strength=1);

[jjroelofs]

I remember Cufon made very nice text-shadows, any chance we can copy Cufon's implementation?

[lojjic]

I'm not too familiar with Cufon's shadow implementation, but I found this on their shadows example page:

"Please note that offsets can only be defined in pixels and that blur is not supported at all.

Additional limitations since the release of Internet Explorer 8: One element may only have two shadows, and they may not have varying levels of opacity."

(from http://cufon.shoqolate.com/examples/text-shadow.html)

This seems way too limited to be of use in a CSS3 implementation.

[jjroelofs]

I see your point in that Cufon only does a small part of what CSS3 but I do not agree that it's of no use. On the contrary...

In most of my designs, and most designs I find in the wild text-shadow is used to offset the text from the background and increase contrast. This technique is very commonly used and does not use blurred shadow.

An example of this can be seen on the green comment button under the textarea I'm writing in at the moment.

Here are some examples of non-blurred textshadow that I found on Dribble:
http://dribbble.com/shots/66392-Book-a-Flight
http://dribbble.com/shots/186729-Infinite-Scalability
http://dribbble.com/shots/161290-Shiny-text

The last sample does use blurred shadow on the big text, big display text is a use-case that does sometimes need blurred shadow but still non-blured shadow is a good fallback.

Here you can see some of my themes that use the Cufon text-shadow:

http://demo.sooperthemes.com/synopsis/
http://demo.sooperthemes.com/syan/ (in the slider)

I would be very happy with the addition of text-shadow if it really is possible. I'm using PIE now on this design: jurriaanroelofs.com/themebox7/ and it would only need the Cufon quality of text shadow to emulate the good browsers.

[lojjic]

I suppose I should clarify: I did not mean that simple non-blurred shadow is of no use to web page authors, I meant that Cufon's implementation will not be of use to PIE. There are other existing techniques that do handle blur and the other missing things, so we can do better -- Cufon's just not going to help us get there. :)

You might be interested to check out the "text-shadow" branch in GitHub...

[lojjic]

Also, if all you want is simple drop shadow then you can use IE's DropShadow filter to do that without a polyfill. See http://heygrady.com/blog/2011/03/10/css-text-shadows-in-internet-explorer/ for some examples.

[tmikaeld]

I should note that IE's dropshadow filter is borken on IE9, works "fine" for IE7-8 though. Only minor positioning problems.

[jjroelofs]

oh ok cool. though I'm using the post-beta6 PIE with the selective loading PIE scripts, so the text-shadow branch would be incompatible right?

[tmikaeld]

A note on the shadow support currently in PIE, it has problems with speed (if you have much text) and positioning if your doing "responsive" design.

Please report your tests, i'm very curious on your results.

Good luck!

[milink]

At first, let me thank you for all your amazing work at css3pie. Thanks a lot for it.

I just tried text-shadow branch and discovered one small bug:

Shadow ignores "text-transform: uppercase;" defined on source element

I hope you understand, what I mean

[littke]

Will this ever be implemented? Thanks :)