Internationalization (i18n) and Localization (l10n)
Every project must be initialized with localization support, even if it starts with only one language. This ensures that adding new languages later is seamless and does not require refactoring.
Rules
- Initialization: Always set up i18n tooling (e.g.,
react-i18next, Next.js built-in i18n, or similar) at the start of the project. - Text handling: No hardcoded user-facing text in components. All strings must go through the translation system.
- Fallbacks: Always define a default language and provide fallback values to avoid runtime errors.
- Locality in URLs: Language may be included in the URL (e.g.,
/en/,/ar/) depending on project and business logic. This should be defined during the project initialization phase.
UI Design considerations
- All UIs must be designed to support both LTR (left-to-right) and RTL (right-to-left) layouts.
- Use flexbox and CSS grid for layouts. Avoid
float, unnecessaryabsolutepositioning, or brittle styling that breaks under RTL. - If
absoluteor fixed positioning is required, ensure it can adapt for both LTR and RTL (e.g., using logical properties likeinset-inline-startinstead ofleft). - Component libraries like Tailwind and MUI provide RTL support—make sure it is enabled and tested.
Benefits
- Adding a new language becomes configuration, not a redesign.
- RTL languages (e.g., Arabic, Hebrew) work with minimal styling adjustments.
- Improves accessibility and makes the product globally scalable.