fill and stroke properties with CSS <image> values

Hi,

I would like to follow up on a discussion we had in the SVG WG about adding <image>[1] as value for ‘fill’ and ‘stroke’.

This becomes more relevant now because first implementations are experimenting with it. (Erik has a prototype for Blink, I was recently looking at it for WebKit.)

The problem that came up before is the reference box used for <image>. While it makes sense to use objectBoundingBox for ‘fill’ it looks a bit more pleasant to use strokeBBox for the ’stroke’ property.

However, pixel images already have a specific size. Iit can be hard to align images/gradients between fill and stroke though, since the origin differs. (Imagine you use and image for the ‘stroke’ and the same image but with saturate on the ‘fill’ but want both be aligned and sized the same.)

Additionally, it was not clear what happens with images that do not fill the whole area. Do we repeat the image? Will the area around the image be transparent (black)?

Tab came up with a solution that is rather drastic. He suggested to use the syntax of ‘background’ [2] to allow users to specify origin, clipping, repeat and size of image values. I was skeptical at the time if the increase of complexity to the syntax is worth it.

Since the CSS WG agreed to use ‘fill’ and ’stroke’ on text (for all markup languages including HTML), there might be a more web authors who would really like to have the same capabilities as background. Even attached images are a common use case where people use -webkit-background-clip: text; at the moment to archive it.

Therefore, I suggest to use the following syntax for <image> and possibly paint servers as well:

fill/stroke = <final-bg-layer> | <the-rest>
<final-bg-layer> = <image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <color>

<box> at the moment consists of content-box, padding-box and border-box. I would suggest to use the same keywords as for clip-path[3]. Note: The discussion about the box values is still ongoing and might change. Therefore, we should keep fill and stroke in mind.

Greetings,
Dirk

[1] http://dev.w3.org/csswg/css-images-3/#image-values
[2] http://www.w3.org/TR/css3-background/#ltfinal-bg-layergt
[3] http://dev.w3.org/fxtf/css-masking-1/#the-clip-path

Received on Wednesday, 22 January 2014 09:18:50 UTC