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
Twitter achieved full RTL mobile support by combining automatic stylesheet compilation with smart content detection, requiring only two manual CSS overrides.
About This Article
Twitter's mobile team had to display tweets that mixed right-to-left and left-to-right text. Usernames and URLs needed to always stay left-to-right, which meant detecting text direction at the character level.
Christine Tieu's team built a Unicode regex pattern to identify Arabic (\u0600-\u06FF), Farsi (\u0750-\u077F), and Hebrew (\u0590-\u05FF) characters. This pattern let them set tweet alignment dynamically and apply the correct direction to parsed entities.
Twitter rolled out RTL support for Arabic and Farsi on mobile. They only needed two CSS overrides in rtl.css, which was much simpler than maintaining separate stylesheets.