Re: Possible text-shadow enhancements

2011/3/2 Brad Kemper <brad.kemper@gmail.com>:
>
>
> On Mar 2, 2011, at 1:30 PM, Jordan OSETE <jordan.osete@gmail.com> wrote:
>
>> Same goes for inset, while it can allow nice effects, it is mainly
>> useful with big fonts, and it may be much more complex to implement.
>
> Isn't it just a matter of reversing the offscreen bitmap of the shadow prior to applying the spread and blur, and then cropping it and compositing it above the text instead of below it? It doesn't seem that much more complex.

I added a *very* basic version of inset:
http://www.fruitsofts.com/testcases/canvas_text-shadow.htm
Actually, you were right, it was not that hard to do, though I lost
compatibility with nearly every browser but Firefox (I think it's
because browsers handle globalCompositeOperation differently). I am
*really* sorry about that, I will try to make it compatible with other
browsers soon, but I've got no time to investigate now.

Also, I ran into a little spec-related issue: as text-shadow allows
multiple shadows (unlike box shadow), should we allow a different
inset status for each shadow ? And if we do, how do we handle cases
where inset and normal shadows are stacked one above another ? Should
we "force" all inset shadows to be defined before normal ones, and
throw a syntax error else ?

Maybe it's the best solution: force all inset shadows to be defined
first, then draw in this order (from top to bottom):
- inset shadows above, in the order they are defined
- the text itself
- normal shadows below the text, in the order they are defined (no change)

Another solution could be to create a second property,
text-shadow-inset, but this would make the ability to specify the
foreground color in text-shadow less useful for graceful degradation.

For the time being, I have not implemented anything like this, though,
and not changed the way I paint shadows (ie. the text itself is
painted above the shadows, including the inset ones).
So if you want to try inset shadows, you need to work-around this by
choosing a "transparent" fg-color, and specifying a "shadow" with your
fg-color to replace the text, and put it between inset and normal
shadows...

Well, I will try to correct all this, and make the mock-up compatible
with other browsers as soon as I can.

Regards,

Jordan Osete

Received on Friday, 4 March 2011 23:11:57 UTC