Right to left

Support right-to-left languages like Arabic and Hebrew by reversing your interface as needed to match the reading direction of the related scripts.

When people choose a language for their device — or just your app or game — they expect the interface to adapt in various ways (to learn more, see Localization).

System-provided UI frameworks support right-to-left (RTL) by default, enabling system-provided UI components to flip automatically in the RTL context. If you use system-provided elements and standard layouts, you might not need to make any changes to your app’s automatically reversed interface.

If you want to fine-tune your layout or enhance specific localizations to adapt to different currencies, numerals, or mathematical symbols that can occur in various locales in countries that use RTL languages, follow these guidelines.

Text alignment

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.

Left-aligned text in the LTR context

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 left-aligned. Neither placeholder image is flipped.

Right-aligned content in the RTL context

Align a paragraph based on its language, not on the current context. When the alignment of a paragraph — defined as three or more lines of text — doesn’t match its language, it can be difficult to read. For example, right-aligning a paragraph that consists of LTR text can make the beginning of each line difficult to see. To improve readability, continue aligning one- and two-line text blocks to match the reading direction of the current context, but align a paragraph to match its language.

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.

A left-aligned paragraph in the RTL context


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.

A right-aligned paragraph in the RTL context


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.

Right-aligned content in the RTL context


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.

Mixed alignment in the RTL content


White X in a gray circle to indicate incorrect usage.

Numbers and characters

Different RTL languages can use different number systems. For example, Hebrew text uses Western Arabic numerals, whereas 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 contrast, apps that don’t focus on number-related topics can generally 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 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)

Controls

Flip controls that show progress from one value to another. Because people tend to view forward progress as moving in the same direction as the language they read, it makes sense to flip controls like sliders and progress indicators in the RTL context. When you do this, also be sure to reverse the positions of the accompanying glyphs or images that depict the beginning and ending values of the control.

Partial screenshot of the Books app's display adjustment popover in English on iPhone. At the top of the popover, a slider uses a small sun glyph on the left and a large sun glyph on the right to show that moving the thumb from left to right makes the display brighter. Below the slider is a row of two buttons. The left button uses a small capital letter A to indicate the text getting smaller and the right button uses a large capital letter A to indicate the text getting larger.

Directional controls in the LTR context

Partial screenshot of the Books app's display adjustment popover in Arabic on iPhone. At the top of the popover, a slider uses a small sun glyph on the right and a large sun glyph on the left to show that moving the thumb from right to left makes the display brighter. Below the slider is a row of two buttons. The right button uses a small version of the letter Ain to indicate the text getting smaller and the left button uses a large version of the letter Ain to indicate the text getting larger.

Directional controls in the RTL context

Flip controls that help people navigate or access items in a fixed order. For example, in the RTL context, a back button must point to the right so the flow of screens matches the reading order of the RTL language. Similarly, next or previous buttons that let people access items in an ordered list need to flip in the RTL context to match the reading order.

Preserve the direction of a control that refers to an actual direction or points to an onscreen area. For example, if you provide a control that means “to the right,” it must always point right, regardless of the current context.

Visually balance adjacent Latin and RTL scripts when necessary. In buttons, labels, and titles, Arabic or Hebrew text can appear too small when next to uppercased Latin text, because Arabic and Hebrew don’t include uppercase letters. To visually balance Arabic or Hebrew text with Latin text that uses all capitals, it often works well to increase the RTL font size by about 2 points.

A horizontal row of three black oval buttons. Each button is labeled with the word download. From the left, the labels are in Latin, Arabic, and Hebrew scripts, with the English label using all capital letters. Two horizontal pink lines run across all three buttons, the top line is the ascender line and the bottom line is the baseline. Every letter in the English label touches both lines. Every letter in the Arabic label touches or extends below the baseline; only the last letter touches the ascender line. No letters in the Hebrew label touch either line. In comparison with the Latin label, both the Arabic and Hebrew labels look small.

Arabic and Hebrew text can look too small next to uppercased Latin text of the same font size.


A horizontal row of three black oval buttons. Each button is labeled with the word download. From the left, the labels are in Latin, Arabic, and Hebrew scripts, with the English label using all capital letters. Two horizontal pink lines run across all three buttons, the top line is the ascender line and the bottom line is the baseline. Every letter in the English label touches both lines. Every letter in the Arabic label touches or extends below the baseline, and the first and last letters extend above the ascender line. All letters in the Hebrew label touch the base line and almost touch the ascender line. The increased size of the Arabic and Hebrew labels make them look similar in size to the Latin label.

