Improve word wrapping in summary list component #1220
Merged
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
Use readable English to better highlight any issues with wrapping
Check how wrapping behaves in the context we expect.
In order to use overflow-wrap with table CSS we need to use a fixed layout. This means we can't rely on a table's automatic resizing, so we have to compromise with a larger 'actions' column that we have before.
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1220
36degrees
approved these changes
Feb 28, 2019
There was a problem hiding this comment.
Generally looks a lot better to me 👍
Improvements most obvious in IE, Edge and Firefox.
Chrome 70 (macOS)
Before
After
Chrome 71 (macOS)
Before
After
Firefox 62 (macOS)
Before
After
Safari 12 (macOS)
Before
After
IE 8 (Windows 7)
Before
After
IE 9 (Windows 7)
Before
After
IE 10 (Windows 8)
Before
After
IE 11 (Windows 10)
Before
After
Chrome 71 (Windows 10)
Before
After
Chrome 70 (Windows 10)
Before
After
Edge 18 (Windows 10)
Before
After
Firefox 62 (Windows 10)
Before
After
Android 7.1 (Google Pixel)
Before
After
Android 8.0 (Google Pixel 2)
Before
After
Android 9.0 (Google Pixel 2)
Before
After
iOS 10 (iPhone 7)
Before
After
iOS 11 (iPhone 8)
Before
After
iOS 10 (iPhone XR)
Before
After
|
I got an approval from @dashouse over Slack for this so I'm going to push forwards and get it merged thanks again for the great review @36degrees |
|
Need to add a CHANGELOG entry for this, will follow up in a second. |
Merged
chrimesdev
added a commit
to nhsuk/nhsuk-frontend
that referenced
this pull request
Mar 11, 2019
Following the improvements to the GOV.UK frontend summary list component alphagov/govuk-frontend#1220 these changes have been applied.
chrimesdev
added a commit
to nhsuk/nhsuk-frontend
that referenced
this pull request
Mar 11, 2019
Following the improvements to the GOV.UK frontend summary list component alphagov/govuk-frontend#1220 these changes have been applied.
chrimesdev
added a commit
to nhsuk/nhsuk-frontend
that referenced
this pull request
Mar 11, 2019
Following the improvements to the GOV.UK frontend summary list component alphagov/govuk-frontend#1220 these changes have been applied.
chrimesdev
added a commit
to nhsuk/nhsuk-frontend
that referenced
this pull request
Mar 11, 2019
Following the improvements to the GOV.UK frontend summary list component alphagov/govuk-frontend#1220 these changes have been applied.
chrimesdev
added a commit
to nhsuk/nhsuk-frontend
that referenced
this pull request
Mar 11, 2019
Following the improvements to the GOV.UK frontend summary list component alphagov/govuk-frontend#1220 these changes have been applied.
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.
This seems like a problem where we have to make some compromises.
The summary list currently wraps text in all browsers, but only in blink/webkit does it wrap entire words, all other browsers it can wrap mid word which can make it more difficult to read.
To make this better we want to try and use
overflow-wrapwhich works cross browsers, however...In order to use
overflow-wrapwith table CSS we need to use a fixed layout since the summary list uses table CSS.This means we can't rely on a table's automatic resizing, so we have to compromise
with a larger actions column that we have before, so that we can have at least two actions on one line without the actions wrapping.
Welcome any input to an alternative that I may have missed.
I have also considered that this might be best solved with CSS Grid but have discounted that for now based on the support for browsers.
You can take a look at the two by comparing:
Before
Screenshots
After
Pros
Cons
Screenshots
Related links
Aims to resolve #1211