Quick Answer
i18n is an abbreviation for "internationalization" (i + 18 letters + n). It refers to designing and developing software so it can be adapted for users in different languages and regions without requiring engineering changes.
Why "i18n"?
The term "i18n" is a numeronym:
- i = first letter
- 18 = number of letters between 'i' and 'n'
- n = last letter
This shorthand exists because "internationalization" is long and frequently used in technical contexts.
Definition
Internationalization (i18n): The process of designing software architecture to support multiple languages, regions, and cultural conventions. This includes:
- Extracting user-facing text from code
- Supporting different date, time, and number formats
- Handling right-to-left (RTL) languages
- Managing different pluralization rules
- Allowing for text expansion in translations
i18n vs l10n: What's the Difference?
| Term | Stands For | Meaning |
|---|---|---|
| i18n | Internationalization | Preparing your app for multiple languages |
| l10n | Localization | Actually translating content for specific locales |
Analogy:
- i18n = Building a car with steering on a removable module
- l10n = Installing the steering wheel on the left (US) or right (UK)
You do i18n once. You do l10n for each language.
Why Does i18n Matter?
Business Impact
| Statistic | Source |
|---|---|
| 75% of users prefer content in their native language | CSA Research |
| 40% won't buy from sites in other languages | CSA Research |
| Localized apps see 128% more downloads | Distomo |
| 25-40% revenue increase when adding key languages | Various |
Technical Benefits
- Scalability: Add new languages without code changes
- Maintainability: Translations separated from code
- Quality: Consistent handling of locale-specific formatting
How i18n Works
Step 1: Extract Strings
Move hardcoded text to separate files:
Before (hardcoded):
JSX<h1>Welcome to our app</h1> <button>Sign up</button>
After (internationalized):
JSX<h1>{t('welcome.title')}</h1> <button>{t('auth.signup')}</button>
Translation file (en.json):
JSON1{ 2 "welcome": { 3 "title": "Welcome to our app" 4 }, 5 "auth": { 6 "signup": "Sign up" 7 } 8}
Step 2: Handle Variables
Use interpolation instead of concatenation:
Bad:
JavaScript"Hello, " + name + "!"
Good:
JavaScriptt('greeting', { name: name }) // Translation: "Hello, {name}!"
Step 3: Support Pluralization
Different languages have different plural rules:
| Language | Plural Forms |
|---|---|
| English | 2 (one, other) |
| French | 2+ (one, other, many) |
| Russian | 3 (one, few, many) |
| Arabic | 6 (zero, one, two, few, many, other) |
Implementation:
JSON{ "items": "{count, plural, =0 {No items} =1 {1 item} other {# items}}" }
Step 4: Format Dates, Numbers, Currencies
Use locale-aware formatting:
JavaScript1// Date formatting 2new Intl.DateTimeFormat('en-US').format(date) // "12/31/2026" 3new Intl.DateTimeFormat('de-DE').format(date) // "31.12.2026" 4 5// Currency formatting 6new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(99) 7// "$99.00" 8 9new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(99) 10// "99,00 €"
Step 5: Support RTL Languages
Arabic, Hebrew, and Persian read right-to-left:
HTML<html dir="rtl" lang="ar">
CSS/* Use logical properties */ margin-inline-start: 1rem; /* Instead of margin-left */
i18n by Framework
React
JSX1// Using react-i18next 2import { useTranslation } from 'react-i18next'; 3 4function App() { 5 const { t } = useTranslation(); 6 return <h1>{t('welcome')}</h1>; 7}
Next.js
JSX1// Using next-intl 2import { useTranslations } from 'next-intl'; 3 4function Page() { 5 const t = useTranslations('home'); 6 return <h1>{t('title')}</h1>; 7}
Vue
VUE1<!-- Using vue-i18n --> 2<template> 3 <h1>{{ $t('welcome') }}</h1> 4</template>
iOS (Swift)
Swiftlet title = NSLocalizedString("welcome", comment: "Welcome message")
Android (Kotlin)
Kotlinval title = getString(R.string.welcome)
Common i18n Mistakes
1. String Concatenation
Wrong:
JavaScript"Hello " + name + ", you have " + count + " items"
Right:
JavaScriptt('message', { name, count })
2. Hardcoded Formatting
Wrong:
JavaScript`$${price.toFixed(2)}`
Right:
JavaScriptnew Intl.NumberFormat(locale, { style: 'currency', currency }).format(price)
3. Fixed-Width Layouts
Wrong:
CSS.button { width: 100px; }
Right:
CSS.button { min-width: 100px; padding: 0 1rem; }
German text is ~30% longer than English. Allow for expansion.
4. Splitting Sentences
Wrong:
JSX<span>{t('click')}</span> <a>{t('here')}</a> <span>{t('to_continue')}</span>
Right:
JSX<Trans i18nKey="click_here"> Click <a>here</a> to continue </Trans>
i18n Tools
| Category | Tools |
|---|---|
| Libraries | react-i18next, next-intl, vue-i18n, FormatJS |
| TMS (Management) | IntlPull, Lokalise, Crowdin, Phrase |
| Machine Translation | Google Translate, DeepL, GPT-4 |
| Testing | Pseudolocalization tools |
Frequently Asked Questions
What does i18n stand for?
i18n stands for "internationalization", a numeronym where 18 represents the number of letters between 'i' and 'n'.
What is the difference between i18n and l10n?
i18n (internationalization) is preparing your code to support multiple languages. l10n (localization) is the actual translation of content into specific languages.
Is i18n the same as translation?
No. i18n is the technical preparation that enables translation. Translation is part of l10n (localization), which comes after i18n.
How do I start with i18n?
- Choose an i18n library for your framework (react-i18next, next-intl, etc.)
- Extract hardcoded strings to translation files
- Replace hardcoded text with translation function calls
- Set up locale-aware formatting for dates, numbers, currencies
- Use a TMS like IntlPull to manage translations
What is a locale?
A locale is a combination of language and region, like:
- en-US (English, United States)
- en-GB (English, United Kingdom)
- es-ES (Spanish, Spain)
- es-MX (Spanish, Mexico)
Is i18n hard to implement?
Initial i18n setup takes effort, but modern libraries make it straightforward. The key is starting early. Retrofitting i18n into a large codebase is much harder than building it in from the start.
Summary
i18n (internationalization) is the foundation for building software that works across languages and regions. Key points:
- i18n = preparing code for multiple languages
- l10n = actually translating content
- Extract strings, use interpolation, support plurals
- Use locale-aware formatting for dates/numbers
- Handle RTL languages
- Choose the right library for your framework
Ready to internationalize your app? IntlPull helps you manage translations with AI-powered automation and OTA updates for mobile apps.
