Title
Subtitle
Title
Paragraph1
Paragraph2
Paragraph3
Title
Paragraph1
Paragraph2
Paragraph3
Title
Subtitle
Locale Identifiers (BCP 47)
BCP 47 tags like en-US or zh-Hans-CN encode language, script, and region. They are the foundation of every i18n system and determine which translations, formats, and rules apply.
Unicode & UTF-8
Unicode assigns a unique code point to every character in every script. UTF-8 is the dominant encoding on the web and ensures text renders correctly regardless of language.
Translation Keys
Translation keys are stable identifiers that map to locale-specific strings. They decouple your source code from translatable content, enabling parallel development and translation.
Pluralization (ICU)
Languages have different plural rules — English has two forms, Arabic has six. ICU MessageFormat handles plurals, gender, and select expressions in a single syntax.
RTL Support
Arabic, Hebrew, and other scripts read right-to-left. RTL support requires mirroring layouts, flipping icons, and using CSS logical properties instead of left/right.
Date / Number / Currency
Dates, numbers, and currencies vary by locale. The Intl API and libraries like date-fns provide locale-aware formatting so 1,000.50 renders as 1.000,50 in German.
Title
Subtitle
JSON
Most popular for web apps (React, Vue, Angular). Human-readable, supports nesting for organized key structures. No built-in pluralization standard, so libraries like ICU MessageFormat fill the gap.
XLIFF
XML-based industry standard for translation exchange between tools. Supported by all professional TMS platforms. Verbose but feature-rich, with built-in support for notes, state tracking, and metadata.
PO/POT (Gettext)
Classic open-source format used in Python, PHP, and Ruby ecosystems. Built-in plural support with dedicated plural forms syntax. Widely supported by translators and translation tools.
ARB
Application Resource Bundle is the Flutter and Dart standard format. JSON-based with ICU message syntax support, enabling plurals and selects natively. Used by Flutter's gen-l10n tooling.
.strings / .stringsdict
Apple platform native formats for iOS and macOS development. .strings handles simple key-value pairs while .stringsdict uses XML plist structure for pluralization rules.
.resx
.NET resource file format used for C# and VB.NET applications. XML-based with strong Visual Studio tooling integration. Supports typed resources for strings, images, and other assets.
Title
Subtitle
Audit Your Codebase
Identify every hardcoded string, date format, and locale-dependent pattern. Map which components and pages contain user-facing text that needs extraction.
Externalize Strings
Move all user-facing text into structured resource files (JSON, XLIFF, or PO). Replace inline strings with translation function calls that reference keys.
Choose Your Tools
Select an i18n library for your framework, a translation management system (TMS) for collaboration, and decide between human, AI, or hybrid translation workflows.
Integrate & Ship
Wire your i18n library into routing and rendering, connect your TMS to CI/CD for automatic syncing, and deploy locale bundles via CDN for fast delivery.
Title
Subtitle
Developer Integration
Evaluate CLI tools, SDK support, Git-based workflows, and CI/CD hooks. The best TMS platforms integrate directly into your development pipeline so translations stay in sync with code changes automatically.
Translation Memory
Translation memory stores previously approved translations and suggests them for similar or identical strings. This reduces translation cost, speeds up turnaround, and maintains consistency across your product.
Collaboration Features
Look for reviewer workflows, inline comments, shared glossaries, and approval chains. These features enable translators, reviewers, and developers to work together without bottlenecks or miscommunication.
AI and Automation
Modern TMS platforms offer machine translation suggestions, automated quality checks, batch operations, and smart routing. AI-assisted workflows reduce manual effort while maintaining translation quality.
Title
Subtitle
React
react-intl, react-i18next, and FormatJS patterns
Next.js
App Router, middleware, and server component i18n
Vue
vue-i18n composition API and SFC integration
Angular
Built-in i18n, ngx-translate, and Transloco
Svelte
svelte-i18n, SvelteKit routing, and stores
Flutter
intl package, ARB files, and gen-l10n tooling
React Native
i18next, Expo localization, and native modules
Nuxt
@nuxtjs/i18n module with auto-routing
Title
Subtitle
String Concatenation
Building sentences by concatenating fragments breaks in languages with different word order. Use ICU MessageFormat with placeholders instead.
Hardcoded Strings
Embedding user-facing text directly in source code makes translation impossible without code changes. Externalize every string from day one.
Ignoring Plurals
Simple if/else for singular/plural only works in English. Many languages have multiple plural forms that require proper ICU plural rules.
Translation as Afterthought
Bolting on i18n after launch means expensive refactoring. Designing for internationalization from the start saves time and prevents architectural debt.
Title
Subtitle
- All user-facing strings externalized to resource files
- Locale detection implemented (browser, URL, user preference)
- Pluralization handled with ICU MessageFormat for all target languages
- Date, time, number, and currency formatting uses Intl API or equivalent
- RTL layout support tested with CSS logical properties
- Fallback locale configured for missing translations
- Translation keys follow a consistent naming convention
- CI pipeline validates no missing or unused translation keys
Title
Subtitle
- Pseudo
- Visual
- Automated
- Linguistic
- Expansion
Title
Subtitle
What is the difference between i18n and L10n?
Internationalization (i18n) is the engineering process of designing software so it can support multiple languages and regions. Localization (L10n) is the content process of adapting that software for a specific locale, including translating text, adjusting formats, and ensuring cultural appropriateness. i18n happens once in your codebase; L10n happens for every locale you support.
Which i18n library should I use?
The best library depends on your framework. For React, react-intl (FormatJS) and react-i18next are the most widely adopted. Vue developers typically use vue-i18n. Angular has built-in i18n support alongside community options like Transloco. Svelte projects use svelte-i18n. Evaluate each option based on bundle size, ICU support, and how well it integrates with your rendering model.
How many languages should I launch with?
Start with two to three high-impact languages based on your existing user data or target market research. This lets you validate your i18n architecture, translation workflow, and QA process at a manageable scale. Expand to additional languages once you have a reliable pipeline in place, using analytics to prioritize which locales to add next.
Can I use machine translation for my app?
A hybrid approach works well: use machine translation for initial drafts and high-volume, low-criticality content, then have human reviewers refine quality-critical strings like marketing copy, error messages, and legal text. Modern neural machine translation has improved significantly, but human review remains essential for nuance, brand voice, and cultural accuracy.
What is pseudo-localization?
Pseudo-localization is a testing technique that replaces text with accented or extended characters (e.g., turning 'Hello' into '[~Hellllo~]') without changing meaning. It helps developers spot hardcoded strings, text truncation, and layout issues before real translations are available. Most i18n libraries and TMS tools support generating pseudo-localized output automatically.
How do I handle dynamic content localization?
Use ICU MessageFormat placeholders for interpolation (e.g., 'Hello, {name}') instead of concatenating strings. For plurals, use ICU plural syntax that adapts to each language's rules. Avoid building sentences from fragments, since word order varies across languages. For rich text, use tagged placeholders that let translators reorder HTML elements without breaking markup.