RTL Localization and Design Guidelines for Trip.com Arabic Site

Trip.com’s international expansion has reached the Arab world, where Arabic is the official language in 24 countries with over 422 million speakers; to serve these users the team studied Arabic culture, writing direction, reading habits, and religious customs.

Background : Most languages use left‑to‑right (LTR) scripts, while Arabic and several others use right‑to‑left (RTL). Adapting to RTL is not a simple mirror; it requires a set of design rules and technical solutions.

Basic Knowledge : The article explains the difference between LTR and RTL layouts, showing visual comparisons (Fig. 1) and the concept of mirroring the UI (Fig. 2).

Design Key Points :

Design that matches Arabic reading habits (mirroring layout, adjusting interaction gestures, and handling icons that need or do not need mirroring).

Emotionally appropriate design respecting Islamic customs, including a custom calendar, region‑specific illustrations (date‑palm trees, camels), and adjusted clothing in supporting graphics.

Technical Adaptation – Android :

Enable RTL support with android:supportsRtl="true" in the manifest.

Use Android Studio’s layout preview to toggle RTL/LTR.

Replace Left/Right attributes with Start/End via Refactor → Add RTL support.

Handle controls that lack native RTL support (e.g., ViewPager) using third‑party solutions.

Adjust text direction with android:textDirection and android:textAlignment , and use appropriate firstStrongLtr or anyRtl for weak‑direction texts.

Provide RTL‑specific drawable resources in drawable‑ldrtl folders and set android:autoMirrored="true" where possible.

Implement transition animations via custom methods like applyRtlTransition() and applyExitTransition() .

Technical Adaptation – iOS :

Enable Arabic locales in project settings; AutoLayout with leading/trailing constraints automatically mirrors layout.

Text alignment follows the current language bundle; images can be mirrored with imageWithHorizontallyFlippedOrientation .

For Frame‑based layouts, the team proposes the IBURTL scheme: set rtlType=Flip or Normal on views and adjust view.layer.affineTransform accordingly.

Technical Adaptation – React Native :

RTL is supported from RN 0.33; most components auto‑flip, but images with directional meaning must be manually transformed using transform: [{scaleX: I18nManager.isRTL ? -1 : 1}] or by swapping assets.

Text alignment differs between iOS and Android; developers may need to set textAlign explicitly based on I18nManager.isRTL .

Locale changes require native listeners to reload the React context (iOS: [RCTBridge reloadWithReason:] ; Android: ReactInstanceManager::recreateReactContextInBackground ).

Conclusion : Within a short timeframe, Trip.com delivered a full RTL adaptation for Arabic markets by coordinating design, development, translation, and product teams, ensuring a localized, high‑quality user experience across Android, iOS, and React Native platforms.