Stop 20 · Advanced TopicsTopics · 10/14

Localization (l10n)

In short

Translating words is only half the job. ₹12,34,567 in India becomes 1,234,567 in the US, and dates flip order too. Localization makes your app feel native in each region.

Adapting content for a specific locale beyond just translation — date/number/currency formats, right-to-left layouts, and culturally appropriate imagery.

The jaadu serves a burger with a crispy potato patty and veggie options at a shop counter.

Think of it like this

McAloo Tikki thinking

A global burger chain doesn't just translate its menu in India. It changes the food itself, adds veg options and prices in rupees. Localization is the same idea: adapt formats, currency, images and tone, not just the language.

Watch it happen

Same data, two locales

en-IN

₹12,34,567.50 with lakh grouping
Dates read day first: 26/1/2026
Prices in rupees

en-US

$1,234,567.50 with thousand grouping
Dates read month first: 1/26/2026
Prices in dollars

Never format by hand. Pass the user's locale to Intl and let it handle the rules.

The big ideas

What you need to know

Numbers and currency

en-IN groups digits in lakhs and crores. Other locales group in thousands and use different symbols.

Dates and times

26/1/2026 in India is 1/26/2026 in the US. Time zones matter for anything scheduled.

Right-to-left languages

Arabic and Urdu read right to left. Set dir="rtl" and use logical CSS like margin-inline-start.

Intl is built in

The browser's Intl API formats numbers, dates, lists and relative times for any locale, no library needed.

See it in code

Walk through the code

1const price = 1234567.5;2 3new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR" }).format(price);4// "₹12,34,567.50"5 6new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(price);7// "$1,234,567.50"8 9const republicDay = new Date(2026, 0, 26);10new Intl.DateTimeFormat("en-IN").format(republicDay); // "26/1/2026"11new Intl.DateTimeFormat("en-US").format(republicDay); // "1/26/2026"

1/4One number to format.

Same number, same date, different output per locale. Never format these by hand with string tricks.

Save yourself the pain

Common mistakes

Oops

Writing "₹" + amount.toFixed(2) everywhere.

Do this instead

Use Intl.NumberFormat with the user's locale and currency. It handles grouping, symbols and decimals.

Oops

Using margin-left and padding-right for spacing in an app that supports Urdu.

Do this instead

Use logical properties like margin-inline-start, which flip automatically for right-to-left layouts.

Your mission

Format for three countries

~20 min

Quick check

What's the difference between i18n and l10n?

Go deeper

1Format a date and a currency value using `Intl.DateTimeFormat`/`Intl.NumberFormat` for 2-3 locales.
2Test your layout in a right-to-left language (Arabic/Hebrew) if relevant to your audience.
3Learn the distinction: i18n is the technical capability, l10n is the actual content adaptation.