Adding support for Arabic and Hebrew languages on Airbnb
The right-to-left presentation of these top-requested languages present unique engineering and design challenges.
What makes this noteworthy?
Arabic and Hebrew are both languages that use a right-to-left (RTL) writing direction. The start of the page in a RTL layout is the right-hand side. All text and visual elements are aligned to the right and flow towards the left.
We begin our process in the same way as adding any other language: translating all of our strings, defining date formats, number formats, and linguistic rules (e.g. pluralization). These are localization sensitivities. But as soon as we introduce a right-to-left layout, the scope of our work increases drastically. These are visual, functional, and behavioral sensitivities.
Visual and naming considerations
Let’s look at some examples. It’s unclear which star is the first star in the following interactive star rating component.
For us to know which star is first, we must know the page direction. For languages that are written left-to-right, the first element is the leftmost; for languages that are written right-to-left, the first element is the rightmost.
Individual icons must be aware of the layout direction too.
The names for these arrow icons are iconArrowPrevious and iconArrowNext rather than iconArrowLeft and iconArrowRight.
Throughout the codebase we avoid referencing a direction explicitly: in variable names, asset names, and style definitions. Instead, we use terminology that represents the direction relative to the content.
For example, the icon alongside a button label is the leading icon rather than the left icon. When swiping to advance a photo carousel, one swipes forwards rather than to the right.
A more concrete representation of these concepts is the UI component for a home listing card. (Figure 6) The photo carousel advances forwards as appropriate for each direction, which is hinted by the indicator dots. The alignment of the text and of the “save to wish list” heart is mirrored. As we saw earlier, star ratings also flow with the direction of the content.
For us to ensure that these design and localization changes would be adopted across all product teams, We automated as much as possible to make it easy and seamless for every page to have RTL support. On web clients, all the layout flipping was integrated into our core UI components and build pipeline so that anytime those components are used to create a page, RTL support is included for free.
We also created a way for engineers to easily test the RTL layout. A RTL preview mode was added to our component library explorer, as well as a preview environment for all pages, screens, and templates. We created automatic visual diffs for every UI code change.
Creating an integrated and easy-to-use developer experience is not without its challenges. In subsequent posts, we’ll detail the journey to RTL language support on Web, Android, and iOS. If you have specific questions you’d like us to answer, feel free to comment here and let us know!
You can try out Arabic or Hebrew as your default language by visiting https://ar.airbnb.com or https://he.airbnb.com. On new versions of our iOS and Android apps, you can select Arabic and Hebrew as your system language.
Mati Bot (Lead Android & iOS Engineer) & Yaniv Zimet (Lead Web Engineer)
Hyelim Chang (Localization Manager), John Furlong (Localization Program Manager), Salvo Giammarresi (Director of Localization), Dylan Hurd (Blog Post Editor, Software Engineer), Marcella Iulo (Photo Producer), Diego Lagunas (Engineering Manager), Rebecca Lanthorne (Creative Production Lead), Taido Nakajima (Globalization Design), Michael “Byph” Singh (QA Analyst), Sergio Pelino (Localization Operations Manager) and Maja Wichrowska (Software Engineer)
Former Colleagues: Pablo Caro (Designer) and Jason Katz-Brown (Software Engineer)
In collaboration with PLUS QA: Ido Avraham, Katie Heynderickx, Joud Kashgari, Hikmet Luleci, Michael Manca and Nataliya Pirumova