W3C home > Mailing lists > Public > www-style@w3.org > February 2008

RE: [css3-text] Multiple Text Shadow Stacking Order

From: Alan Gresley <alan1@azzurum.com>
Date: Fri, 08 Feb 2008 04:27:27 -0700
To: fantasai <fantasai.lists@inkedblade.net>
cc: www-style@w3.org, David Hyatt <hyatt@apple.com>
Message-ID: <20080208042727.34b83c2f3c9bef00757a2c62c0fb7450.51524f707b.wbe@email.secureserver.net>

fantasai wrote:


> The text-shadow definition in CSS2 specifies that the first shadow
> effect is on the bottom and the last one on top. This is inconsistent
> with how multiple backgrounds work. Should we change it?
> 
> ~fantasai


Yes indeed, the layering should be the same order as multiple backgrounds. I must assist though that referring to 'Stacking Order' in respect to text shadow is wrong. We don't apply a z-index to multiple backgrounds so it should not be any different with text shadow. Let me suggest "Text Shadow Painting Order" instead. CSS2.1 E.2 [1] has.

#The stacking order for an element generating a stacking 
#context (see the 'z-index' property) is:


and text shadow comes in between 3 and 4.

E.2 7.2.1.1 background color of element.
E.2 7.2.1.2 background image of element.
E.2 7.2.1.3 border of element.
  text shadow
E.2 7.2.1.4 For inline elements:


I have prepared this test over the last few weeks. Please test in Safari.

http://css-class.com/test/css/text-shadows/text-shadow-over-elements1.htm


By experimenting with the various "up size" text sections, the two floats with a transparent yellow and off black backgrounds, and the absolutely positioned boxes with transparent blue and purple background while adjusting the width of the viewpoint, it can be seen clearly seen how the "Painting Order" with various combinations work or don't work. "Adding "Stacking Order" in the equation doesn't make sense.

What my test case shows is not the different affects that can be achieved by layering on the z axis, keeping in mind that this is the thickness of the canvas. What it shows is the illusion of depth by the use of 'text-shadow' and 'box-shadow' and the whole illusion or effect is achieved by source order alone.

Opera 9.5 like Safari also render text shadows over other text when there is a negative margin on an element.


1. http://www.w3.org/TR/CSS21/zindex.html#painting-order


Alan

http://css-class.com/
Received on Friday, 8 February 2008 11:27:46 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:55:01 GMT