Add guidance for break-word override class

[querkmachine]

We added a new typography override class (govuk-!-text-break-word) into govuk-frontend that breaks long words across multiple lines if the word would otherwise not fit into its parent container. alphagov/govuk-frontend#5159

The most common example of this is probably long email addresses on narrow viewports, but it may also be an issue for the text in data tables, technical and scientific terms, or when localising content into languages with long compound words such as German.

This is a first pass at some guidance about the override class.

Quick link to the draft guidance.

Warning

This should not be merged until a version of GOV.UK Frontend featuring the override class has been released.

Note

The code example included won't appear correctly until after a new release of Frontend is made and merged with the Design System website.

Changes

• Adds a new section to the font override classes page: "Breaking up long words"
• Adds an example of the class in use by itself and in combination with the wbr HTML tag.

Thoughts

Inclusion of wbr guidance

I've included a paragraph and an example that shows the class being used in conjunction with the wbr HTML element. This element indicates where it is 'safe' to break a long word across multiple lines.

Using wbr isn't required to use the class at all, but it's a useful companion to what problems the class is intended to solve. It's a somewhat obscure element, so calling it out here specifically seemed like it might be useful.

Visual explainer of what wbr actually does

To illustrate what it does visually, given this HTML:

<p>Send an email to <span class="govuk-!-text-break-word">big.john@theoldassemblybuilding.fake</span>.</p>

Without wbr, the email address could be wrapped at any point, leading to potentially confusing (or rude) 'partial' sentences in narrow content containers.

=====================
Send an email to big.
john@theoldassemblybu
ilding.fake.

==========================
Send an email to big.john@
theoldassemblybuilding.fak
e.

===================================
Send an email to big.john@theoldass
emblybuilding.fake.

By adding wbrs into the HTML content, we can define where to prioritise line breaks should one need to occur:

<p>Send an email to <span class="govuk-!-text-break-word">big.john<wbr>@<wbr>the<wbr>old<wbr>assembly<wbr>building.fake</span>.</p>

This basically creates a list of 'segments' that we don't want line breaks to appear within:

• big.john
• @
• the
• old
• assembly
• building.fake

(Note that there is still potential for line breaks to appear within a segment, but this will now only happen if the individual segment is itself too long for the containing element.)

At similar container widths to the above, you'll now end up with something like:

=====================
Send an email to 
big.john@theold
assembly
building.fake.

==========================
Send an email to big.john@
theoldassembly
building.fake.

===================================
Send an email to big.john@theold
assemblybuilding.fake.

Given it isn't directly related to the override class, I'm not sure if including this is extraneous or has the potential to confuse or mislead. It would be simpler to omit it, but it also feels like it could be helpful for a subset of users.

[netlify]

✅ You can preview this change here:

Name	Link
🔨 Latest commit	3f941ab
🔍 Latest deploy log	https://app.netlify.com/sites/govuk-design-system-preview/deploys/66b5db9c67623f00088a5683
😎 Deploy Preview	https://deploy-preview-3968--govuk-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[seaemsi]

Looks good! I've suggested some style changes for readability