FREE RESOURCE — LOKALI

The RTL Designer's
Pre-flight Checklist

14 things to check before you ship Arabic, Hebrew, Farsi, or Urdu designs. Catch the issues that make RTL layouts break in production.

Get the checklist — it's free

Drop your email. We'll unlock the full checklist and send you a heads-up when Lokali Pro ships with bulk RTL automation.

No spam. One email when Pro ships.

✓
You're on the list — checklist unlocked below.
Scroll down to see all 14 items.
Pre-flight progress 0 / 14 checked
Layout & Direction
Text layer direction is set to RTL
In Figma, each text layer has a direction property. Verify every text block containing Arabic, Hebrew, Farsi, or Urdu has direction set to RTL — not just the font.
Critical
Auto-layout stacks are flipped
Horizontal auto-layout frames that flow left-to-right must be reversed. Icons on the left of labels move to the right. Primary buttons shift to the left. Check every row-direction auto-layout.
Critical
Padding uses start/end, not left/right
Hard-coded left/right padding doesn't flip automatically. Review all cards, inputs, and containers. Left padding in LTR becomes right padding in RTL — verify it reads correctly in both directions.
Visual
Navigation: "Back" goes right, not left
In RTL, the back arrow points right (→) because reading direction is right-to-left. A left-pointing back arrow (←) is disorienting in Arabic/Hebrew UIs. Check every back button, breadcrumb, and navigation chevron.
UX
Progress indicators flow right-to-left
Progress bars, step indicators, onboarding flows, and wizards should start from the right and fill toward the left. A progress bar that fills left-to-right is backwards in RTL context.
Visual
Icons & Graphics
Directional icons are mirrored
Arrows, chevrons, "forward/back", "next/previous", send buttons, and document-open icons need to be mirrored. Non-directional icons (settings gear, star, heart, checkbox) should NOT be mirrored — check each icon individually.
Critical
Logos and brand marks are NOT mirrored
Company logos, wordmarks, and brand illustrations should stay in their original orientation. Only UI chrome and directional wayfinding gets flipped. A mirrored logo is a production bug that looks embarrassing.
Visual
Typography
Font supports the target script
Not all fonts support Arabic, Hebrew, or Farsi glyphs. Verify your chosen typeface renders the target script correctly — missing glyphs fall back to system defaults and break visual consistency. Test with real content, not Lorem Ipsum.
Critical
Line-height is increased for Arabic/Hebrew
Arabic and Hebrew scripts have ascenders and diacritics that need more vertical breathing room than Latin text. Standard 1.4 line-height often clips letters. Increase to 1.7–1.9 for body text in Arabic-script languages.
Visual
Bidirectional text is handled correctly
Mixed content (Arabic sentence with embedded English product name, or a URL) requires bidirectional text handling. Check that embedded LTR strings within RTL paragraphs read naturally — they should appear logically embedded, not jumbled.
Text
Numerics & Formats
Number format is confirmed (Arabic vs Eastern Arabic numerals)
Arabic content in Egypt and the Levant typically uses Western Arabic numerals (0–9). Arabic content in Gulf countries often uses Eastern Arabic numerals (٠١٢٣٤٥٦٧٨٩). Confirm with your locale target before shipping.
Text
Date and time formats match locale expectations
DD/MM/YYYY is standard in most Arabic-speaking countries (not MM/DD/YYYY). Calendar types may vary — some contexts use Islamic (Hijri) calendar. Verify with your target market.
Text
Responsive & Edge Cases
Long text doesn't overflow or clip at the right edge
RTL text starts at the right edge. Long translated strings can overflow right-side containers in ways that don't appear in LTR. Test your longest expected strings at mobile width (360px) and check right-edge overflow.
Visual
Form inputs are right-aligned with RTL placeholder text
Text inputs should be right-aligned with RTL placeholder text when the page is in RTL mode. A left-aligned input with an LTR placeholder inside an RTL form is confusing. Verify input fields, textareas, and search boxes.
UX

Skip the manual flipping — let Lokali do it.

One click. Lokali translates your text and mirrors every layout automatically.

Try Lokali Free →