What is i18n (Internationalization)? Definition & Examples

Q: How do I start with i18n?

1. Choose an i18n library for your framework (react-i18next, next-intl, etc.) 2. Extract hardcoded strings to translation files 3. Replace hardcoded text with translation function calls 4. Set up locale-aware formatting for dates, numbers, currencies 5. Use a TMS like IntlPull to manage translations

Q: 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)

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

i18n	Internationalization	Preparing your app for multiple languages
l10n	Localization	Actually translating content for specific locales

i18n	Internationalization	Preparing your app for multiple languages
l10n	Localization	Actually translating content for specific locales

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

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

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

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

Localized apps see 128% more downloads	Distomo
25-40% revenue increase when adding key languages	Various

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):

<h1>Welcome to our app</h1>
<button>Sign up</button>

After (internationalized):

<h1>{t('welcome.title')}</h1>
<button>{t('auth.signup')}</button>

Translation file (en.json):

{
  "welcome": {
    "title": "Welcome to our app"
  },
  "auth": {
    "signup": "Sign up"
  }
}

Step 2: Handle Variables

Use interpolation instead of concatenation:

Bad:

"Hello, " + name + "!"

Good:

t('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)

English	2 (one, other)
French	2+ (one, other, many)
Russian	3 (one, few, many)
Arabic	6 (zero, one, two, few, many, other)

English	2 (one, other)
French	2+ (one, other, many)
Russian	3 (one, few, many)
Arabic	6 (zero, one, two, few, many, other)

French	2+ (one, other, many)
Russian	3 (one, few, many)
Arabic	6 (zero, one, two, few, many, other)

Russian	3 (one, few, many)
Arabic	6 (zero, one, two, few, many, other)

Arabic	6 (zero, one, two, few, many, other)

Implementation:

{
  "items": "{count, plural, =0 {No items} =1 {1 item} other {# items}}"
}

Step 4: Format Dates, Numbers, Currencies

Use locale-aware formatting:

// Date formatting
new Intl.DateTimeFormat('en-US').format(date) // "12/31/2024"
new Intl.DateTimeFormat('de-DE').format(date) // "31.12.2024"

// Currency formatting
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(99)
// "$99.00"

new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(99)
// "99,00 €"

Step 5: Support RTL Languages

Arabic, Hebrew, and Persian read right-to-left:

<html dir="rtl" lang="ar">

/* Use logical properties */
margin-inline-start: 1rem; /* Instead of margin-left */

i18n by Framework

React

// Using react-i18next
import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  return <h1>{t('welcome')}</h1>;
}

Next.js

// Using next-intl
import { useTranslations } from 'next-intl';

function Page() {
  const t = useTranslations('home');
  return <h1>{t('title')}</h1>;
}

Vue

<!-- Using vue-i18n -->
<template>
  <h1>{{ $t('welcome') }}</h1>
</template>

iOS (Swift)

let title = NSLocalizedString("welcome", comment: "Welcome message")

Android (Kotlin)

val title = getString(R.string.welcome)

Common i18n Mistakes

1. String Concatenation

Wrong:

"Hello " + name + ", you have " + count + " items"

Right:

t('message', { name, count })

2. Hardcoded Formatting

Wrong:

`$${price.toFixed(2)}`

Right:

new Intl.NumberFormat(locale, { style: 'currency', currency }).format(price)

3. Fixed-Width Layouts

Wrong:

.button { width: 100px; }

Right:

.button { min-width: 100px; padding: 0 1rem; }

German text is ~30% longer than English. Allow for expansion.

4. Splitting Sentences

Wrong:

<span>{t('click')}</span>
<a>{t('here')}</a>
<span>{t('to_continue')}</span>

Right:

<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

Libraries	react-i18next, next-intl, vue-i18n, FormatJS
TMS (Management)	IntlPull, Lokalise, Crowdin, Phrase
Machine Translation	Google Translate, DeepL, GPT-4
Testing	Pseudolocalization 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

TMS (Management)	IntlPull, Lokalise, Crowdin, Phrase
Machine Translation	Google Translate, DeepL, GPT-4
Testing	Pseudolocalization tools

Machine Translation	Google Translate, DeepL, GPT-4
Testing	Pseudolocalization tools

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.

What is i18n? Internationalization Explained Simply

Quick Answer

Why "i18n"?

Definition

i18n vs l10n: What's the Difference?

Why Does i18n Matter?

Business Impact

Technical Benefits

How i18n Works

Step 1: Extract Strings

Step 2: Handle Variables

Step 3: Support Pluralization

Step 4: Format Dates, Numbers, Currencies

Step 5: Support RTL Languages

i18n by Framework

React

Next.js

Vue

iOS (Swift)

Android (Kotlin)

Common i18n Mistakes

1. String Concatenation

2. Hardcoded Formatting

3. Fixed-Width Layouts

4. Splitting Sentences

i18n Tools

Frequently Asked Questions

What does i18n stand for?

What is the difference between i18n and l10n?

Is i18n the same as translation?

How do I start with i18n?

What is a locale?

Is i18n hard to implement?

Summary

Related Articles

What is a Translation Management System (TMS)? Complete Guide

What is an OTA Update? Over-the-Air Updates Explained

How to Localize a React App: Step-by-Step Guide

Ready to simplify your i18n workflow?