Text and Characters

As you reverse the layout of your UI and translate text, it's important to review the results and make adjustments as needed for readability.

Text Alignment

Although your app’s overall layout reverses in the right-to-left (RTL) context, you may need to take a more nuanced approach when aligning text blocks.

Adjust text alignment to match the interface direction, if the system doesn’t do so automatically. For example, if you left-align text with content in the left-to-right (LTR) context, right-align the text to match the content’s mirrored position in the RTL context.

Diagram showing a layout of text and images in a horizontal carousel interface. Three bars that represent text are left-aligned above a rounded rectangle area. A placeholder image is centered in the area, above another bar and smaller placeholder image at the bottom edge. The bar inside the area is left-aligned and the small placeholder image is right-aligned.

LTR

Diagram showing a layout of text and images in a horizontal carousel interface. Three bars that represent text are right-aligned above a rounded rectangle area. A placeholder image is centered in the area, above another bar and smaller placeholder image at the bottom edge. The bar inside the area is right-aligned and the small placeholder image is leftt-aligned. Neither placeholder image is flipped.

RTL

Align a paragraph — defined as three or more lines of text — based on its language, not on the current context. A paragraph is the exception to matching text alignment to interface direction. For example, left-align a paragraph that contains LTR text even when the current context is RTL. To maintain readability, continue to align one- and two-line text blocks to match the reading direction of the current context.

Image of a long paragraph on the topic of buying and storing fresh vegetables, preceded by two single lines that act as title and subtitle. The copy is displayed in a right-to-left context with the language set to Arabic. The two lines at the top are in Arabic and are both right-aligned. The paragraph is in English and is left-aligned.

RTL


White check in a green circle to indicate a correct example.

Image of a long paragraph on the topic of buying and storing fresh vegetables, preceded by two single lines that act as title and subtitle. The copy is displayed in a right-to-left context with the language set to Arabic. The two lines at the top are in Arabic and are both right-aligned. The paragraph is in English and is right-aligned.

RTL


White X in a gray circle to indicate incorrect usage.

Use a consistent alignment for all text items in a list. To ensure a comfortable reading and scanning experience, reverse the alignment of all items in a list, including items that are displayed in a different script.

Diagram of a right-aligned list in which the first, third, fourth, and fifth items are gray bars that represent right-to-left text. The second item is the phrase 'Latin text' in English.

RTL


White check in a green circle to indicate a correct example.

Diagram of a right-aligned list in which the first, third, fourth, and fifth items are gray bars that represent right-to-left text. The second item, which is the phrase 'Latin text' in English, is incorrectly left-aligned.

RTL


White X in a gray circle to indicate incorrect usage.

Numbers and Alphanumeric Characters

Although Hebrew text uses Western Arabic numerals, Arabic text might use either Western or Eastern Arabic numerals. The use of Western and Eastern Arabic numerals varies among countries and regions and even among areas within the same country or region. If your app focuses on mathematical concepts or other number-centric topics, it’s a good idea to identify the appropriate way to display such information in each locale you support. In general, it works well to rely on system-provided number representations.

From the left, the numerals one, two, and three.

Western Arabic numerals

From the right, the numerals one, two, and three.

Eastern Arabic numerals

Don’t reverse the order of numerals in a specific number. Regardless of the current language or the surrounding content, the digits in a specific number — such as “541,” a passcode, a phone number, or a credit card number — always appear in the same order.

From the left, the two words order and number in Latin script, followed by the number 523651 in Western Arabic numerals.

Latin

From the right, the two words order and number in Hebrew script, followed by the number 523651 in Western Arabic numerals.

Hebrew

From the right, the two words order and number in Arabic script, followed by the number 523651 in Western Arabic numerals.

Arabic (Western Arabic numerals)

From the right, the two words order and number in Arabic script, followed by the number 523651 in Eastern Arabic numerals.

Arabic (Eastern Arabic numerals)

Reverse the order of numerals that show progress or a counting direction — never flip the numerals themselves. Controls like progress bars, sliders, and rating controls often include numerals to clarify their meaning. If you use numerals in this way, be sure to reverse the order of the numerals to match the direction of the flipped control. Also reverse a sequence of numerals if you use the sequence to communicate a specific order.

A horizontal row of five stars. From the left, the first three and a half stars are filled. Below the stars is a row of Western Arabic numerals, each numeral horizontally aligned with a star above. From the left, the numerals are one, two, three, four, and five.

Latin

A horizontal row of five stars. From the right, the first three and a half stars are filled. Below the stars is a row of Eastern Arabic numerals, each numeral horizontally aligned with a star above. From the right, the numerals are one, two, three, four, and five.

Arabic (Eastern Arabic numerals)

A horizontal row of five stars. From the right, the first three and a half stars are filled. Below the stars is a row of Western Arabic numerals, each numeral horizontally aligned with a star above. From the right, the numerals are one, two, three, four, and five.

Hebrew

A horizontal row of five stars. From the right, the first three and a half stars are filled. Below the stars is a row of Western Arabic numerals, each numeral horizontally aligned with a star above. From the right, the numerals are one, two, three, four, and five.

Arabic (Western Arabic numerals)