https://phabricator.wikimedia.org/T300053

The bidirectional design is the visual translation of languages written from Left to right (LTR) to languages written from Right to left (RTL), or vice versa.

➡ Left to right (LTR) languages are those with Latin script (English, Spanish, French, German, etc.), Cyrillic (as Russian and Bulgarian), Chinese and Japanese (they maintain their top-to-bottom and Right to left (RTL) in printing and writing, but they use the Left to right (LTR) system in digital experiences).

⬅ Right to left (RTL) languages are those read from right to left as Arabic (عربى) or Hebrew (עִברִית).

Mirroring behavior

When a layout transitions from Left to right (LTR) to Right to left (RTL), or vice versa, this process is called mirroring, as it essentially mirrors the layout orientation of the other language.

Here's a list of elements that should and should not be mirrored:

✅ Do mirror

• Translated text
• Icons with horizontal orientation, like the 'arrowNext' and 'arrowPrevious' icons
• Navigation buttons
• Icons located within text fields
• Sliders, Toggle Switches, and control elements
• Rating selectors
• Paginations
• Touch gestures and navigation items

❌ Don’t mirror

• Untranslated text
• Icons without directionality, such as the 'camera' icon
• Icons held with the right hand, like the 'edit' or 'search' icons
• Icons including check symbols, such as 'success' or 'articleSearch' icons
• Phone and Zip numbers
• Components or elements representing time
• Charts and graphs if mirroring could impact data interpretation

Texts