Header component - long service names continue onto a new line

[Chirag-Bhatti]

Context

When supplying a long service name to the header component, the service name may "overflow" onto a new line.
See screenshot for example:

Though not a problem in itself, it can make the header and service name look untidy and harder to read.
It also seems the GOV.UK part of the header won't centre vertically in the header, and sits towards of the top instead which can look odd.

A few options that might be useful for such scenarios are:

• Be able to change the size of the service name through Nunjucks macro options so it can fit on one line (maybe similar to how heading element text can be given a large, medium or small class size for example)
• Be able to make the service name appear under the GOV.UK part instead, similar to how the component displays for smaller screen sizes to help make it easier to read e.g.
  
• Provide other formatting options (maybe some margin-right or centred text rather than left-aligned) so that more of the words are spread over two lines (rather than just one or two hanging spilling onto the second line) or to make it easer to read over two lines.

Related component

This relates to the existing header component here

[github-actions]

Uh oh! @Chirag-Bhatti, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[querkmachine]

Hi @Chirag-Bhatti,

Thanks for the feedback, but I don't think that this is something we want to change at the moment.

To go through it with a finer comb:

When supplying a long service name to the header component, the service name may "overflow" onto a new line.

Though not a problem in itself, it can make the header and service name look untidy and harder to read.

It's expected that the header change in height in response to its contents, including particularly long service names, navigational elements, search forms, and so on.

It also seems the GOV.UK part of the header won't centre vertically in the header, and sits towards of the top instead which can look odd.

This is intentional, so that the GOV.UK logo and link is consistently located in the same position on every page.

Be able to change the size of the service name through Nunjucks macro options so it can fit on one line (maybe similar to how heading element text can be given a large, medium or small class size for example)

This would mess with the hierarchy of the header's contents. The GOV.UK text is largest, followed by the service or product name, followed by navigation.

We don't—and other teams shouldn't—aim to optimise the viewing experience favouring any particular screen size. Shrinking the service name to fit on one line on one viewport size just means there's a slightly narrower viewport or slightly higher zoom level where it now wraps instead. Embrace that text can wrap, rather than try to fight it.

Be able to make the service name appear under the GOV.UK part instead, similar to how the component displays for smaller screen sizes to help make it easier to read

I don't think this is something we want to do for consistency reasons. Service names and navigation changing places between different services isn't ideal, we'd want them to be consistently in the same place.

Some of our current ongoing work involves potentially moving the service name out of the header, likely to appear below the GOV.UK logo instead, though that isn't a certainty at the moment.

Provide other formatting options (maybe some margin-right or centred text rather than left-aligned) so that more of the words are spread over two lines (rather than just one or two hanging spilling onto the second line) or to make it easer to read over two lines.

We advise against using centre-aligned text for accessibility reasons. It can make content harder to read for users with literacy difficulties (e.g. dyslexia) or using screen magnifiers to read.

I don't think adding the ability to apply additional as an option in the component itself is something we would do, as it's too situational and subjective to be of widespread use. This could be a situation that the recent text-wrap: balance value would be a good candidate for, though.

Hopefully our stance here makes sense. Feel free to ask any follow up questions you might have.