[css-text-decor] add text-decoration-offset

[olsp]

When setting text-decoration-line: underline the property text-underline-offset is available. This property is not available when setting overline or line-through as values for text-decoration-line. As far as I understand, there is no text-overline-offset or text-line-through-offset property specified.

My current use case is that I want to implement an effect to hide text by moving a "colored box" over it. This should happen as a transition and each line individually and not just one "colored box" for the whole paragraph.
I thought about transitioning text-decoration-thickness of the underline from 0px to 1lh, but the underline is behind the text, so the text won't be hidden behind the "colored box". When I use the overline and change the text-decoration-thickness the overline moves away from the text. So I would first need to offset the overline to -1lh.

Is there a specific reason offset is only available for underlines?

[schenney-chromium]

I'm confused when you say that overline will meet your use case because overline also draws behind text. Only line-through draws over text. I would expect the line-through to grow out from the center as the width increases.

But then line-through will not slide a box from top to bottom or bottom to top which seems to be your use case. So I guess you do in fact need an offset parameter for the other line types.

Personally I agree that having the offset only for underline, and having it as a distinct property not available in the shorthand, are both oddities that I presume come from compatibility with former implementations. My first inclination is to add text-decoration-offset as a property (with an alias for text-underline-offset) and maybe include it in the shorthand though parsing might make that hard due to ambiguity between width and offset.

[schenney-chromium]

Related discussions:
Issue #6235 suggest a z-index for decorations which would also solve the problem stated here.
Issue #4517 might be considered if we do add an offset for all line types.
Issue #4059 also mentions animation. but the resolution there does not need changing to implement the effect described here.

[olsp]

I may have confused the overline being over the text because when it "grows" above the previous line, it covers the text of the line above. Thanks for clarifying. So then I would like to use line-through and offset it. A general text-decoration-offset would be great.

[IanBellomy]

decoration: line-through is too low for uppercase and decoration:underline is painted behind the text, so, something like a red line through uppercase text-color'd text currently requires a pseudo element or other hack.

(line-through)

(underline)