Controls

Some controls use lateral movement to communicate their meaning. For example, a progress indicator or slider can move through values in a range, next or previous and forward or back buttons enable navigation, and a toggle or switch can indicate its state by revealing the accent color on one side or the other. In general, controls that use lateral movement to communicate need to flip to match the current context, unless the control refers to a specific direction like left or East.

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 right-to-left (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.

LTR

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.

RTL

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 right-to-left scripts when necessary. In buttons, labels, and titles, Arabic or Hebrew text can appear too small when it’s 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.