[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