Set the document language and direction on the server. Render <html lang={locale} dir={direction}> from the route so assistive technology, the browser’s bidi algorithm and :lang() styles see the right values on first paint. Do not detect the locale in client code after hydration.
Component labels
Pass translated strings through the component’s labels prop. Labels that need counts use string templates such as "{index} of {count}"; pass locale when formatting numbers. formatLabel replaces named placeholders and formats numeric values with Intl.NumberFormat.
Direction and placement
Direction comes from the element’s dir in the DOM. Keyboard behavior uses resolveDirection(element) to follow that direction; an explicit direction prop can override it. Popup side is physical (top, bottom, left, right). Popup align is logical (start, center, end), so it follows the writing direction.
Custom keyboard handling
If an input uses an IME, let composition finish before handling navigation keys. Check isComposingKeyEvent(event) before responding to Enter, arrows or Escape; this also covers browsers that report key code 229 after composition ends.
Typography and fallback
The stylesheet selects script-aware fonts and line breaking through :lang(). Override --font-sans-ja, --font-sans-zh-hans or --font-sans-ar when your app provides its own fonts. Wrap untranslated English in lang="en" dir="ltr" so it keeps English pronunciation, font selection and text order inside another locale.