Skip to content

[css-text-decor] add text-overline-offset #12301

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
olsp opened this issue Jun 7, 2025 · 3 comments
Open

[css-text-decor] add text-overline-offset #12301

olsp opened this issue Jun 7, 2025 · 3 comments

Comments

@olsp
Copy link

olsp commented Jun 7, 2025

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Author

olsp commented Jun 10, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants