You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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?
The text was updated successfully, but these errors were encountered:
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.
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.
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.
When setting
text-decoration-line: underline
the propertytext-underline-offset
is available. This property is not available when settingoverline
orline-through
as values fortext-decoration-line
. As far as I understand, there is notext-overline-offset
ortext-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 thetext-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?
The text was updated successfully, but these errors were encountered: