[Discuss] Add text-decoration-skip: ink to all links on GOV.UK #281
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
NickColley
changed the title
NickColley
force-pushed
the
enable-text-decoration-skip-ink
branch
from
6e9f4f7 to
87f7dd6
Compare
|
I’m certainly happy with this idea - it’s a single change that will make things look a little nicer in a few browsers and certainly no worse in the ones that don’t support it. For what it’s worth, the Mozilla bug to support it is https://bugzilla.mozilla.org/show_bug.cgi?id=812990; Microsoft don’t mention it on their platform roadmap. |
|
Gets a 👍 from me too. |
|
Looks good 👍 - prefer these links. Might be helpful to show a smaller screenshot? Took me a second to work out what the change was. |
|
Sorry @edwardhorsford you're right, it's not so obvious. I've updated the original comment to be clearer. |
|
So looks like Safari does the |
|
I can't see anything on MDN or caniuse to suggest that |
This change is based of a design revision by Mia Allers to improve readability of links with underlines
NickColley
force-pushed
the
enable-text-decoration-skip-ink
branch
from
87f7dd6 to
09e60c4
Compare
36degrees
approved these changes
Mar 14, 2017
robinwhittleton
pushed a commit
that referenced
this pull request
Mar 16, 2017
- Fix EJS template (PR #270) - Add `theme-color` support to make the page surround in Chrome’s tab view on Android match the black GOV.UK header (PR #278) - Add `text-decoration-skip: ink` to all links on GOV.UK (PR #281) - Improve contrast of links when focused (PR #272) - Make header text colour black when focused (PR #274)
Merged
robinwhittleton
pushed a commit
that referenced
this pull request
Mar 29, 2017
- Fix EJS template (PR #270) - Add `theme-color` support to make the page surround in Chrome’s tab view on Android match the black GOV.UK header (PR #278) - Add `text-decoration-skip: ink` to all links on GOV.UK (PR #281) - Improve contrast of links when focused (PR #272) - Make header text colour black when focused (PR #274)
robinwhittleton
pushed a commit
that referenced
this pull request
Mar 29, 2017
- Fix EJS template (PR #270) - Add `theme-color` support to make the page surround in Chrome’s tab view on Android match the black GOV.UK header (PR #278) - Add `text-decoration-skip: ink` to all links on GOV.UK (PR #281) - Improve contrast of links when focused (PR #272) - Make header text colour black when focused (PR #274)
|
I think the typography in Chrome makes some of these links harder to read – looks like rogue full-stops. Chrome
Safari
|
fofr
pushed a commit
to alphagov/static
that referenced
this pull request
May 5, 2017
# 0.20.0 - Fix EJS template - PR #270 - alphagov/govuk_template#270 - Add `theme-color` support to make the page surround in Chrome’s tab view on Android match the black GOV.UK header - PR #278 - alphagov/govuk_template#278 - Add `text-decoration-skip: ink` to all links on GOV.UK - PR #281 - alphagov/govuk_template#281 - Improve contrast of links when focused - PR #272 - alphagov/govuk_template#272 - Make header text colour black when focused - PR #274 - alphagov/govuk_template#274 # 0.19.2 - Increase skiplink colour contrast - PR #263 - alphagov/govuk_template#263 - Fix Scala compile issues for Play template - PR #261 - alphagov/govuk_template#261 # 0.19.1 - Have focus outline appear outside of element rather than covering it in Safari and Chrome - PR #259 - alphagov/govuk_template#259
govuk-design-system-ci
pushed a commit
that referenced
this pull request
Jun 14, 2017
This was referenced Jun 14, 2017
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Based on some design updates Mia Allers has made, will work in Chrome Canary soon in Chrome Stable and Safari.
This prevents underlines from being drawn too close to glyphs
http://caniuse.com/#feat=text-decoration
I've included the
-webkit-prefix but having trouble as it seems like some Safari versions already skip the underline, need to investigate more...Edit: I've had a look and it seems Safari does this behaviour by default.
Be good to get some feedback on edge cases people can think where we would not want to do this globally.