Twenty Nineteen: Consider a custom hover/underline style

[allancole]

Originally reported by ​@afercia in the Twenty Nineteen GitHub repo:

The underline style on links using the Hoefler Text font is very thin in the Firefox browser and almost not readable, compared to other browsers (see attachments).

We should consider replacing the underline with a custom border that can be more consistent across browsers and font stacks.

More details here: ​https://github.com/WordPress/twentynineteen/pull/186#issuecomment-431418217

Original ticket here: ​https://github.com/WordPress/twentynineteen/issues/278

[allancole]

Hoefler Text underline in Safari

[allancole]

Hoefler Text underline in Firefox

[sabernhardt]

I think it's probably too late to switch to a border or similar styling.

However, both Firefox and Safari added support for ​text-decoration-thickness last year. Perhaps that could be set to 2 pixels (or an em-based measurement) for more consistency between fonts.

Maybe we also could include ​text-decoration-skip-ink for any browsers that support the property.

[danfarrow]

Add text-decoration-thickness: 2px and text-decoration-skip-ink: auto to declaration blocks containing text-decoration: underline. Rebuild style-rtl.css and style.css

[danfarrow]

While looking into this ticket I soon realised that this is an issue on Mac Firefox only.

I have uploaded a patch (my first!) but as I don't have access to a Mac I'm unable to test it.

Also I rebuilt style.css & style-rtl.css as part of the patch. I'm not sure if that was the right approach - if anybody could advise I'd be very grateful.

[sabernhardt]

@danfarrow Thanks for the patch!

As @desrosj ​noted on Slack, committers can compile the stylesheets if they are not included within the patch. Including those still can help people test patches, though.

I haven't tested (on Mac), but I see the compiled style.css removed "block-patterns" from the Tags list.

[danfarrow]

@sabernhardt That's very helpful, thank you!

I didn't spot the tag change (although it is obvious now you mention it), maybe my local repo needs updating?

I'll figure it out tomorrow

[danfarrow]

Add text-decoration-thickness: 2px and text-decoration-skip-ink: auto to declaration blocks containing text-decoration: underline. Rebuild style-rtl.css. Rebuild style.css, retaining the block-patterns tag

[danfarrow]

[Previous diff was not fixed - this one is the fixed diff!] Add text-decoration-thickness: 2px and text-decoration-skip-ink: auto to declaration blocks containing text-decoration: underline. Rebuild style-rtl.css. Rebuild style.css, retaining the block-patterns tag

[danfarrow]

@sabernhardt It appears that the block-patterns tag is missing from the repo's style.scss so I will create have created a new ticket for that #52159

I have manually removed that section from the diff and have uploaded a new version ready for testing - if anybody on a Mac is able to have a look that would be great, thank you!

[sabernhardt]

Somehow the RTL stylesheet has a thickness of 20px instead of 2.

[danfarrow]

Oh whoops somehow I failed to notice that, sorry! I will try again

[audrasjb]

Moving to Future release pending a refreshed patch.

Reminder: we simply need to replace the 20px thickness to 2px.