You can slightly increase the font size of Arabic and Hebrew text to visually balance uppercased Latin text.

Images

Avoid flipping images like photographs, illustrations, and general artwork. Flipping an image often changes the image’s meaning; flipping a copyrighted image could be a violation. If an image’s content is strongly connected to reading direction, consider creating a new version of the image instead of flipping the original.

Simplified diagram of a globe that uses solid black shapes to show most of Africa, Europe, Asia, Australia, and Antarctica on a solid blue background.
White check in a green circle to indicate a correct example.

Simplified diagram of a blue globe that shows a horizontally flipped Eastern hemisphere with Africa on the far right and Australia on the far left.
White X in a gray circle to indicate incorrect usage.

Reverse the positions of images when their order is meaningful. For example, if you display multiple images in a specific order like chronological, alphabetical, or favorite, reverse their positions to preserve the order’s meaning in the RTL context.

Diagram showing a layout of text and images within a rounded rectangle. A short bar representing text is left-aligned in the upper-left corner. Below the bar is an area that contains four squares, including a blue square with a placeholder image on the left side. From the left, a row of five square areas at the bottom of the rectangle contain the following shapes: triangle, square, star, circle, and heart.

Items with meaningful positions in the LTR context

Diagram showing a layout of text and images within a rounded rectangle. A short bar representing text is right-aligned in the upper-right corner. Below the bar is an area that contains four squares, including a blue square with a placeholder image on the right side. From the right, a row of five square areas at the bottom of the rectangle contain the following shapes: triangle, square, star, circle, and heart.

Items with meaningful positions in the RTL context

Interface icons

When you use SF Symbols to supply interface icons for your app, you get variants for the RTL context and localized symbols for Arabic and Hebrew, among other languages. If you create custom symbols, you can specify their directionality. For developer guidance, see Creating custom symbol images for your app.

Three horizontal lines, stacked evenly on top of each other. Each line is preceded by a bullet on left.

The shape of a closed book with its spine on the left.

A rounded rectangle containing a left-aligned row of three dots. A pencil is slanted at about forty-five degrees, with its point right of the rightmost dot and its eraser extending out of the top-right corner of the rectangle.

A rounded rectangle with a black bar across the top that occupies about a quarter of the rectangle's height. A left-aligned row of white dots is in the left side of the bar.

A rounded rectangle that contains a smaller, solid-black rounded rectangle near the left side. Outside the rectangle and to the right is a solid-black semicircle with a vertical straight edge that's close to the vertical right side of the rectangle.

LTR variants of directional symbols

Three horizontal lines, stacked evenly on top of each other. Each line is preceded by a bullet on right.

The shape of a closed book with its spine on the right.

A rounded rectangle containing a right-aligned row of three dots. A pencil is slanted at about forty-five degrees, with its point left of the leftmost dot and its eraser extending out of the middle of the rectangle's top.

A rounded rectangle with a black bar across the top that occupies about a quarter of the rectangle's height. A right-aligned row of white dots is in the right side of the bar.

A rounded rectangle that contains a smaller, solid-black rounded rectangle near the right side. Outside the rectangle and to the left is a solid-black semicircle with a vertical straight edge that's close to the vertical left side of the rectangle.

RTL variants of directional symbols

Flip interface icons that represent text or reading direction. For example, if an interface icon uses left-aligned bars to represent text in the LTR context, right-align the bars in the RTL context.

A rounded rectangle that contains three horizontal left-aligned lines.

LTR variant of a symbol that represents text

A rounded rectangle that contains three horizontal right-aligned lines.

RTL variant of a symbol that represents text

Consider creating a localized version of an interface icon that displays text. Some interface icons include letters or words to help communicate a script-related concept, like font-size choice or a signature. If you have a custom interface icon that needs to display actual text, consider creating a localized version. For example, SF Symbols offers different versions of the signature, rich-text, and I-beam pointer symbols for use with Latin, Hebrew, and Arabic text, among others.

A small X left-aligned above a horizontal line. A stylized signature begins at the X and finishes at the right end of the line.

A rounded rectangle containing a capital letter A in the top-left corner and a stack of two horizontal lines in the top-right corner. A placeholder image appears in the bottom half of the rectangle.

A large capital letter A to the left of a tall I-beam cursor.

Latin

A small X right-aligned above a horizontal line. A stylized signature begins at the X and finishes at the left end of the line.

A rounded rectangle containing the letter Alef in the top-right corner and a stack of two horizontal lines in the top-left corner. A placeholder image appears in the bottom half of the rectangle.

