Prevent panel text overflowing when zoomed in on mobile #2347
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
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2347
36degrees
reviewed
Sep 15, 2021
hannalaakso
force-pushed
the
fix-panel-text-resized
branch
from
7083b44
to
2d374d3
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2347
hannalaakso
force-pushed
the
fix-panel-text-resized
branch
from
2d374d3
to
8de54e3
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2347
hannalaakso
changed the title
hannalaakso
added a commit
that referenced
this pull request
Sep 23, 2021
What the problem is Prevent text in the panel component from overflowing on mobile zoom. This overflowing is more likely to happen when user increases text size on a mobile eg. using iOS Safari text resize controls. The overflowing is a particular problem with the panel component since it uses white text. When the text overflows the container, it is invisible on the white (page) background. When the text in our other components overflow, the user might have to scroll horizontally to view it but the the text remains legible. We should aim to meet the WCAG Text resize Success criterion which requires that text can be scaled up to 200%. How this fixes it Decrease the padding on mobile to allow the text flow better. As an if-all-else-fails attempt to stop very long words from clipping, force them to break and wrap instead. Hopefully this is not something that would happen often since we’re reducing the padding to help with this. We additionally considered reducing the font size of the heading on a mobile to avoid the text wrapping at very narrow viewports. However, the `govuk-font` mixin uses the responsive font scale which fixes font sizes for different breakpoints to make components behave consistently. There currently isn’t a way to override those set font sizes for `govuk-font`. Since the other fixes in this commit go a long way towards solving this issue and we haven’t come across this requirement with our other components so far, we’re hesitant to add such new feature to `govuk-font` at this point, but we’ll keep an eye out for similar requirements in the future. We also considered progressively enhancing any words that wrap by using `hyphens: auto` to hyphenate them. However, we found that iOS Safari can omit the dash from some words but not others, or hyphenating unnecessarily; it seems that it would be introducing more issues than it would be solving. See #2347 for more details.
hannalaakso
force-pushed
the
fix-panel-text-resized
branch
from
8de54e3
to
cbe2b86
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2347
36degrees
approved these changes
Sep 27, 2021
|
Although I think the PR description needs updating now that we're no longer using
|
What the problem is Prevent text in the panel component from overflowing on mobile zoom. This overflowing is more likely to happen when user increases text size on a mobile eg. using iOS Safari text resize controls. The overflowing is a particular problem with the panel component since it uses white text. When the text overflows the container, it is invisible on the white (page) background. When the text in our other components overflow, the user might have to scroll horizontally to view it but the the text remains legible. We should aim to meet the WCAG Text resize Success criterion which requires that text can be scaled up to 200%. How this fixes it Decrease the padding on mobile to allow the text flow better. As an if-all-else-fails attempt to stop very long words from clipping, force them to break and wrap instead. Hopefully this is not something that would happen often since we’re reducing the padding to help with this. We additionally considered reducing the font size of the heading on a mobile to avoid the text wrapping at very narrow viewports. However, the `govuk-font` mixin uses the responsive font scale which fixes font sizes for different breakpoints to make components behave consistently. There currently isn’t a way to override those set font sizes for `govuk-font`. Since the other fixes in this commit go a long way towards solving this issue and we haven’t come across this requirement with our other components so far, we’re hesitant to add such new feature to `govuk-font` at this point, but we’ll keep an eye out for similar requirements in the future. We also considered progressively enhancing any words that wrap by using `hyphens: auto` to hyphenate them. However, we found that iOS Safari can omit the dash from some words but not others, or hyphenating unnecessarily; it seems that it would be introducing more issues than it would be solving. See #2347 for more details.
hannalaakso
changed the title
hannalaakso
changed the title
hannalaakso
force-pushed
the
fix-panel-text-resized
branch
from
cbe2b86
to
d3fe242
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2347
1 task
vanitabarrett
pushed a commit
that referenced
this pull request
Sep 27, 2021
What the problem is Prevent text in the panel component from overflowing on mobile zoom. This overflowing is more likely to happen when user increases text size on a mobile eg. using iOS Safari text resize controls. The overflowing is a particular problem with the panel component since it uses white text. When the text overflows the container, it is invisible on the white (page) background. When the text in our other components overflow, the user might have to scroll horizontally to view it but the the text remains legible. We should aim to meet the WCAG Text resize Success criterion which requires that text can be scaled up to 200%. How this fixes it Decrease the padding on mobile to allow the text flow better. As an if-all-else-fails attempt to stop very long words from clipping, force them to break and wrap instead. Hopefully this is not something that would happen often since we’re reducing the padding to help with this. We additionally considered reducing the font size of the heading on a mobile to avoid the text wrapping at very narrow viewports. However, the `govuk-font` mixin uses the responsive font scale which fixes font sizes for different breakpoints to make components behave consistently. There currently isn’t a way to override those set font sizes for `govuk-font`. Since the other fixes in this commit go a long way towards solving this issue and we haven’t come across this requirement with our other components so far, we’re hesitant to add such new feature to `govuk-font` at this point, but we’ll keep an eye out for similar requirements in the future. We also considered progressively enhancing any words that wrap by using `hyphens: auto` to hyphenate them. However, we found that iOS Safari can omit the dash from some words but not others, or hyphenating unnecessarily; it seems that it would be introducing more issues than it would be solving. See #2347 for more details.
This was referenced Sep 27, 2021
vanitabarrett
pushed a commit
that referenced
this pull request
Sep 28, 2021
What the problem is Prevent text in the panel component from overflowing on mobile zoom. This overflowing is more likely to happen when user increases text size on a mobile eg. using iOS Safari text resize controls. The overflowing is a particular problem with the panel component since it uses white text. When the text overflows the container, it is invisible on the white (page) background. When the text in our other components overflow, the user might have to scroll horizontally to view it but the the text remains legible. We should aim to meet the WCAG Text resize Success criterion which requires that text can be scaled up to 200%. How this fixes it Decrease the padding on mobile to allow the text flow better. As an if-all-else-fails attempt to stop very long words from clipping, force them to break and wrap instead. Hopefully this is not something that would happen often since we’re reducing the padding to help with this. We additionally considered reducing the font size of the heading on a mobile to avoid the text wrapping at very narrow viewports. However, the `govuk-font` mixin uses the responsive font scale which fixes font sizes for different breakpoints to make components behave consistently. There currently isn’t a way to override those set font sizes for `govuk-font`. Since the other fixes in this commit go a long way towards solving this issue and we haven’t come across this requirement with our other components so far, we’re hesitant to add such new feature to `govuk-font` at this point, but we’ll keep an eye out for similar requirements in the future. We also considered progressively enhancing any words that wrap by using `hyphens: auto` to hyphenate them. However, we found that iOS Safari can omit the dash from some words but not others, or hyphenating unnecessarily; it seems that it would be introducing more issues than it would be solving. See #2347 for more details.
EoinShaughnessy
changed the title
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.
As discussed in #2173, the panel heading text can overflow its container when a user increases text size on a mobile eg. using iOS Safari text resize controls. The overflowing is a particular problem with the panel component since it uses white text. When the text overflows the container, it is invisible on the white (page) background. When the text in our other components overflow, the user might have to scroll horizontally to view it but the the text remains legible.
We should aim to meet the WCAG Text resize Success criterion which requires that
How we fix this
To help fix this, this PR:
Possible future improvements
We additionally considered reducing the font size of the heading on a mobile to avoid the text wrapping at very narrow viewports. However, the
govuk-fontmixin uses the responsive font size map which fixes font sizes for different breakpoints to make our components behave consistently. There currently isn’t a way to override those set font sizes forgovuk-font. Since the other fixes in this commit go a long way towards solving this issue and we haven’t come across this requirement with our other components so far, we’re hesitant to add this new feature togovuk-fontat this point, but we’ll keep an eye out for similar requirements in the future.We could consider adding something to the panel guidance about the need to keep the panel heading wording concise.
iOS 12 mini in Safari at 100% (no zoom)
Before
After
iOS 12 mini at 150% zoom
Before
After
iOS 12 mini at 200% zoom
Before
After
We decided not to hyphenate words that wrap
We also considered progressively enhancing any words that wrap by using
hyphens: autoto hyphenate them but this seemed to potentially introduce more problems than it was solving. For instance, we found that iOS Safari can omit the dash from some words but not others, see below:iOS Safari can also hyphenate words unnecessarily, see below:
Fixes #2173