Internationalization

Bidirectionality

Designing for bidirectionality is the process of adapting your product so that a user of your product is able to have the expected user experience whether the language being implemented reads from left-to-right or right-to-left. Some languages also utilize both directions, such as right-to-left for text in that dialect, and left-to-right for numbers or embedded Latin languages.

The guidelines below will help you ensure your implementation of our design system is properly aligned to be used in languages that read from RTL.

---

Text Alignment

When text is intended to be read from RTL, your text alignment must change to align with the expected direction of the language in use. When text is read from left-to-right (LTR), we expect the text to be left-aligned. This is the same with text being read from RTL, you should always align the text to the right. Consistent alignment throughout the whole page ensures readability and reduces potential for any confusion.  

Mirroring: When using RTL text, the page layout should be mirrored. This means that the page’s layout should be a replica of a page that was laid out in LTR format, just mirrored for the RTL layout.

---

Numbers & Characters

When designing your product for languages that are bidirectional or RTL, numbers and characters should not be mirrored. Only the order of the numbers or characters should be mirrored.

In the below example, you can see the difference between LTR alignment and RTL alignment, both with Arabic numerals and with Latin numerals.

Below is an example of an RTL input with validation.

Some RTL languages may have their own numbering systems. As seen above, one dialect of Arabic may use Eastern Arabic numerals, while another may use Western Arabic numerals. While Arabic text is read from right to left, numbers and numerals should be written from left to right.

---