Comprehensive Guide to Internationalization (i18n) and Localization (l10n) in Web Development

Internationalization and Localization Overview

The article explains why many Chinese companies are expanding overseas and how internationalization becomes a critical career direction. It emphasizes that successful global products require engineers with cultural awareness and knowledge of multiple regions.

Concepts and Terminology

Key terms such as i18n (internationalization) and l10n (localization) are defined, along with language identifiers (ISO 639‑1), region codes (ISO 3166‑1), and script codes. Examples show how Apple adapts keyboards for different locales.

Technical Foundations

JavaScript's Intl object is introduced for handling dates, times, numbers, currencies, and relative time. Code snippets demonstrate Intl.DateTimeFormat , Intl.NumberFormat , Intl.RelativeTimeFormat , Intl.PluralRules , and Intl.Collator usage across various locales.

Layout and Directionality

Discussion of text flow, writing modes, and CSS logical properties (e.g., margin-inline-start , text-align: start ) for supporting left‑to‑right and right‑to‑left languages. Examples include handling RTL languages like Arabic and Hebrew, and using dir="rtl" to flip layouts.

Number and Currency Formatting

Shows how different locales format numbers, percentages, and currencies, with examples for USD, CNY, EUR, JPY, GBP, and others. Also covers compact notation and locale‑specific symbols.

Sorting and List Formatting

Uses Intl.Collator for locale‑aware string comparison and array sorting, and Intl.ListFormat for generating natural language lists.

Calendars and Weekdays

Explains various calendar systems (Gregorian, Islamic, Chinese, etc.) and how to format dates using specific calendars via Intl.DateTimeFormat . Demonstrates retrieving the first day of the week for different locales and generating week day names.

Compatibility and Polyfills

Describes browser support for Intl APIs, the need for polyfills on older platforms, and how to use the @formatjs packages to provide fallback implementations. Also notes why Babel’s core‑js does not polyfill Intl features.

Node.js Usage

Provides instructions for installing @formatjs/intl in Node.js and creating Intl instances with caching for server‑side number formatting.