A large letter Alef to the right of a tall I-beam cursor.

Hebrew

A small X right-aligned above a horizontal line. A stylized signature begins at the X and finishes at the left end of the line.

A rounded rectangle containing the letter Ain in the top-right corner and a stack of two horizontal lines in the top-left corner. A placeholder image appears in the bottom half of the rectangle.

A large letter Dad to the right of a tall I-beam cursor.

Arabic

If you have a custom interface icon that uses letters or words to communicate a concept unrelated to reading or writing, consider designing an alternative image that doesn’t use text.

Flip an interface icon that shows forward or backward motion. When something moves in the same direction that people read, they typically interpret that direction as forward; when something moves in the opposite direction, people tend to interpret the direction as backward. An interface icon that depicts an object moving forward or backward needs to flip in the RTL context to preserve the meaning of the motion. For example, an icon that represents a speaker typically shows sound waves emanating forward from the speaker. In the LTR context, the sound waves come from the left, so in the RTL context, the icon needs to flip to show the waves coming from the right.

The outline of a speaker with three concentric curved lines emanating to the right.

LTR variant of a symbol that depicts forward motion

The outline of a speaker with three concentric curved lines emanating to the left.

RTL variant of a symbol that depicts forward motion

Don’t flip logos or universal signs and marks. Displaying a flipped logo confuses people and can have legal repercussions. Always display a logo in its original form, even if it includes text. People expect universal symbols and marks like the checkmark to have a consistent appearance, so avoid flipping them.

A rounded square that contains the black Apple TV logo, which consists of a solid black apple to the left of the lowercase letters T and V.

A logo

A checkmark.

A universal symbol or mark

In general, avoid flipping interface icons that depict real-world objects. Unless you use the object to indicate directionality, it’s best to avoid flipping an icon that represents a familiar item. For example, clocks work the same everywhere, so a traditional clock interface icon needs to look the same regardless of language direction. Some interface icons might seem to reference language or reading direction because they represent items that are slanted for right-handed use. However, most people are right-handed, so flipping an icon that shows a right-handed tool isn’t necessary and might be confusing.

A black disk with two white lines in the nine o'clock position.

A pencil with an eraser, slanted at about forty-five degrees with the point downward.

The silhouette of a game controller with a white plus sign on the left and two white buttons on the right.

Glyphs that represent physical objects don’t generally need to flip.

Before merely flipping a complex custom interface icon, consider its individual components and the overall visual balance. In some cases, a component — like a badge, slash, or magnifying glass — needs to adhere to a visual design language regardless of localization. For example, SF Symbols maintains visual consistency by using the same backslash to represent the prohibition or negation of a symbol’s meaning in both LTR and RTL versions.

A silhouette of a speaker pointing right with a backslash on top of it.

LTR variant of a symbol that includes a backslash

A silhouette of a speaker pointing left with a backslash on top of it.

RTL variant of a symbol that includes a backslash

In other cases, you might need to flip a component (or its position) to ensure the localized version of the icon still makes sense. For example, if a badge represents the actual UI that people see in your app, it needs to flip if your UI flips. Alternatively, if a badge modifies the meaning of an interface icon, consider whether flipping the badge preserves both the modified meaning and the overall visual balance of the icon.

A silhouette of a wheeled shopping cart that faces right. A white plus sign inside a black disk is in the top-right corner.
White check in a green circle to indicate a correct example.

A silhouette of a wheeled shopping cart that faces left. A white plus sign inside a black disk is in the top-right corner.
White X in a gray circle to indicate an incorrect example.

A silhouette of a wheeled shopping cart that faces left. A white plus sign inside a black disk is in the top-left corner.
White check in a green circle to indicate a correct example.

The badge doesn’t depict an object in the UI, but keeping it in the top-right corner visually unbalances the cart.

If your custom interface icon includes a component that can imply handedness, like a tool, consider preserving the orientation of the tool while flipping the base image if necessary.

A rounded rectangle that contains a black dot in the top-right corner. The outline of a magnifying glass that contains a stack of two left-aligned lines is on top of the rectangle and to the left of the dot, slanted at about 135 degrees.

LTR variant of a symbol that depicts a tool

A rounded rectangle that contains a black dot in the top-left corner. The outline of a magnifying glass that contains a stack of two rightt-aligned lines is on top of the rectangle and to the right of the dot, slanted at about 135 degrees.

RTL variant of a symbol that depicts a tool

Platform considerations

No additional considerations for iOS, iPadOS, macOS, tvOS, or watchOS.

Resources

Related

Developer documentation

Videos