Improve how licence description wraps in the footer

[romaricpascal]

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

Before	After

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:

• there would be a viewport size where an awkward orphan will appear in any case and text-wrap: balance will help at that point
• with people able to set custom content for that description, text-wrap: balance will add some safety that it will reflow OK

Questions

• Are we happy with the solution only benefitting only newer browsers. Especially for Safari, supports starts only with 17.5 shipped in May 2024. For Firefox, we're looking at Dec 2023 and Chromium May 2023 (according to Can I Use)? It obviously feels OK to me, based on the scale of the issue it's meant to solve and the fact that we can't control viewport/zoom levels anyway, but would understand if we'd want to look deeper into it.
• Does the design with text-wrap: balance look acceptable?
• Does that kind of reflow bring any readability issue due to the whitespace on the right of the content?

Closes #5290.

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	118.53 KiB
dist/govuk-frontend-development.min.js	43.63 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	90.19 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	84.69 KiB
packages/govuk-frontend/dist/govuk/all.mjs	1.05 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	118.52 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	43.62 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	4.97 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	81.8 KiB	41.48 KiB
accordion.mjs	23.5 KiB	12.39 KiB
button.mjs	5.98 KiB	2.69 KiB
character-count.mjs	22.4 KiB	9.92 KiB
checkboxes.mjs	5.83 KiB	2.83 KiB
error-summary.mjs	7.89 KiB	3.46 KiB
exit-this-page.mjs	17.1 KiB	9.26 KiB
header.mjs	4.46 KiB	2.6 KiB
notification-banner.mjs	6.26 KiB	2.62 KiB
password-input.mjs	15.15 KiB	7.25 KiB
radios.mjs	4.83 KiB	2.38 KiB
service-navigation.mjs	4.46 KiB	2.69 KiB
skip-link.mjs	4.39 KiB	2.18 KiB
tabs.mjs	10.05 KiB	6.06 KiB

View stats and visualisations on the review app

---

Action run for 01a9152

[github-actions]

Stylesheets changes to npm package

diff --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

[github-actions]

Other changes to npm package

diff --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

[querkmachine]

Using text-balance for this is a very neat way of handling this!

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!)

[mia-allers-gds]

I think this looks great!