Right To Left Support For Twitter Mobile
Article Summary
Christine Tieu from Twitter's Mobile Web Team reveals how they flipped their entire mobile UI for Arabic and Farsi without drowning in duplicate CSS rules.
Christine Tieu from Twitter's Mobile Web Team shares how the team built right-to-left language support for Arabic and Farsi on Twitter's mobile website. The post breaks down two major technical challenges: handling bidirectional content in timelines and flipping the entire UI without creating maintenance nightmares.
Key Takeaways
- Used regex pattern to detect RTL characters and determine tweet alignment dynamically
- Google Closure's output-orientation flag auto-generated mirrored stylesheets for RTL
- Applied dir attribute to root HTML node to flip entire page layout automatically
- Tweet entities like usernames and URLs always render LTR regardless of tweet direction
- JS element manipulation required custom logic for RTL coordinate systems and gestures
Critical Insight
Twitter achieved full RTL mobile support by combining automatic stylesheet compilation with smart content detection, requiring only two manual CSS overrides.
