This section describes general rules of thumb and a detailed interaction design pattern for Firefox OS in Arabic.
Arabic is one of several languages with a bidirectional writing system (in this case, the Arabic script), which means it contains elements that read both right-to-left (RTL) and left-to-right (LTR). Arabic deserves a specific set of guidelines for how Firefox OS should look and behave when users set their device language to Arabic, because bidirectional writing systems affect:
- The correct typographic display and alignment of text, punctuation, numeric digits, and more.
- Keyboard layout and selection.
- Text and numeric input direction.
- Time and date displays.
- The direction of touch interactions like edge gestures, and corresponding animations and transitions.
- Many, many more aspects of interaction.
- This design pattern applies only to Arabic. It does not apply to other bidirectional languages like Urdu, Pashto, Persian or Hebrew. We are, however, working hard to create design patterns for Firefox OS in these languages.
- If you’re fluent in Urdu, Pashto, Persian and/or Hebrew and would like to inform our design guidelines, please let us know. Email Stephany Wilkes at swilkes [at] mozilla [dot] com. Thank you for your interest!
- This pattern describes the Firefox OS 2.2 release (mid to late 2015) only.
- Forthcoming, additional improvements for post 2.2 releases (i.e. 2.0M and 3.0) are noted where appropriate.
- Firefox OS did not properly support the Arabic language in earlier releases (i.e. 1.4, 2.0 and 2.1). The 2.2 release is the first in which Firefox OS can be considered to have acceptable Arabic support.
General rules of thumb
Some interface elements are mirrored (meaning reversed or flipped, but not turned upside down) in Arabic, but not all of them. This section describes which interface elements should or should not be mirrored.
- Text* (see below.)
- Question mark.
- Progress bars.
- Location of positive (or primary) and negative (or secondary) action buttons. These should be swapped.
- Location of cursor.
- Location of scroll bars.
- Location of checkboxes.
Note: Text reads right to left (RTL), unless the text is displayed in a left-to-right (LTR) language or comprised of numeric digits. There is no title or sentence case (capitalization) in Arabic. Avoid rich text, especially bold and italics.
Do not mirror
- Back buttons (these will be mirrored post 2.2 release.)
- Most icons (except for those that indicate direction, such as arrows.)
- Most images.
- Words (not translated) displayed in left-to-right (LTR) writing systems, like English.
- Numerals (including phone numbers.)
- Most charts and graphs.
- Vertical items (such as lists.)
- Edge gestures (these will change to match the back button change of direction post 2.2 release.)
- Task manager (this will change to match the back button and edge gesture changes post 2.2 release.)
- Numpads, including the Dialer
- Player controls (video and music)
Note: Often, Firefox OS displays RTL text automatically via the L10N.js library and/or the Unicode Bidirectional Algorithm (BDA).
Date and time
Time display will vary depending on Arabic locale (region) and user preference. The default time display is in military (24 hour) format. Dates appear in the following order: Year > Month > Date > Time.
Back button and headers
The spatial model for Firefox OS, including the Task Manager and app-to-app edge swipe gestures, are unchanged in 2.2. As a result, headers and the back button retain the same positions and direction as they do in LTR layouts for 2.2.
Note: In post 2.2 releases, the back button position and direction will change, and app-to-app edge gestures and the Task Manager will change to match.
Numbers generally still run left to right (A). Military (24 hour) format is favored.
Date format order for Arabic is (from RTL) week day (“Monday”), numeric date of month (“23”), and year (“2015”) (B). Unlock and camera gestures remain the same in 2.2 (C).
Hint text will read right to left and is right-aligned. If the cursor is inserted, it will appear at the right (D).
The search icon is now left-aligned. App icons grid are right aligned, with any Arabic labels reading right to left (E). This is for the default homescreen display: user homescreen customizations and app grouping and organization should be maintained.
Labels that are English proper nouns (brand names) will remain left to right (LTR) in English (F).
Action and context menus
Headers will read right to left and are right-aligned (E). Action menu items have right-aligned text reading right to left. Icons are also right-aligned (F).
Button text remains center-aligned, but reads right to left (G).
Buttons and dialogs
Titles are right-aligned and read right to left (A). Description text is right-aligned and reads right to left. Question marks should be mirrored (B), which should be handled automatically in the Arabic string translation.
Positioning of buttons is now swapped. Primary actions are now on the left, and “cancel” or “back” options are on the right. Text within the buttons remains center-aligned, but will read right to left (C).
Drawers remain left aligned (as per the back button in 2.2) (A). List items in drawers are right-aligned and read right to left (B) (see List Items). Content in drawer buttons are center-aligned (C).
Subheaders within drawers are right-aligned and read right to left (D). Visual tags in drawer list items are right-aligned. Words in LTR languages read left to right, but are still right-aligned. All other words read right to left (E) (see List Items).
Checkmark icons are now left-aligned but are not mirrored (F) (see Switches). Buttons that are direction-neutral keep their locations (G). Spinner icon direction (arrow, animation) does not change in 2.2.
The order of the queue in an LTR grid goes from left to right, top to bottom (A). The order of the queue in an RTL grid goes from right to left, top to bottom (B).
Headers and back button
Header titles are center-aligned and read right to left. No rich text should be used, so do not italicize (A). Subheaders are right-aligned and read right to left (B).
List items remain top down in order, but icons and text within are right-aligned. Note that icons are NOT mirrored, but text reads right to left (C) (see List Items). Toggles are now left-aligned, with ON to the right and OFF to the left. Note that the checkmark is NOT mirrored (D) (see Switches.)
“Back” buttons, “Cancel” buttons and “Drawer” icons do not change position in RTL configurations for the 2.2 release, remaining left aligned (E). Header titles in LTR languages remain center-aligned and read left to right (F). Arabic header text should truncate on the left. Icon buttons in headers do not change position (G).
Subheader labels are right-aligned and read right to left, but numerals read left to right (H). In-content labels, such as time-stamps, are right-aligned and read to left. In the case of time stamps, numerals for time read left to right and should be consistent with locale (I).
Header text is center-aligned, reads right to left, and is not italicized. “Cancel” buttons remain left-aligned in 2.2. “Done” buttons remain right-aligned in 2.2 (A).
Hint text in an input field is right-aligned and read right to left. Avoid italics (B). Labels are center-aligned and read right to left (C). Value selector buttons have right-aligned text that reads right to left. The triangle icon is left-aligned and mirrored. Also note that the position of the “X” is now at left (D).
Numerals typed into input fields are right-aligned but read left to right (E). Like value selectors, mirror text in buttons that are not center-aligned; text is right-aligned and reads right to left.
Input titles are right-aligned and read right to left. The “+” icon is again left-aligned (G). Text typed into an input area should be right-aligned and read right to left. Cursor placement and movement may vary.
“Send” or “accept” buttons are now at the left; if they contain text, text should be center-aligned and read right to left (H).
List items will always have right-aligned text, but direction of that text depends on language. RTL languages will read right to left; LTR languages read left to right. Visual tags are right-aligned (A).
Time stamps are left aligned and read right to left unless there are numerals. Numerals will read left to right. Time and date format may vary with locale (B). Appended icons are left-aligned (C). Icons in the toolbar do not change position or direction (D) (see Toolbar).
Controls (such as checkboxes, radio buttons, and toggles) in a list item are left-aligned (E). A modified icon (F), referred to as a chevron, replaces the previous “>” icon throughout the OS. The same chevron icon is used in in both LTR and RTL layouts.
If a list item has an icon, the icon is left-aligned in RTL layouts (G).
Headers, chevrons and transitions in 2.2
Modifying transitions was deemed beyond the scope of what could be achieved in the 2.2 release. As a result, transitions for changing views and app-to-app edge gestures are the same in both RTL and LTR layouts and header icons in RTL, such as the back button, retain their LTR position. In list items, the chevron icon position is changed, but the icon itself is not mirrored. This aligns the header and chevron icons with the OS transitions and general spatial model.
Metadata is right-aligned and will read right to left or left to right depending on language. Since text is right-aligned, icon buttons will be left-aligned (A). Progress bars are mirrored so that the playhead progresses to the left, and played content is to right of the playhead.
Time played is displayed at the right; time left is displayed at the left (B) (see Sliders). Note that player controls do NOT change due to hardware legacy (C) and prior familiarity.
Progress and activity indicators
Spinner icons are left-aligned and and will not be mirrored in 2.2. Post 2.2, spinner icons will be mirrored and the corresponding animation direction will change (A).
Progress bars now animate right to left (B). If a progress bar has a “cancel” button, it should be left-aligned (C).
Scrollbars are now left-aligned, but still move vertically (A).
Index scrolling is still right-aligned (B) for ergonomic reasons: most people are right handed and can continue to index scroll with their right thumbs. Truncation should, as elsewhere, occur with the “end characters” in a word: RTL languages should truncate at left and LTR languages truncate at right (C).
Multilingual group and sort rules are technically complex to implement but are forthcoming.
Search fields contain a “magnifying glass” icon that is right-aligned. Text typed into the search field is right-aligned and reads right to left unless it is in an LTR language. “Clear” and “Cancel” buttons are left-aligned (A). Filtered results have right-aligned text (B).
Text typed in LTR languages reads left to right but is right-aligned (C).
Sliders and switches
Back buttons remain in the same position in both RTL and LTR (A). Toggles are now left-aligned; slide to the left to toggle ON and slide right to toggle OFF. Note that the checkmark is NOT mirrored (B).
Sliders are mirrored with maximums at the left and minimums at the right (C). Text in value selector buttons now reads right to left and is right-aligned. A modified icon (D), referred to as a chevron, replaces the previous “>” icon throughout the OS. The same (new) chevron icon is used in in both LTR and RTL layouts.
Checkboxes are left-aligned, but the checkmark itself is not mirrored (E).
Select mode and toolbar
The select mode header has center-aligned text and will read right to left exclusive of numerals. The “Cancel” button remains left-aligned, while the “Done” button remains right-aligned (A). Content is pushed off to the left. Checkmarks appear at the right.
Note that the checkmark icon is not mirrored (B). Toolbars are not mirrored; direction-neutral icons are also not mirrored (C).
Status Bar icons align left. Time display (A) is military (24 hour) format (as for the Lock screen). Battery, wifi and signal strength icons do not change (B). Dual SIM (1 and 2) slots and corresponding numbers do not change (B).