WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 9 days ago

#45925 assigned enhancement

Twenty Nineteen: Consider a custom hover/underline style

Reported by: allancole Owned by: danfarrow
Milestone: 5.9 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: good-first-bug has-patch needs-refresh
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 3 years ago.
Hoefler Text underline in Safari
Firefox.png (262.4 KB) - added by allancole 3 years ago.
Hoefler Text underline in Firefox
css-text-decoration.45925.diff (6.7 KB) - added by danfarrow 10 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
css-text-decoration.45925.3.diff (6.7 KB) - added by danfarrow 10 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
css-text-decoration.45925.4.diff (6.0 KB) - added by danfarrow 10 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

Download all attachments as: .zip

Change History (19)

@allancole
3 years ago

Hoefler Text underline in Safari

@allancole
3 years ago

Hoefler Text underline in Firefox

#1 @desrosj
3 years ago

  • Milestone changed from Awaiting Review to Future Release

#2 @sabernhardt
11 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.


11 months ago

#4 @sabernhardt
11 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.


11 months ago

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


10 months ago

#8 @sabernhardt
10 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 @danfarrow
10 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

@danfarrow
10 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

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

Last edited 10 months ago by danfarrow (previous) (diff)

#11 @sabernhardt
3 months ago

  • Milestone changed from Future Release to 5.9

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


9 days ago

#13 @sabernhardt
9 days ago

  • Keywords needs-refresh added; needs-testing removed

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

#14 @danfarrow
9 days ago

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

Note: See TracTickets for help on using tickets.