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

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

From: charliemarlow via GitHub <sysbot+gh@w3.org>
Date: Fri, 19 Jul 2019 21:18:48 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-513381503-1563571127-sysbot+gh@w3.org>
To answer your question, in Firefox the space between the two lines is equal to half the line thickness. (It defaults to 1 if half of the line thickness is less than 1). 

You can also compare how the different browsers render styled decoration lines by using large font-sizes. I've written up a basic example on CodePen [here](https://codepen.io/charliemarlow/pen/bXNyRR) and took some screenshots on Chrome, Safari, and Firefox Nightly to illustrate.

You can see that Firefox has a very different wavy underline as compared to Chrome and Safari, while Safari and Firefox have a more similar double text-decoration than Chrome which doesn't have much space between the two lines.

There's a high-level overview of how Gecko draws the wavy underline in a comment here: https://searchfox.org/mozilla-central/source/layout/painting/nsCSSRendering.cpp#3869

Chrome's implementation using Bezier curves is described here: https://chromium.googlesource.com/chromium/src/+/c0fd99aa9f08fd23c5cf35e4f29b2e650fcace92/third_party/WebKit/Source/core/paint/InlineTextBoxPainter.cpp#237

GitHub Notification of comment by charliemarlow
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4134#issuecomment-513381503 using your GitHub account
Received on Friday, 19 July 2019 21:18:50 UTC

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