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.

Authors: Yaniv Zimet, Mati Bot

What makes this noteworthy?

Airbnb’s mission is to create a world where anyone can belong anywhere, and with this release, we enable more than 300 million Arabic- and Hebrew-speakers globally to belong on Airbnb.

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.

On a Right-to-left layout, the information flows from right to the left (Figure 1)

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.

Interactive star rating component (Figure 2)

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.

Left-to-right:

Left-to-right, 1 star selected (Figure 3)

Right-to-left:

Right-to-left, 1 star selected (Figure 4)

Individual icons must be aware of the layout direction too.

Directional icons (Figure 5)

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.

Left-to-right and Right-to-left listing cards, side by side (Figure 6)

Developer experience

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.

What’s next

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.

Welcome

أهلا بكم

ברוכים הבאים

Mati Bot (Lead Android & iOS Engineer) & Yaniv Zimet (Lead Web Engineer)

Thanks to:

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