Do the Right (to Left) Thing: Directional Content in React
summary
Airbnb claims a practical path to RTL after supporting 27 languages in 2017 by moving to React and CSS-in-JS and building a middleware that flips styles at create and resolve time so components need no manual rewrites except a scripted codemod. Implementation uses react-with-styles as an abstraction, Aphrodite + rtl-css-js plugins to emit flipped CSS and convert dynamic inline styles, a contextual create/resolve to avoid server/client mismatch, and a small team of two and a half engineers that mostly succeeds for Arabic and Hebrew.
AI-written summary · about
chapters (14)
- 0:00Start
- 8:10Bi-Directional Inputs
- 9:38Summary
- 10:50Html Dare Attribute
- 14:15Context Aware Icon
- 16:17Automated Options
- 18:25Compile Time
- 20:32React with Styles
- 22:44Dynamic Styles on the Fly
- 24:23Requirements
- 27:14Fancy Selectors
- 30:36Dynamic Styles
- 35:00Contextual Create and Resolve Methods Based on Direction
- 38:26Open Source Projects
related talks
29mDo the Right (to Left) Thing Directional Content in React
29mDirectional Content in React
22mInternationalizing React
55mWhy RTL Support Is So Hard: Detours in Abstraction
49mSupporting accessibility in React: the difficulties and niceties
29mMake apps for a global audience - Naomi Meyer
29mThe Lonely and Dark Road to Styling in React
31mReact on Rails