← Lessons

quiz vs the machine

Silver1140

Frontend

Internationalization and Localization

Build apps ready to adapt language, dates, and formats per locale.

6 min read · intro · beat Silver to climb

Two related terms

  • Internationalization (i18n) is designing the app so it can adapt to languages and regions, without hardcoded text or formats.
  • Localization (l10n) is the act of adapting it to a specific locale, supplying translations and regional formats.

What varies by locale

  • Text: stored in resource files keyed by message, not hardcoded in markup.
  • Numbers, dates, currency: formatted with the built in Intl APIs rather than manual string building.
  • Plurals and gender: many languages have more than two plural forms, handled by plural rules.

Pitfalls

  • Concatenating sentence fragments breaks in languages with different word order. Use full templated messages.
  • Fixed width buttons overflow because translations can be much longer.
  • Assuming a comma decimal separator or a fixed date order fails across regions.

Key idea

Internationalization prepares the app to adapt while localization supplies per locale data, using Intl and full messages instead of hardcoded strings.

Check yourself

Answer to earn rating on the learn ladder.

1. What is the difference between i18n and l10n?

2. Why avoid concatenating translated sentence fragments?