Box-shadow has inset; text-shadow doesn't?

[1] Section 4.8 from CSS 3 Backgrounds and Borders specifies the box- 
shadow property as follows:

> The ‘box-shadow’ property attaches one or more drop-shadows to the  
> box. The property is a comma-separated list of shadows, each  
> specified by 2-4 length values, an optional color, and an optional  
> ‘inset’ keyword. Omitted lengths are 0, omitted colors are a UA- 
> chosen color.
> The type <shadow> stands for:
> inset || [ <length> <length> <length>? <length>? || <color> ]
> where the first two lengths are required.


[2] Section 8.3 from CSS 3 Text specifies the text-shadow property as:

> This property accepts a comma-separated list of shadow effects to be  
> applied to the text of the element. <shadow> is defined as  
> [ <color>? <length> <length> <length>? | <length> <length> <length>?  
> <color>? ], where the first two lengths represent the offset and the  
> third an optional blur radius.



I've searched the list archives for discussion on synchronizing box- 
shadow and text-shadow, but found only one relevant mention, which is  
from Bert Bos in 1998, saying:

> Inset can be simulated with two shadows: a dark one to the top left,
> and a light one to the bottom right. Outset is similar, but reverses
> the shadows:
>
>     EM.inset {text-shadow: white -1px -1px, black 1px 1px}
>
> It's not perfect in high resolutions, but usually good enough.


It seems that this was never brought up again for discussion, although  
text-shadow does get tossed in as a simile to box-shadow, but  
apparently without respect for the crucial difference of the missing  
'inset' keyword.

While I understand Bert's reasoning that two shadows can *simulate*  
the presence of inner shadows, I want to point out that they do so in  
a completely unacceptable manner to most designers. This solution,  
while perhaps "good enough" for some, is not good enough for using  
text instead of an image for carefully designed headings / large type.

[4] I made an example graphic that shows the difference between the  
two. Both examples use a 25% pure black shadow top-left and a 50% pure  
white shadow bottom-right.


Additionally, box-shadow and text-shadow are virtually identical in  
function, but the specs have them behaving inconsistently between one  
another. The omission from the 'inset' keyword on text-shadow feels  
like an oversight that could be easily remedied—which, as a result,  
would not only keep the two shadow effects behaving the same way  
(which most developers will expect it to), but it would also allow  
designers to use scalable, inherently more accessible text for many  
headings instead of images.

My proposal is that text-shadow is adjusted to include the 'inset'  
keyword. For full compatibility, it should perhaps simply match the  
description of box-shadow entirely, including the fourth length  
(spread radius). Another thought is that this could be changed along  
with changing the name of the 'inset' keyword to read 'inner'—as  
shadows are not synonymous to borders; their behaviors are very  
different, and using the same keyword could lead to confusion (I've  
seen this thought expressed before in the archives).


- Faruk


[1] http://www.w3.org/TR/css3-background/#the-box-shadow
[2] http://www.w3.org/TR/css3-text/#text-shadow
[3] http://lists.w3.org/Archives/Public/www-style/1998Apr/0114.html
[4] http://j.mp/23QblD

Received on Monday, 7 September 2009 11:29:59 UTC