4 ms·

> Firefox 70 introduces three new properties related to text decoration/underline: > text-decoration-thickness: sets the thickness of lines added via text-deco

by tyre 7y ago

> Firefox 70 introduces three new properties related to text decoration/underline: > text-decoration-thickness: sets the thickness of lines added via text-decoration. > text-underline-offset: sets the distance between a text decoration and the text it is set on. Bear in mind that this only works on underlines. > text-decoration-skip-ink: sets whether underlines and overlines are drawn if they cross descenders and ascenders. The default value, auto, causes them to only be drawn where they do not cross over a glyph. To allow underlines to cross glyphs, set the value to none. I'm so excited for these. Implementing sane underlines for headers has been a pain in the ass for far too long. Writers rejoice!

frereubu 7y ago
Don't want to rain on your parade, but this is a long way from being generally available: https://caniuse.com/#search=text-decoration-thickness https://caniuse.com/#search=text-decoration-thickness 11% coverage, and almost all of that is iOS Safari.
- frenchyatwork 7y ago
  This is one of these cases though, were coverage doesn't really matter. The fall-back is fairly reasonable.
  - frereubu 7y ago
    That's true, but if I used all CSS properties with this amount of coverage it would cause a lot of extra work for very little gain. If this is something that really gets your goat, and you use Firefox, perhaps it's worth it to scratch the itch, but otherwise pretty useless currently.
    - Vinnl 7y ago
      But if you'd otherwise use border-bottom hacks, this is a good reason to stop doing those and just have Chrome users live with the not-terrible default underline until Chrome supports those properties as well.
- marcuschristie 7y ago
  It's coming to Chromium soon > We have plans to start implementation work on this before the end of the year. https://bugs.chromium.org/p/chromium/issues/detail?id=785230#c19 https://bugs.chromium.org/p/chromium/issues/detail?id=785230...
  - frereubu 7y ago
    Thanks for the heads-up. That will make it worthwhile. It will be nice to drop the dirty border-bottom hacks.
mcrider 7y ago
Me too -- This is a real quality of life improvement for developers that work with picky designers :)
gwern 7y ago
It'll be nice to simplify underline links tremendously once that becomes implemented in IE/Edge & Safari. The existing methods for avoiding underlines overlapping text descenders like Tufte-CSS's method (https://github.com/edwardtufte/tufte-css https://github.com/edwardtufte/tufte-css) are kinda crazy looking, and also cause the occasional bug with text highlighting.
- TeMPOraL 7y ago
  Do people actually want it? Technological limitation or not, this is how things have been both in print and digital for as long as I can remember. Not to mention handwriting. I still find the non-overlapping underline weird (even if kind of neat).
  - gwern 7y ago
    I think people do; it's popular enough that many people implement it, not just Tufte-CSS, it was one of the first things I added to gwern.net once I saw it demoed, I believe Medium also does it, and no one's complained to me that they really like the overlapping obscuration.
    - zck 7y ago
      I really like the overlapping underline. Well, really I like the non-broken underline, which happens to overlap with descenders. If the underline indicating a link breaks, it looks like there are two adjacent links. To check if this is the case, I have to mouseover both the link before and after the break, and compare the URLs with my eyes. I find this a much greater annoyance then I do the overlapping underlining.
      - jamiek88 7y ago
        >If the underline indicating a link breaks, it looks like there are two adjacent links Ah that's what that is. I've seen a few like that and wondered why there were two identical links next to each other not thinking it was underline style. I'll save myself the hover now!
sings 7y ago
I wonder if the default values for offset and thickness will respect those declared in the font. And also whether sub-pixel values are allowed? I don’t know how many fonts declare these values, but it would be a shame not to use information that provides values tailored to the font in use.
- jfk13 7y ago
 Firefox has always* respected the underline position/thickness in the font. This is why in an example like data:text/html,Times Arial the Times and Arial elements get different underlines. (Safari and Chrome don't do this, they ignore the font's properties and use an arbitrary underline of their own -- which differs between the two, Chrome's being somewhat thicker.) * "Always" may not be strictly true, but it's certainly been a long time.
 - sings 7y ago
 That’s great to hear. I had assumed otherwise because of the other browsers lack of support.

by tyre 7y ago

frereubu 7y ago

Don't want to rain on your parade, but this is a long way from being generally available: https://caniuse.com/#search=text-decoration-thickness https://caniuse.com/#search=text-decoration-thickness 11% coverage, and almost all of that is iOS Safari.

frenchyatwork 7y ago
This is one of these cases though, were coverage doesn't really matter. The fall-back is fairly reasonable.
- frereubu 7y ago
  That's true, but if I used all CSS properties with this amount of coverage it would cause a lot of extra work for very little gain. If this is something that really gets your goat, and you use Firefox, perhaps it's worth it to scratch the itch, but otherwise pretty useless currently.
  - Vinnl 7y ago
    But if you'd otherwise use border-bottom hacks, this is a good reason to stop doing those and just have Chrome users live with the not-terrible default underline until Chrome supports those properties as well.
marcuschristie 7y ago
It's coming to Chromium soon > We have plans to start implementation work on this before the end of the year. https://bugs.chromium.org/p/chromium/issues/detail?id=785230#c19 https://bugs.chromium.org/p/chromium/issues/detail?id=785230...
- frereubu 7y ago
  Thanks for the heads-up. That will make it worthwhile. It will be nice to drop the dirty border-bottom hacks.

mcrider 7y ago

Me too -- This is a real quality of life improvement for developers that work with picky designers :)

gwern 7y ago

It'll be nice to simplify underline links tremendously once that becomes implemented in IE/Edge & Safari. The existing methods for avoiding underlines overlapping text descenders like Tufte-CSS's method (https://github.com/edwardtufte/tufte-css https://github.com/edwardtufte/tufte-css) are kinda crazy looking, and also cause the occasional bug with text highlighting.

TeMPOraL 7y ago
Do people actually want it? Technological limitation or not, this is how things have been both in print and digital for as long as I can remember. Not to mention handwriting. I still find the non-overlapping underline weird (even if kind of neat).
- gwern 7y ago
  I think people do; it's popular enough that many people implement it, not just Tufte-CSS, it was one of the first things I added to gwern.net once I saw it demoed, I believe Medium also does it, and no one's complained to me that they really like the overlapping obscuration.
  - zck 7y ago
    I really like the overlapping underline. Well, really I like the non-broken underline, which happens to overlap with descenders. If the underline indicating a link breaks, it looks like there are two adjacent links. To check if this is the case, I have to mouseover both the link before and after the break, and compare the URLs with my eyes. I find this a much greater annoyance then I do the overlapping underlining.
    - jamiek88 7y ago
      >If the underline indicating a link breaks, it looks like there are two adjacent links Ah that's what that is. I've seen a few like that and wondered why there were two identical links next to each other not thinking it was underline style. I'll save myself the hover now!

sings 7y ago

I wonder if the default values for offset and thickness will respect those declared in the font. And also whether sub-pixel values are allowed? I don’t know how many fonts declare these values, but it would be a shame not to use information that provides values tailored to the font in use.

jfk13 7y ago
Firefox has always* respected the underline position/thickness in the font. This is why in an example like data:text/html,Times Arial the Times and Arial elements get different underlines. (Safari and Chrome don't do this, they ignore the font's properties and use an arbitrary underline of their own -- which differs between the two, Chrome's being somewhat thicker.) * "Always" may not be strictly true, but it's certainly been a long time.
- sings 7y ago
 That’s great to hear. I had assumed otherwise because of the other browsers lack of support.