[css-backgrounds] Should we conceive an alternative to `background-clip: text`?

[noamr]

(...Continuation of an offline conversation with @smfr)

background-clip: text is a really cool feature, but it works only in certain scenarios, is under-specified, not very interoperable, and has several issues, for example around accessibility and printing. A big example is #9563.

Perhaps it's time to come up with something that allows for the designs that background-clip: text allows, but with all those issues thought out?

I can envision a few directions:

1. Extending fill or something similar to have all the properties of background, and "fill" the text rather than have it transparent and expose the background.
2. Extend mix-blend-mode or some such to include porter-duff alpha-blending, and also to allow separate mixing to the borders vs. the content. This can be a very powerful way to alpha-blend elements of the design.
3. Introduce something like background-clip: brush and color: brush, where text or anything else can use the current background as the "color". This can have very creative results but I'm not sure about the complexity.

[smfr]

See https://drafts.fxtf.org/fill-stroke/#fill-image

[noamr]

See https://drafts.fxtf.org/fill-stroke/#fill-image

This is currently SVG-only, right? So the direction would be to enable something like this for ordinary text?

[smfr]

I'm a bit confused by the "text and SVG shapes" wording, but I think it's SVG only now, but the goal of the spec is to generalize it to also apply to CSS boxes somehow.

[noamr]

I'm a bit confused by the "text and SVG shapes" wording, but I think it's SVG only now, but the goal of the spec is to generalize it to also apply to CSS boxes somehow.

I was reading this as the <text> element in SVG

[jfkthame]

I'm a bit confused by the "text and SVG shapes" wording, but I think it's SVG only now, but the goal of the spec is to generalize it to also apply to CSS boxes somehow.

I was reading this as the <text> element in SVG

I understand this (and all such "text and SVG shapes" occurrences in the Fill & Stroke spec) as referring to HTML text as well as any SVG shapes (including the glyphs in SVG text).

See https://drafts.fxtf.org/fill-stroke/#fills, which specifically mentions both "the glyphs of an inline" and "SVG text":

A fill paints within the outlines of an SVG shape or the glyphs of an inline (or SVG text) box.

[noamr]

OK TBH I had no idea that we had this spec lying around. It might be a solution to this, I'll keep it open to make sure it can do everything background-clip: text can do (ish).

[noamr]

One thing that fill/stroke cannot do is use a live element (e.g. video) as the fill.
For that, I think a solution that uses some sort of alpha-blending (have the text bleed through to what's behind) might work better.
I wonder if just going with fill/stroke would be a bit outdated given current designs on the web?

[jsnkuhn]

One thing that fill/stroke cannot do is use a live element (e.g. video) as the fill.

I made a pitch for "background-video" at one point (#6732) which seems like it might cover some of this through fill-image (https://drafts.fxtf.org/fill-stroke/#fill-image).

for other live elements there's element() from images-4 which sadly still has implementation problems.
https://drafts.csswg.org/css-images-4/#element-notation

[fantasai]

@noamr Not sure what you mean by that, but it seems like this issue at the top level is addressed, and maybe individual issues should be opened for specific adjustments or use cases that need to be addressed?