DEV Community

Cover image for Shipping Arabic and Hebrew App Screenshots: Get RTL Right Before Upload
ScreenParcel
ScreenParcel

Posted on

Shipping Arabic and Hebrew App Screenshots: Get RTL Right Before Upload

A strong Arabic or Hebrew screenshot lets someone understand your app's benefit without mentally untangling the caption. The release task is making the headline, punctuation, numbers, and app capture read naturally together.

Treat your first RTL frame as a proof of the whole experience. Once its reading order works, you have a reliable reference for reviewing the rest of the set.

Disclosure: I build ScreenParcel.

ScreenParcel is a browser tool: upload app screenshots, paste your own translated headline and subtitle per locale, lay them out across App Store and Google Play sizes, resolve overflow warnings, and export one ZIP. It does not translate anything. Translation and linguistic review happen before and alongside layout.

Start with direction and alignment.

Right alignment establishes the caption's edge; RTL direction tells the text renderer how to interpret the paragraph. You need both when Arabic or Hebrew shares a line with Latin text.

In ScreenParcel's current code, directionFor returns rtl for ar and he, including hyphenated variants. The renderer sets the canvas text direction, right-aligns those captions, and draws each line from the text box's right edge. The editor's headline and subtitle fields receive the locale's dir, lang, and font stack.

Those are specific text behaviors. The composition, device frame, and uploaded app pixels keep their geometry. Choosing Arabic does not produce an Arabic version of your app capture.

Test mixed strings as complete phrases.

A habit tracker might mention a seven-day streak, a brand such as HabitLoop, or a Latin feature label such as Pro. These create direction changes within one caption. Numbers and Latin words can retain left-to-right runs inside an RTL paragraph; manually reversing their characters breaks the stored text. W3C explains these directional runs.

Review the actual combinations you plan to ship: HabitLoop Pro, 7/30, 08:30, and a percentage beside Arabic or Hebrew words. Ask whether the number still belongs to the intended label and whether the brand remains readable in its intended order.

Prefer a simpler approved sentence when mixed text becomes hard to read. In an HTML-based layout you control, isolated spans can help contain opposite-direction phrases; W3C shows why their boundaries matter in its bidi examples. ScreenParcel captions are plain text drawn to canvas, so pasting HTML tags into a caption is not that solution.

Inspect punctuation at every line end.

A caption can contain the correct words and still place a closing parenthesis, colon, or exclamation mark somewhere surprising. Watch especially for punctuation immediately after a Latin brand or number. A wrap can change which characters share the line.

Have an Arabic or Hebrew reader check the rendered sentence, including its final punctuation. Use the punctuation your reviewer approves for that language. Avoid moving punctuation around in the source until one preview happens to look right; another size may wrap differently.

If your localization process uses invisible directional controls, keep them documented and inspect the resulting PNGs. The current ScreenParcel code sets the paragraph direction; it does not add phrase-level isolation automatically.

Approve the font and the break together.

ScreenParcel's fontFor starts Arabic with Noto Sans Arabic, Geeza Pro, and Tahoma; Hebrew starts with Noto Sans Hebrew, Arial Hebrew, and Arial. Both stacks continue through system fallbacks. Naming a font in a stack does not guarantee it is installed or loaded.

Inspect the actual export environment for missing glyphs, inconsistent weight between scripts, Arabic joining, and clipped marks if your copy includes them. Check Hebrew letterforms and any vowel points your approved text uses.

The wrapping code uses Intl.Segmenter with the locale for word boundaries and uses grapheme boundaries when an overlong segment needs splitting. It also respects explicit newlines. That protects character clusters, but a linguistically sensible headline still needs review.

Shorten the approved copy or add a deliberate phrase break when needed. ScreenParcel uses fixed caption sizes and reports overflow; it does not automatically shrink the font. A caption that fits can still have an awkward break.

Review the app inside the device.

Capture the app running in the target language. Inspect navigation direction, back arrows, tab labels, dialogs, dates, decimal separators, and the number format chosen for your audience. Check charts and progress indicators against what the app actually means.

Make sure the screenshot demonstrates the experience that ships: an Arabic headline above an English onboarding screen leaves the localization unfinished. Repeat this review independently for Hebrew.

ScreenParcel draws the uploaded image as supplied. It cannot repair English labels or change the app's navigation. Prepare the localized capture in the app, then use that capture for the matching export.

Mirror with intent.

A centered phone with a headline above it may work across both reading directions. An annotation sequence or directional arrow may need a different arrangement.

Do not horizontally flip an entire screenshot: that reverses letters, logos, and the captured interface. Adapt the underlying design elements where their meaning requires it. Apple's RTL design guidance distinguishes directional interface elements from photographs and general artwork that should keep their orientation.

ScreenParcel does not automatically mirror the layout or device frame. Review the chosen composition on its own merits.

For a worked example, imagine a habit tracker called HabitLoop. Suppose its developer supplies these localized captions:

Field en-US ar-SA
Headline Better habits, every day عادات أفضل كل يوم
Subtitle Track your progress, one step at a time تابع تقدمك خطوة بخطوة

en-US vs ar-SA

Keep the phone centered and the palette consistent. Left-align the English caption; right-align the Arabic caption with RTL direction. Use an English app capture for the English frame and a separately captured Arabic interface for the Arabic frame.

In the current editor, uploaded sources are shared across selected locales. Export these two localized captures in separate passes, selecting the matching locale and source for each pass.

Inspect the Arabic headline's joining and wrapping, then the subtitle's rhythm. Inside the phone, verify that a seven-day streak and its label read together. The developer supplies the Arabic; ScreenParcel handles its caption layout.

Before uploading, map the locale labels deliberately:

Language App Store Connect / ScreenParcel Google Play
Arabic ar-SA ar
Hebrew he iw-IL

Google lists those Play identifiers in its localization documentation. ScreenParcel's export folders use App Store Connect codes, so match their contents to the appropriate Play language.

Use this pre-upload checklist on the finished files:

  • [ ] Arabic and Hebrew copy approved by a reader of each language.
  • [ ] RTL direction and right alignment checked in exported PNGs.
  • [ ] Brands, Latin words, numbers, and punctuation checked together.
  • [ ] Every line break reviewed in every selected output size.
  • [ ] Font fallback, joining, and marks inspected at full resolution.
  • [ ] Captured app UI matches the language and shipping behavior.
  • [ ] Mirroring decisions reviewed without flipping text or logos.
  • [ ] Correct files assigned to each store's locale.

ScreenParcel offers two locales free with a watermark, a $9 Release Pack, and a $19 30-day Pass.

Prepare your Arabic and Hebrew screenshot captions with ScreenParcel

Top comments (0)