Create override classes for text alignment

[hannalaakso]

What

Re: @edwardhorsford's comment, it would be useful to have override classes for aligning text and table cell content to left, right and middle.

.govuk-!-align-left
.govuk-!-align-right
.govuk-!-align-center

These classes would respectively set text-align to left, right and center. The naming is inline with the display classes which are .govuk-!-display-block, .govuk-!-inline etc.

Why

This is a very common and generic requirement and utility classes like this exist in other popular frameworks like Bootstrap.

Who needs to know about this

Devs, Stephen

Done when

• We've added the classes
• We've created a card for relevant guidance in the Design System

[hannalaakso]

Was going to pick this up but have a couple of questions on the language used. Will poll other devs for thoughts.

1. Should the class be called .govuk-!-align-left or .govuk-!-text-align-left?
   The first one is more succinct and text-align is sometimes used for aligning things other than text (although it works most reliably for text).
   The second one is more accurate and I notice this is the approach that Bootstrap take.

2. Should we use the British spelling 'centre' in the class name (ie. .govuk-!-text-align-centre), even though the CSS rule it contains is text-align: center. We already go with the British spelling in govuk-colour so this would be consistent (and follows the style guide). In this particular instance it might not be what teams would expect (whereas they’re probably more used to the spelling of the colour mixins/classes as they are used everywhere) but I think we need to be consistent with this.

[36degrees]

1. Should the class be called .govuk-!-align-left or .govuk-!-text-align-left?
   The first one is more succinct and text-align is sometimes used for aligning things other than text (although it works most reliably for text).
   The second one is more accurate and I notice this is the approach that Bootstrap take.

Worth noting that it looks like Bootstrap use logical properties in their class names (start / center / end), even though under the hood they map to left, center, right – which appears to be something that was introduced in v5. Although we don't currently support RTL, we might want to consider doing something similar to try and future-proof things a little. Arguably less clear for our users though.

[hannalaakso]

As discussed in dev time earlier, we will go with

.govuk-!-text-align-right
.govuk-!-text-align-left
.govuk-!-text-align-centre

since text-align in the name explains the rule and is easily understandable. start/end classes are also something we should keep in mind, especially if we started supporting RTL, but we could add those in the future in addition to the above, instead of replacing them.