Right-to-Left (RTL) Language Testing: Arabic, Hebrew, Farsi

RTL languages (Arabic, Hebrew, Farsi, Urdu, Pashto) flip the visual direction of UI. Testing them requires more than translating strings — layouts mirror, icons flip, scroll direction reverses, text a

RTL languages (Arabic, Hebrew, Farsi, Urdu, Pashto) flip the visual direction of UI. Testing them requires more than translating strings — layouts mirror, icons flip, scroll direction reverses, text alignment changes. Getting it right makes your app usable for 1+ billion speakers. Getting it wrong produces broken, embarrassing UI.

What changes in RTL

Layout

• Main axis direction: left-to-right becomes right-to-left
• Logical margin-left becomes visual margin-right
• Flex / grid order reverses
• Text alignment reverses (left → right for languages reading RTL)

Icons

• Directional icons flip: arrow-back, arrow-forward, play button
• Non-directional icons stay the same: search, settings, user

Navigation

• Back gestures: swipe-from-right instead of swipe-from-left
• Tab bars may flip
• Drawer menus open from right

Input

• Text input reads right-to-left
• Cursor positioning
• Selection direction

What to test

Layout flip

1. Screen renders mirrored layout

2. aligned right

3. Body text aligned right
4. Buttons right-aligned where appropriate
5. Margins / paddings respect logical properties

Icons

1. Back / forward arrows flipped
2. Play / pause (audio / video control) flipped if appropriate
3. Rating stars / progress bars flipped
4. Language-specific icons (decimal separators, currency) appropriate

Text

1. Hebrew / Arabic / Farsi renders correctly
2. Mixed RTL / LTR (e.g., Arabic paragraph with English name) renders correctly
3. Numbers in mixed direction respect convention (Latin numerals typically stay LTR)
4. Diacritics / vowel marks render correctly
5. Bidirectional text (BIDI) handled per Unicode BIDI algorithm

Input

1. Text input starts at right edge
2. Cursor at right edge on empty input
3. Paste works with BIDI content
4. Selection direction natural

Forms

1. Label-input relationship preserved (label above, or to the right)
2. Error messages aligned correctly
3. Required indicator (*) on appropriate side

Navigation

1. Back swipe gesture direction appropriate
2. Tab navigation direction correct
3. Side menu opens from right

Scrolling

1. Horizontal scroll (carousels) reverses or stays (design decision)
2. Scroll-to-top still top
3. Infinite scroll loads appropriately

Images

1. Photos not flipped (people, places, products)
2. Illustrations with implicit directionality considered
3. Screenshots from the app (recursive!) in correct orientation

Common bugs

Hardcoded left/right

/* Bad — does not flip in RTL */
.button { margin-left: 10px; }
/* Good — logical property flips correctly */
.button { margin-inline-start: 10px; }

Icons not flipped

Back arrow stays pointing left in RTL context. Looks like forward arrow.

Fix: Use direction-aware icon variants, or CSS transform: scaleX(-1) on directional icons in RTL.

Mixed language rendering

"Your invoice 12345 is paid" in Arabic should render with appropriate BIDI — numerals stay LTR within RTL paragraph.

Fix: Trust the platform's BIDI algorithm. Wrap as with appropriate dir attributes only when needed.

Layout borders / shadows

One-sided shadow (box-shadow: -5px 0 10px) does not flip automatically.

Fix: Use logical properties or manually flip in RTL stylesheet.

Progress bars / sliders

Filling direction. In RTL, should fill right-to-left.

Fix: transform-origin: right or logical property equivalents.

How to test

Translation files

• Maintain Arabic / Hebrew / Farsi translations
• Test with full translation, not machine-translated placeholder

Pseudolocalization

Pseudolocale that flips direction without actual translation, exposes layout issues:

Test button → tseb ttub (reversed for quick visual check)

Real devices / simulators

• iOS simulator: language + region to Arabic / Hebrew
• Android emulator: locale to Arabic / Hebrew

Screenshots

Capture every screen in RTL. Review for:

• Layout flip
• Icon direction
• Text alignment

User testing

Native RTL speaker reviews. Catches nuances automation misses.

Tools

CSS

• direction: rtl on html / body
• Logical properties (margin-inline-start, padding-block-end)
• ::dir(rtl) selector (modern browsers)

Android

• RTL support added as android:supportsRtl="true" in manifest
• Use start / end instead of left / right in layouts
• AppCompat / Material Components handle most flipping

iOS

• Auto Layout handles RTL automatically
• semanticContentAttribute for individual overrides
• UIImage.imageFlippedForRightToLeftLayoutDirection() for manual icon flipping

Flutter

• Directionality.of(context) returns current direction
• Alignment.centerStart / centerEnd instead of left / right

How SUSA tests RTL

SUSA runs explorations with locale set to Arabic / Hebrew. Screenshot diff vs LTR session surfaces layout issues. Accessibility_user persona verifies screen reader behavior in RTL.

susatest-agent test myapp.apk --locale ar --persona curious --steps 200

Common production bugs

1. App opens LTR layout even with RTL locale — supportsRtl missing
2. Some screens RTL, others LTR — incomplete migration
3. Icons all flipped, including non-directional — over-aggressive flipping
4. Product photos flipped — looks like mirror, alien
5. Input starts at left in RTL field — text goes weird direction

RTL support is not optional for global apps. Test early, test thoroughly, get native review.