Implementation of right-to-left languages on the frontend
summary
Kahoot adds Arabic by setting the page dir attribute to the UI language and marking question/answer blocks with their own direction so UI and content directions differ, handling the 360 million Arabic speakers uncovered in research. The page-level dir covers roughly 95–99% of elements, with remaining fixes handled by CSS logical properties (text-align: start, margin-inline-start) or a small custom function / third‑party library; answer buttons keep original order by explicitly setting dir="ltr" on the answer container.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 2:00RTL language implementation
- 3:09RTL UI challenges
- 7:00RTL support goals
- 8:01Direction attribute and CSS logical properties
- 9:26RTL icons and exceptions
- 10:31Flexbox for element order
- 12:18Mixed UI and content directions
- 15:10Quiz and Q&A
related talks
27mRight-to-Left, Left-to-Right: Rethinking Multilingual Design
29mDo the Right (to Left) Thing Directional Content in React
20mBuilding RTL-Ready Flutter Apps
39mWait, it does ??tahW: How supporting Right-to-Left can expose your bad UX
29mDirectional Content in React
20mReimagining web layout for accessible multilingual content
41mThe World of Reverse UI — RTL Language Support for Android Apps
14mIncreasing accessibility for Right To Left