- From: Gabriel Lundmark via GitHub <sysbot+gh@w3.org>
- Date: Tue, 19 Nov 2019 07:09:48 +0000
- To: public-css-archive@w3.org
spacecakes has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-text-4] inline (horizontal) text-underline-offset == [CSS Text Decoration Module Level 4](https://drafts.csswg.org/css-text-decor-4/#underline-offset) Note: 'horizontal' here refers to the inline dimension of western languages. I would like a way to control **offset in the inline dimension** too. Maybe the `text-underline-offset` property could be a shorthand for both vertical and horizontal offsets, so that we’re also able to set them separately. If no second value is specified, the there will be no horizontal offset, which is what you'd normally want. I have a perfect use case for this where the designer has chosen a thick, semi-transparent and slightly offset (both x, y) underline that resembles that of a highlighter marker. Example: <img width="459" alt="Screenshot 2019-11-19 at 08 04 46" src="https://user-images.githubusercontent.com/15325145/69124110-54fc7680-0aa3-11ea-956e-4d018622bdc3.png"> This was done using some background trickery to also get it to wrap along with the text: ``` display: inline; word-break: break-word; background-image: linear-gradient( rgba(36,148,187,0.25), rgba(36,148,187,0.25)); background-position: bottom 9px right -20px; background-size: 100% 30%; background-repeat: no-repeat; padding: 10px; margin: -10px; ``` This works well, but a property to control offset in both directions would save me a lot of code. Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4517 using your GitHub account
Received on Tuesday, 19 November 2019 07:09:53 UTC