Re: [CSS3 Text] shadow stacking levels

David Hyatt wrote:
> 
>> The 'visually apparent reason' for drawing a shadow that way is that 
>> that's what a shadow does. A tree will cast it shadow over the grass 
>> below. So elements later in the source will cast a shadow over 
>> elements earlier in the source.  So depending on the source order, 
>> shadows can behave as just described or only cast a shadow under 
>> itself. A use case is a well known layout with two floats one with a 
>> negative margin.
>>
>> http://css-class.com/test/css/drop-shadows/drop-shadow-over-element.htm
>>
>> Please view in Safari. If the blue float doesn't cast it shadow over 
>> the pale yellow float, how am I to draw that shadow? I hope not with 
>> background images.

If a similar rule were applied to box-shadow, you'd do it by making the
blue float position: relative; and giving it a positive z-index. That makes
your stacking order intentions explicit. But I'm not suggesting such a rule
here.

> This is a good example that illustrates my point.  Thanks!
> 
> I understand that the sentence says "should," but I still think it needs 
> to be removed.  No implementation is going to actually try to see if the 
> shadow intersects the glyphs of other text in the document and clip it 
> out if that is the case.  That would be way too slow.... and any 
> implementation that tries to draw the shadows as a separate layer 
> entirely behind other foreground content should be deemed incorrect in 
> my opinion, since doing so would break Alan's example.
> 
> SHADOWS ARE NOT LIKE BACKGROUNDS. They should not draw in a separate 
> phase just so that they can sit behind all backgrounds/borders in the 
> same stacking context (box-shadow) or sit behind all foreground content 
> in the same stacking context (text-shadow).  The "should" sentence 
> mplies that you wish the drawing worked this way, but it doesn't.

I want to see this:
   <p style="text-shadow: xxx;">Some text</p>
and this
   <p style="text-shadow: xxx;">Some <span>text</span></p>
where the span has no styling applied to it whatsoever, be rendered exactly
the same. I think that's a reasonable expectation. If the author desires
some kind of layering effect, he can use position: relative; and z-index to
make the span move forward in the stacking order. If you can't do it in your
implementation, that's fine, I'm not proposing to require it. I'm only
proposing to recommend it.

There are different ways to optimize text rendering, and it's entirely
plausible that a layout engine will collect together cross-element runs
of text that share the same styling and send the entire run to the text
renderer at once. In such a case, the shadows will not overlap as in your
implementation.

> In Alan's example, the box-shadow draws with the border/background of 
> the box, and so the shadow of the later box is naturally cast over the 
> background/borders of the previous box.  That is how shadows should work.

~fantasai

Received on Wednesday, 23 January 2008 21:02:53 UTC