Do the Right (to Left) Thing: Directional Content in React

Maja Wichrowska (10.May.2018 at 12:00, 1 hr )
Talk at jsDay 2018 (English - US)

Rating: 5 of 5

In 2017, Airbnb supported 27 languages and had developed robust translation tools that made it easy to add more. We launched Croatian in May with little overhead beyond setting up the new domain and translating phrases. However, this was not true for all new languages; our next most requested language, Hebrew, posed a unique challenge. Because it reads right-to-left, the entire Hebrew UI must be flipped. Browsers only handle reversing the DOM structure, but styling and interactions must be coded manually. This talk covers the journey of enabling right-to-left languages on Recently, Airbnb has moved to a React frontend and away from Sass to a CSS-in-JS paradigm. We developed a performant and cross-browser solution for RTL that leveraged a CSS-in-JS abstraction layer to isolate the logic from our codebase. Our efforts led us most of the way to launching in Arabic and Hebrew while requiring little effort from our product engineers and with minimal disruption to their work.

Who are you?

Claim talk

Talk claims have been moved to the new site.

Please login to the new site to claim your talk

Comments closed.


Rating: 5 of 5

10.May.2018 at 12:54 by Aurore Malherbes (6 comments) via Web2 LIVE

Great intro and great return on experience!

Rating: 5 of 5

10.May.2018 at 14:09 by Keyfer Mathewson (6 comments) via Web2 LIVE

A stellar talk, and great answers to questions as well.

Thanks, Maja!

Rating: 5 of 5

11.May.2018 at 08:37 by Luigi De Rosa (3 comments) via Web2 LIVE

Nice talk! We definitely need to raise more awareness about RTL and i18n in general.
Maybe too much react-specific but definitely interesting.

Rating: 5 of 5

11.May.2018 at 11:18 by William Durand (39 comments) via Web2 LIVE

Great story and nice talk. Thank you for the open source libs as well!

Rating: 4 of 5

11.May.2018 at 18:35 by Luca Fabbri (31 comments) via Web2 LIVE

Huge talk, full on information. Loved the whole presentation, starting from old school HTML support to issues you can have today with modern layout. Loved the speaker choice to describe a "love story" as excuse to fix the issue.

Rating: 5 of 5

15.May.2018 at 15:31 by niccord (10 comments) via Web2 LIVE

great talk about real life: how to add an important feature without rewriting everything!

© 2019