govuk-design-system-backlog
govuk-design-system-backlog copied to clipboard
alphagov
Right-to-left (RTL) language support
What
Add support for right-to-left (RTL) languages to GOV.UK Frontend components.
Why
A number of pages on GOV.UK are made available in RTL languages, however they tend to insert RTL content into the same layout used by left-to-right (LTR) languages instead of mirroring the entire interface, as is typical for RTL languages. For example, in RTL languages a right-pointing arrow indicates moving backwards, whereas a left-pointing arrow indicates progress.
RTL languages are currently in use in various areas of GOV.UK. (Google search results are for a rough indication of how widely used each language is.)
- Arabic (Google search results, example page)
- Persian (Farsi) (Google search results, example page)
- Dari Persian (Google search results, example page)
- Hebrew (Google search results, example page)
- Pashto (Google search results, example page)
- Shahmukhi Punjabi (Google search results, example page)
- Urdu (Google search results, example page)
GOV.UK's lack of RTL support produces unexpected layouts in situation where RTL languages are already in use (though many of these instances are with publishing components and not Frontend):
- https://www.gov.uk/government/announcements.ar
- The email and RSS notification links are misaligned and have incorrect margins.
- https://www.gov.uk/government/publications/screening-tests-for-you-and-your-baby.ur
- Page metadata appears reversed (value appears before key) due to left floats.
- Date format appears scrambled due to trying to automatically interpolate LTR content into an RTL context.
- Email alerts button has incorrect margins.
- https://www.gov.uk/government/publications/coronavirus-covid-19-rapid-lateral-flow-home-test-kit-instructions-for-nose-only-test.ar
- Indent text component doesn't appear indented, as the indent is on the wrong side.
There are some situations where RTL language content has only been made available in PDF format, potentially due to restrictions with creating this content in HTML, which creates an accessibility barrier for end users. For example, detention rights are available in English as a HTML page but must be downloaded as a PDF for Arabic, Farsi and Urdu speakers.
In an audit of content published on GOV.UK between March 2019 and February 2020 (not public data, sorry!):
- Arabic was the 3rd most published language, after English and Welsh.
- Farsi was 12th, ahead of common western European languages such as Portuguese (14th) and German (18th).
- Urdu and Hebrew were joint 23rd, ahead of many eastern European languages like Czech and Serbian (joint 27th), and Estonian and Hungarian (joint 31st).
- Dari ranked 37th, tied with Irish and several northern European languages like Swedish, Norwegian, Icelandic, Finnish and Danish.
I have been thinking about this recently, the time might be approaching to replace the use of floats for the grid layouts and components on GOV.UK.
No doubt this has been discussed already in GDS but using CSS Grid or Flexbox would make this much easier to do and maintain.
Some of the most troublesome parts of handling RTL layouts are starting to go away (as browsers roll out of use). For example, the need to adjust the direction of spacing, such as switching a margin-right to a margin-left, etc can be avoided by using the CSS gap property.
Also "source order" of layout elements is less tricky when using CSS Grid or Flexbox.
I think this is an excellent suggestion and would make GOVUK much more accessible and inclusive. How to achieve this is what will take a lot of thought. I'd be very happy to contribute to any discussions or workshops.
Another, possibly complementary, approach would be to embrace the use of Logical Properties and Values, and rewrite our CSS to use logical properties (like start and end) rather than physical ones (left and right).
Although the spec is supported by current versions of all the evergreen browsers, the spec is relatively new, a little unstable, and most people haven't even heard of it, let alone feel comfortable using it. There's a bit of a learning curve if we want to take that route.
Agree I'm looking forward to using logical properties and did some experiments not long ago. I tried using a post-processor to cleverly switch them out whilst generating a fall-back stylesheet for older IEs but I backed out of it slowly because:
- It got super complicated fast
- I suspected it would introduce an auto-magic box people wouldn't easily be able to debug or trust.