-
Notifications
You must be signed in to change notification settings - Fork 331
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve how licence description wraps in the footer #5332
Conversation
Use text-wrap: balance in browsers that support it to avoid an awkward orphan with the new typographic scale
📋 StatsFile sizes
Modules
View stats and visualisations on the review app Action run for 01a9152 |
Stylesheets changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 1bbb7da0a..f432f7cf5 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -3534,7 +3534,8 @@ screen and (forced-colors:active) {
}
.govuk-footer__licence-description {
- display: inline-block
+ display: inline-block;
+ text-wrap: balance
}
.govuk-footer__copyright-logo {
Action run for 01a9152 |
Other changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/footer/_index.scss b/packages/govuk-frontend/dist/govuk/components/footer/_index.scss
index a014f75f4..d5389c3d2 100644
--- a/packages/govuk-frontend/dist/govuk/components/footer/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/footer/_index.scss
@@ -67,7 +67,11 @@
}
.govuk-footer__licence-description {
+ // This makes the license description reflow under the logo when space gets too narrow
display: inline-block;
+ // This prevents the description from having orphans when space is narrow enough
+ // and makes the text reflow more nicely
+ text-wrap: balance;
}
.govuk-footer__copyright-logo {
Action run for 01a9152 |
Using It's less performant than normal text layout in terms of how much effort the browser has to put into rendering it, but this should be negligible for something as short as the licensing text. The lack of extensive browser support is fine, I think, given it's entirely a cosmetic enhancement and there isn't any user detriment to not having it. (Though it does bring to mind the lack of documentation we have around CSS and intended browser support, though!) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this looks great!
Add missing changelog entry for #5332
Improve how licence description wraps in the footer
Proposal for fixing the awkward orphan appearing in the licence description when the new typographic scale is enabled by using
text-wrap: balance
to let the browser balance the text of the description.Screenshots
Thoughts
This would only work in browsers that support the feature, but it feels an efficient way to enhance the footer. As a bonus, it also looks overal more visually more balanced with the crest on the right hand side.
An alternative would be to amend the content, which we could do anyway but:
text-wrap: balance
will help at that pointtext-wrap: balance
will add some safety that it will reflow OKQuestions
text-wrap: balance
look acceptable?Closes #5290.