Intent to Prototype: text-decoration-thickness, text-underline-offset and from-font keyword for text-underline-position

83 views
Skip to first unread message

Dominik Röttsches

unread,
Apr 2, 2020, 6:38:26 AM4/2/20
to blink-dev
dr...@chromium.org

Text-decoration spec already established, feature shipping in other browsers. Implement CSS text decoration properties text-decoration-thickness and text-underline-offset. Add support for the new from-font keyword for text-underline-position. When from-font keywords are used, support variable font MVAR underline scaling, (tags `unds` and `undo` in the MVAR table overriding underlinePosition and underlineThickness in the OpenType `post` table. With the introduction of the text-decoration-skip-ink interest for additional underline styling increased to improve situations where the underline as placed by the UA is too close to the baseline and ink-skipping triggers too early. High interest on the chrome bug #785230 (25 ⭐️) and shipped in Firefox and Safari.
Low, as already shipped in two other engines and already covered by existing WPT tests. Firefox: Shipped (https://bugzilla.mozilla.org/show_bug.cgi?id=1440014) Edge: No public signals Safari: Shipped (https://bugs.webkit.org/show_bug.cgi?id=190774) Web developers: Positive (https://twitter.com/jensimmons/status/1196420764360200198) Feedback received after ink-skipping, 25 ⭐️ on Chrome bug - 123 likes on video explaining the underlining styling features in FireFox.
Usual pathway for debugging CSS properties. Yes Yes Already covered by thickness-* and offset* tests in https://wpt.fyi/results/css/css-text-decor?label=experimental&label=master&aligned More tests for variable font underline metrics / MVAR overrides will be developed. https://www.chromestatus.com/feature/5747636764147712

j.j.

unread,
Apr 2, 2020, 4:26:59 PM4/2/20
to blink-dev

Are values for text-underline-offset clamped or clipped, especially negative values?

My impression was that the CSS WG resolved to allow any value without clamping to make that examples possible:

But moving an underline behind the text seems not to work in Firefox.

Manuel Rego Casasnovas

unread,
Apr 3, 2020, 6:19:22 AM4/3/20
to Dominik Röttsches, blink-dev
Cool stuff Dominik!

BTW, we should fix https://crbug.com/896295 as part of this work (it's
already marked as blocker) as it's going be much more likely that those
kind of repaint issues will happen when people start playing with this
properties.

Bye,
Rego

Dominik Röttsches

unread,
Apr 3, 2020, 12:06:46 PM4/3/20
to j.j., blink-dev
Hi JJ,


As the text of the resolution says, my intention is to not explicitly clip beyond what we can reasonably render (we have to see what to do when the underline goes far below or above the current line for example) - but I'll know more once we get to implementation and testing.

When I tried, I saw Safari clipping them at the baseline, but IIRC Firefox allowed moving the underline offset to the middle of the line for example. Since I was testing with black and black, I can't tell what the paint order was.

Dominik

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/bca92c7f-b426-41a2-9146-42f695dc81d9%40chromium.org.

Dominik Röttsches

unread,
Apr 3, 2020, 12:08:24 PM4/3/20
to Manuel Rego Casasnovas, blink-dev, Stephen Chenney
Hi Rego,

On Fri, Apr 3, 2020 at 1:19 PM Manuel Rego Casasnovas <re...@igalia.com> wrote:
Cool stuff Dominik!

Thanks! 😊
 
BTW, we should fix https://crbug.com/896295 as part of this work (it's
already marked as blocker) as it's going be much more likely that those
kind of repaint issues will happen when people start playing with this
properties.

Agree - that's on our radar and Stephen expressed that he'd be ready to help me with this one. (Thanks Stephen!)

Dominik




Bye,
  Rego

Dominik Röttsches

unread,
Jun 21, 2021, 5:55:51 AM6/21/21
to Piotr Winnicki, blink-dev, Stephen Chenney, Manuel Rego
Thanks, Piotr - please use https://crbug.com for this type of report. I filed your observation as https://crbug.com/1222034 - let's follow up there. This looks like repaint issue and we have seen something similar before. It'd help if you have a URL on which this is reproducible - please leave a comment on the issue if you have such a URL.


On Mon, Jun 21, 2021 at 11:13 AM Piotr Winnicki <p.win...@global4net.com> wrote:
I found a bug when underline not always disappears on hover out when I use column-count and text-underline-offset: 4px together:
https://www.dropbox.com/s/q05h27tnzv334ki/capture_menu_chrome.mp4?dl=0
If I remove column-count OR change text-underline-offset to 1px - everythig is OK!
On Firefox everythig is OK.

Mathias Bynens

unread,
Jun 21, 2021, 7:35:28 AM6/21/21
to Dominik Röttsches, blink-dev
On Thu, Apr 2, 2020 at 12:38 PM Dominik Röttsches <dr...@chromium.org> wrote:
dr...@chromium.org

Text-decoration spec already established, feature shipping in other browsers. Implement CSS text decoration properties text-decoration-thickness and text-underline-offset. Add support for the new from-font keyword for text-underline-position. When from-font keywords are used, support variable font MVAR underline scaling, (tags `unds` and `undo` in the MVAR table overriding underlinePosition and underlineThickness in the OpenType `post` table. With the introduction of the text-decoration-skip-ink interest for additional underline styling increased to improve situations where the underline as placed by the UA is too close to the baseline and ink-skipping triggers too early. High interest on the chrome bug #785230 (25 ⭐️) and shipped in Firefox and Safari.
Low, as already shipped in two other engines and already covered by existing WPT tests. Firefox: Shipped (https://bugzilla.mozilla.org/show_bug.cgi?id=1440014) Edge: No public signals Safari: Shipped (https://bugs.webkit.org/show_bug.cgi?id=190774) Web developers: Positive (https://twitter.com/jensimmons/status/1196420764360200198) Feedback received after ink-skipping, 25 ⭐️ on Chrome bug - 123 likes on video explaining the underlining styling features in FireFox.
Usual pathway for debugging CSS properties.

Re: DevTools support, what this means is css_properties.json5 should be rolled into the devtools-frontend repository once this feature ships (more details in https://goo.gle/devtools-checklist). Please include this detail in future Intent* emails about this feature. I’ve filed https://bugs.chromium.org/p/chromium/issues/detail?id=1222053 to track this.
 
Yes Yes Already covered by thickness-* and offset* tests in https://wpt.fyi/results/css/css-text-decor?label=experimental&label=master&aligned More tests for variable font underline metrics / MVAR overrides will be developed. https://www.chromestatus.com/feature/5747636764147712

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

Piotr Winnicki

unread,
Jun 21, 2021, 12:48:12 PM6/21/21
to blink-dev, Dominik Röttsches, blink-dev, Stephen Chenney, Manuel Rego
I found a bug when underline not always disappears on hover out when I use column-count and text-underline-offset: 4px together:
https://www.dropbox.com/s/q05h27tnzv334ki/capture_menu_chrome.mp4?dl=0
If I remove column-count OR change text-underline-offset to 1px - everythig is OK!
On Firefox everythig is OK.

piątek, 3 kwietnia 2020 o 18:08:24 UTC+2 Dominik Röttsches napisał(a):
Reply all
Reply to author
Forward
0 new messages