Do the Right (to Left) Thing Directional Content in React
summary
Airbnb moves from Sass to CSS-in-JS and builds a pragmatic RTL system that actually flips styles and icons across browsers while minimizing work for ~600 product engineers. Implementation uses Aphrodite plus an abstraction layer react with styles and a direction context via react wa direction, performing create-time and resolve-time flips (runtime for inline styles) with RTL CSS transformation. Result claims near-launch support for Arabic and Hebrew and earlier launch of Croatian with little product disruption.
AI-written summary · about
chapters (9)
- 0:00Start
- 8:33Summary
- 12:16Direction Context-Aware Icon
- 14:16Style Modular React Components
- 14:59Compile Time
- 16:22React with Styles
- 18:45Requirements
- 20:37Custom Style Selectors
- 21:24Pseudo Selectors
related talks
39mDo the Right (to Left) Thing: Directional Content in React
29mDirectional Content in React
20mReimagining web layout for accessible multilingual content
55mWhy RTL Support Is So Hard: Detours in Abstraction
22mInternationalizing React
20mBuilding RTL-Ready Flutter Apps
16mImplementation of right-to-left languages on the frontend
29mThe Lonely and Dark Road to Styling in React