Localization changes content length, direction, formatting, and cultural expectations. Build those capabilities into primitives before a translated product exposes layout assumptions.
Use logical layout
Prefer margin-inline, padding-inline, and text-align:start. Set the document language and direction. Mirror directional flow selectively. Keep mixed-direction identifiers isolated with bdi so they remain understandable.
Format with the locale
Use Intl.NumberFormat and Intl.DateTimeFormat rather than assembling strings manually. Make currency and timezone explicit. A locale identifies presentation preferences; it does not establish a person's location or currency.
Plan for real translation
Allow labels and buttons to grow. Translate complete messages with plural rules rather than concatenating fragments. Test expansion, right-to-left content, fallback fonts, truncation, and user-supplied names.
Default decisions
Starting conventions for this system. Validate them in the context of your product.
- Direction
- Set lang and dir explicitly
- Spacing
- CSS logical properties
- Formatting
- Intl APIs with explicit locale
- Content sizing
- Content-driven height and wrapping