[css-text-decor] What happens to the wavy & double lines when text-decoration-thickness is applied?

[jensimmons]

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 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.

###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.

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.

[jensimmons]

The test I screenshot above is at: https://codepen.io/jensimmons/pen/voYMPE?editors=1100

[jensimmons]

Filed an issue for Firefox here: https://bugzilla.mozilla.org/show_bug.cgi?id=1567584

[dholbert]

I suspect this falls under the category of "2.3. Determining the Position and Thickness of Line Decorations" at https://drafts.csswg.org/css-text-decor-4/#line-position , which is still currently under-specified and doesn't acknowledge the existence of the thickness/offset properties yet.

In other words, this is an area of the feature that is indeed under-specified (even without waviness/double-lines being involved).

[charliemarlow]

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 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/rev/40e889be8ff926e32f7567957f4c316f14f6fbef/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

[jensimmons]

@charliemarlow @dholbert How hard would it be for us to make Gecko's wavy line get thicker in a way that's closer to what Safari has? Where the amplitude does not grow nearly as fast. And where the line does get thicker. Perhaps not an identical implementation, but something that's not so radically different?

[dholbert]

I suspect it wouldn't be too hard - I think we'd just need to add some subtlety & bezier math to the chunk of Gecko code that @charliemarlow linked to above. (I don't think we'd consider this as something that would block text-decoration-thickness shipping, though.)

[jensimmons]

I put this on the CSSWG call agenda, but can't make today's meeting. Please do discuss this without me (we need these to be resolved so work in Gecko is not slowed down).

For me, the question at hand is: What can we do to get something close to an interoperable result?Perhaps these underlines implementations don't need to be precisely identical. But this much difference will be a big problem for any Author who wants to use double or wavy in combinnation with thickness.

Should we:

1. Attempt to spec identical behavior? Or define some bit-more-vague guidelines?
2. What should those details be? What's reasonability possible given the realities of our different rendering engines?
3. What could be discussed on the call (with a very full agenda), decided, and worked on after by the spec writers? Or??

Personally, I prefer what's going on with Firefox's double line as it grow thicker. I'd love to see Safari (and everyone else) reduce the amount of space between the lines, and have the thickness of both each double line + space between them grow as text-underline-thickness gets bigger..... but to do so proportionately. Not 1:1:1.

As for wavy, I do believe the wavy line itself should grow thicker, not just the amplitude. Firefox's line doesn't really get thick enough for my tastes. As I adjust thickness to be thicker and thicker if feels like the line doesn't get thicker, the wave gets taller only. Also, the wavy gets taller really fast — each increment of one pixel makes a huge difference, which makes it hard for an Author to find a nuanced place in their design. Each px jumps jumps jump. I do like how thickness affects amplitude, I just wish it has less of an effect / made the wave taller less quickly.

Safari — I like how the line gets thicker, but I do wish the wave would get taller as well. A bit more like Firefox. A mashup of the two / something halfway in-between might be best.

I do understand that with the legacy of different implementation, true interop might be far more effort than it's worth. I believe we just need to get it 'in the ballpark' / get something close-ish.

[dbaron]

One other piece of context here is that it may be useful to do the same thing that borders do: I think borders have reasonable interop on the interaction of border-style: double and border-width -- however borders don't have wavy.

[css-meeting-bot]

The CSS Working Group just discussed What happens to the wavy & double lines when `text-decoration-thickness` is applied?.

The full IRC log of that discussion

<dael> Topic: What happens to the wavy & double lines when `text-decoration-thickness` is applied?
<dael> github: https://github.com//issues/4134
<dael> astearns: Should we spec how wavy lines should be drawn?
<dael> heycam: More control over these thigns, more authors will expect specific effects. Presence of thickness will make people aware of difference in render for wavy lines
<dael> AmeliaBR: Agree something should be spec. No strong opinion of what. Clear rendering def is worthwhile
<dael> Rossen_: Any expectation that this property will be different then stroke?
<dael> fantasai: Yes b/c when scaling stroke thickness you're not changing path. Here you expect thickness of line and size of wave will scale
<dael> Rossen_: Suggestion is botht he control points and stroke change?
<tantek> more thickness = lower frequency?
<dael> fantasai: Yeah b/c if you don't change control points you just get a thick line. It is spec as wavy line
<astearns> tantek: more thickness = more amplitude
<tantek> text-decoration-radius?
<fantasai> :(
<dael> AmeliaBR: Better compare at least for double line is double borders where as you scale up the total width of broder is devided between wo strokes and pace between. I'd expect that for double line. Wavy I'd expect waves to take full width. If the waves stretch to keep rpoportional curve that's unspecified since we don't define what it is to start with.
<dael> Rossen_: I'd be interested to hear behavior on differen platforms. Desktop word when scaling overall text the thickness and waviness of underlines does not change. Consistent across office products. Curious if different
<fantasai> rossen, the issue here is that the thickness of the underline is specified to change, in that case we can't be consistent with the platform if the platform isn't changing the thickness
<dael> myles: Couple points. Straight double underlines we've got platform conventions for position. Shouldn't spec gap. Wavy underlines a use case is spelling market or cjk names/titles as an honorific. The shape of those might intend to be different. SHould't give amplitude and frequency controls. If give controls should be for semantic.
<dael> myles: I don't see authors asking for high level of control on shaping underline
<dael> astearns: I don't think talkign adding properties. Just specifying something so get slightly mroe consistent rendering across brwosers and platforms
<dael> fantasai: Might need to jsut spec that for wavy lines that thickness of line as well as amplitude and frequency are meant to scale up. UA can adjust and it doesn't have to be a linear curve. If you're increasing thickness of line then amplitude and frequency needs to scale up
<dael> fantasai: Can say something similar for doubling. THickness of 2 underlines and space between should scale. Should look good in large font sizes.
<dael> astearns: We're past time. We should close this.
<dael> astearns: fantasai can you come up with a proposal for what to do?
<dael> fantasai: If people are happy with the general guidlines I can draft
<dael> astearns: Draft it, put in issues, and then we'll agenda+ for specific text
<dael> fantasai: Agree with myles shouldn't spec exact curves and amplitude.

[SebastianZ]

myles: I don't see authors asking for high level of control on shaping underline

I did a long time ago, though for a much more generalized feature for decorations, not specifically for shaping underlines.

Sebastian