Opened 2 years ago
Last modified 4 months ago
#45925 assigned enhancement
Twenty Nineteen: Consider a custom hover/underline style
Reported by: |
|
Owned by: |
|
---|---|---|---|
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)
Change History (15)
#2
@
5 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.
5 months ago
#4
@
5 months 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.
5 months ago
@
4 months 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
@
4 months 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 months ago
#8
@
4 months 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
@
4 months 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
@
4 months 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
@
4 months 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
@
4 months 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!
Hoefler Text underline in Safari