I18n

Internationalization (i18n) Guide

Overview

CIVICS-af supports English, Dari (فارسی), and Pashto (پښتو). All user-facing text is served through a simple key-based translation system. This document explains how i18n is implemented, how to add new languages, and best practices for maintaining consistency.


Current Supported Languages

  • en — English
  • fa — Dari (Persian)
  • ps — Pashto

Translation Keys

Example JSON

{
  "app_title": "US Civics Practice",
  "start": "Start Quiz",
  "practice": "Practice",
  "favorites": "Favorites",
  "enter_name": "Enter your name",
  "save": "Save",
  "good_morning": "Good morning",
  "good_afternoon": "Good afternoon",
  "good_evening": "Good evening"
}

Adding a New Language

  1. Create a translation file under lib/i18n.ts or equivalent. Example: it.json for Italian.
  2. Add keys for all required strings.
  3. Update the language picker in LanguagePicker.tsx:
    { code: "it", label: "Italiano", flag: "🇮🇹" }
    
  4. Test on device to ensure proper font rendering (RTL support if needed).
  5. Submit translations for review before merging.

Best Practices

  • Always reuse keys instead of duplicating text.
  • Keep keys snake_case (e.g., good_morning, not GoodMorning).
  • Ensure all languages contain identical keys.
  • For RTL languages (Dari, Pashto), test alignment and directionality.
  • Never hardcode user-facing strings in components — always use t(lang, key).

Future Enhancements

  • Add string validation to detect missing keys.
  • Implement auto-detect language from device locale.
  • Expand translation coverage for error messages, onboarding, and settings.

Last updated: September 2025