Re: Proposal for clipping background images to foreground text

David Hyatt wrote:
> 
> I mentioned this back on May 9, 2007.
> 
> http://lists.w3.org/Archives/Member/w3c-css-wg/2007AprJun/0197.html
> 
> The original email (for those who can't read it) was:
> 
> "Random idea I just had that may or may not be cool. You be the judge. :)
> 
> background-clip could take the value "text". This would cause the 
> background image to draw clipped to the text glyphs inside your box.
> 
> This has nice synergy with multiple backgrounds (since you could specify 
> a border-clipped background image and then an additional text- clipped 
> background image).
> 
> It has nice synergy with foreground color too, since the color itself 
> could be partially transparent (to reveal some of the text-clipped 
> background image) or fully transparent."
> 
> This is now implemented in the latest nightly builds of WebKit.  You can 
> read more about it here.
> 
> http://webkit.org/blog/164/background-clip-text/

I think it's a really neat idea, but I'd suggest using a separate property
for this rather than extending backgrounds with background-clip--and then
paint the image over the text rather than under it. This let's you use a
single image for effects like
   http://cssglobe.com/lab/textgradient/
I think you can do more with that layering than with semi-transparent text
over the image. (You can get true white, you can have opaque and saturated
color, etc.) It also has a much better fallback story.

You'd also want controls over whether the image stretches and tiles over
the containing block or the root inline. Makes a big difference when text
wraps.

 > Assuming people like the idea, the part that needs hammering out is what
 > exactly you are clipping to.  Right now I still clip to the border even
 > when the value of text is specified (so you can't draw the background
 > into text that spills outside of the border box).  I also don't descend
 > into e.g., positioned children.  Decorations like underline/overline and
 > shadows are included in the clip region.

I think overflowing text should be painted, not sure about positioned
descendants. I think it's ok to leave those out. Text decoration should
be painted, but shadows should not.

~fantasai

Received on Tuesday, 25 March 2008 16:51:51 UTC