Layout and text direction
The layout of the content must be adapted for RTL languages.
- In Western languages, the layout is typically left-aligned, with text and images arranged from left to right.
- In RTL languages, the layout is right-aligned, with text and images arranged from right to left. This can impact the positioning of elements such as icons, logos and navigation bars. It's also important to consider the impact on the overall design and visual hierarchy of the content. For example, graphics may need to be flipped, and menus and navigation bars may need to be moved to the right side of the screen.
General flow of content
UI elements go in the same order as the LTR UI, but starting from the right margin. An element in position 1 is followed by the element in position 2, then 3 but they flow from right to left, as shown in the images below.
Text direction and alignment
One of the most important considerations when localizing content for RTL languages is the content alignment and direction of the text. All text, including headings, body copy and buttons, must be aligned to the right. This may seem simple, but it can have a significant impact on the design of the content.
Full paragraphs of text in an untranslated LTR language, however, remain left-aligned.
Left: A page in a LTR language—only full paragraphs are right-aligned when in an RTL
language.
Right: A page in a RTL language—only full paragraphs are left-aligned when
in a LTR language.
Buttons
Flip the order of button groups so that the primary button goes on the left and secondary buttons go on the right.
Don’t move key button groups like “Save” actions. Center them instead to allow users to reach them comfortably with their thumbs on mobile devices. Ask the Internationalization Team for feedback on placement of new action buttons; they can test positions as part of an RTL QA.