Right-to-left: logical CSS flips, physical CSS doesn't
In Arabic the teal paragraph (logical properties) moves its margin and border to the right, where the text starts; the red one (physical left) stays on the left and looks broken. The back arrow is mirrored because it points somewhere. text-align stays start in both: the browser resolves it from dir.
Internationalisation (i18n) means building the app so it can speak any language and follow any region's rules: format numbers, money, dates and lists with the browser's Intl APIs, choose plural forms with Intl.PluralRules, keep all text in translation files read through a t() function (react-i18next, FormatJS), and lay out pages with logical CSS so right-to-left languages work.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a useRelativeTime(date, now) hook that returns text such as "3 minutes ago" or "in 2 days" with Intl.RelativeTimeFormat in the current locale, choosing the largest sensible unit.
Convert this CSS to logical properties: .toast { position: fixed; right: 16px; padding-left: 12px; border-left: 4px solid; text-align: left; }.
Explain it without notes
How would you add internationalisation to an existing React app?
Why can't you write plural messages as count === 1 ? a : b, and what do you use instead?
What problems do time zones cause in a React app, especially with server rendering?
How do you support right-to-left languages?
Preview
Console
Nothing logged yet.Expected console output
ltr | logical: left 24px right 0px | physical: left 24px right 0px | text-align start
rtl | logical: left 0px right 24px | physical: left 24px right 0px | text-align start