W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2019

[csswg-drafts] [css-text-decor] What happens to the wavy & double lines when `text-decoration-thickness` is applied? (#4134)

From: Jen Simmons via GitHub <sysbot+gh@w3.org>
Date: Fri, 19 Jul 2019 18:26:55 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-470478464-1563560814-sysbot+gh@w3.org>
jensimmons has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-text-decor] What happens to the wavy & double lines when `text-decoration-thickness` is applied? ==
Making a test of underline styling, I've discovered a lack of interop regarding how the the wavy line and the double line get thicker.

There doesn't seem to be much of [a description in the definition](https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property) of `text-decoration-thickness` to go on. It seems relevant details might be in other specs (where wavy and double are originally defined); it's unclear to me. 

###Wavy line

It looks like Safari is making the line thicker, while Firefox is making the amplitude taller. IMO, perhaps we should do a bit of both in some kind of ratio.

<img width="1591" alt="CodePen - Underline styling test 2019-07-19 14-12-38" src="https://user-images.githubusercontent.com/108474/61556397-ae8a6100-aa2f-11e9-91c9-97b65ea6af6b.png">

###Double Underline

As Firefox makes the two lines thicker, the space between them grows bigger, but not in a 1-to-1 ratio. The space between the lines is smaller than either of the lines. (By half maybe? @charliemarlow ?) 

Safari adds much more space between the lines. It looks like the space between the lines is the same as the line thickness.  

Looking (not measuring) it does seem both Firefox and Safari make the thickness of each line the same as the other browser (which is good). I don't know if that's luck or if it's clear in the specs. Probably the spec should be clear about what the thickness measurement applies to.  

<img width="583" alt="CodePen - Underline styling test 2019-07-19 14-13-43" src="https://user-images.githubusercontent.com/108474/61556610-3a9c8880-aa30-11e9-9466-35401ee9019b.png">

I believe we want to make sure all implementations handle these details in the same way. It will be a source of ending frustrations to both develops and designers if different browsers do this differently. 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4134 using your GitHub account
Received on Friday, 19 July 2019 18:26:57 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:50 UTC