WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 3 weeks ago

#45925 assigned enhancement

Twenty Nineteen: Consider a custom hover/underline style

Reported by: allancole Owned by: danfarrow
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: good-first-bug has-patch needs-testing
Focuses: accessibility, css Cc:

Description

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

Attachments (5)

Safari.png (222.0 KB) - added by allancole 2 years ago.
Hoefler Text underline in Safari
Firefox.png (262.4 KB) - added by allancole 2 years ago.
Hoefler Text underline in Firefox
css-text-decoration.45925.diff (6.7 KB) - added by danfarrow 4 weeks ago.
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
css-text-decoration.45925.3.diff (6.7 KB) - added by danfarrow 3 weeks ago.
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
css-text-decoration.45925.4.diff (6.0 KB) - added by danfarrow 3 weeks ago.
[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

Download all attachments as: .zip

Change History (15)

@allancole
2 years ago

Hoefler Text underline in Safari

@allancole
2 years ago

Hoefler Text underline in Firefox

#1 @desrosj
2 years ago

  • Milestone changed from Awaiting Review to Future Release

#2 @sabernhardt
2 months ago

  • Focuses accessibility css added

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.

This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.


6 weeks ago

#4 @sabernhardt
6 weeks ago

  • Keywords good-first-bug added
  • Owner set to danfarrow
  • Status changed from new to assigned

This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.


6 weeks ago

@danfarrow
4 weeks ago

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

#6 @danfarrow
4 weeks ago

  • Keywords has-patch needs-testing added; needs-patch removed

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.

This ticket was mentioned in Slack in #accessibility by danfarrow. View the logs.


4 weeks ago

#8 @sabernhardt
4 weeks ago

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

#9 @danfarrow
4 weeks ago

@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
3 weeks ago

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
3 weeks ago

[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

#10 @danfarrow
3 weeks ago

@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!

Last edited 3 weeks ago by danfarrow (previous) (diff)
Note: See TracTickets for help on using tickets.