[css-text-decor] Add some sort of z-index value to text-decoration

[vasilisvg]

Recently I played around with some new text-decoration properties like text-decoration-thickness. I noticed that you cannot control whether the line is placed on top of the text, or behind the text. This is relevant with larger values for text-decoration-thickness, like 1em in combination with text-decoration-line values of line-through and overline.

I made an example that illustrates the issue.

In this example, in the second and third paragraphs the text-decorations are placed on top of the text, which makes it unreadable. A property to place these text-decorations behind the text would open up a new trove of creative possibilities.

I couldn’t find any reference to this problem in the spec, or in the github issues, hence this issue.

[faceless2]

Painting order is in the spec: https://drafts.csswg.org/css-text-decor-4/#painting-order, and line-through is supposed to be in front of the text, underline/overline behind. How well that's implemented, I couldn't say.

[vasilisvg]

In that case I would like to propose to give authors the option to choose whether the line should be in front or behind the text. Placing a line with a thickness of 1em or more behind the text with text-decoration-line: line-through is something I would love to be able to use. The possibilities of a thick line-through are very limited without it, and very welcome from an artistic point of view.

[tabatkins]

You can achieve that effect in the current spec by using text-underline-offset to move the underline up into the center of the text (and text-decoration-thickness to make it very thick).

[vasilisvg]

Oh nice! I didn’t know text-underline-offset. It seems like this would enable me to do (almost) anything I needed this z-index for. This text-decoration-z-index idea would still be necessary in cases where the author wants to use multiple text-decoration-line values, like for instance text-decoration-line: underline overline. (Which makes me a bit confused: why a space, and not a comma?)

[tabatkins]

Why would you need to control stacking order for underline + overline? Are you planning on stacking the two atop each other? I suspect that's far enough outside the intended usage of under/overlines that we probably don't want to try and solve it.

(Which makes me a bit confused: why a space, and not a comma?)

The text-decoration properties aren't list-valued in general; the properties apply to all the text decorations generated by the element, and you just specify which lines get drawn in that fashion.

[vasilisvg]

Why would you need to control stacking order for underline + overline?

I would like to be able to set a 1em thick dotted plum line on top of a dashed khaki line on top of a wavy powderblue line. And all these lines should be behind the text. And now that I know that this can almost be achieved, I want to use it (-: This is also why I would like to be able to apply different values to the three text-decorations, just like backgrounds or shadows.

[tabatkins]

Ah, for that sort of case you're going to need to use multiple wrappers anyway, since the styles like colors apply to all the decorations generated by an element. We can't change that without a fairly significant overhaul of the entire feature.

[vasilisvg]

I understand that in the current spec this is how things work. From the point of view of someone who uses CSS as an artistic material I think it would be worth the effort to make it more flexible. Maybe add a label css-text-decor-5 for future reference?