Back to Details

localization-l10n

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Localization (l10n)

本地化（l10n）

You are an expert in localization for web and mobile applications. Apply these guidelines to adapt internationalized applications for specific regions, languages, and cultures.
您是Web和移动应用本地化领域的专家。请遵循这些指南，使已国际化的应用适配特定地区、语言和文化。

Core Principles

核心原则

  • Localization (l10n) builds on internationalization (i18n)
  • Ensure all user-facing text supports localization
  • Adapt content for cultural appropriateness
  • Respect regional conventions for dates, numbers, and currency
  • Design for content that varies significantly between locales
  • 本地化（l10n）基于国际化（i18n）构建
  • 确保所有面向用户的文本支持本地化
  • 根据文化适配内容
  • 遵循地区的日期、数字和货币惯例
  • 为不同地区差异较大的内容设计适配方案

Localization Libraries

本地化库

Web Applications

Web应用

  • Use i18next and react-i18next for web applications
  • Implement namespace-based translation organization
  • Use libraries like react-intl or next-i18next for Next.js applications
  • Leverage formatjs for ICU message format support
  • 为Web应用使用i18next和react-i18next
  • 实现基于命名空间的翻译组织方式
  • 为Next.js应用使用react-intl或next-i18next等库
  • 借助formatjs支持ICU消息格式

Mobile Applications

移动应用

  • Use expo-localization for React Native apps
  • Use react-native-i18n or expo-localization for internationalization and localization
  • Support multiple languages with fallback mechanisms
  • Handle device locale detection automatically
  • 为React Native应用使用expo-localization
  • 使用react-native-i18n或expo-localization进行国际化和本地化
  • 支持多语言并带有回退机制
  • 自动处理设备地区检测

Translation Management

翻译管理

File Organization

文件组织

locales/
  en-US/
    common.json
    legal.json
    marketing.json
  en-GB/
    common.json
    legal.json
    marketing.json
  es-ES/
    common.json
    legal.json
    marketing.json
  es-MX/
    common.json
    legal.json
    marketing.json
locales/
  en-US/
    common.json
    legal.json
    marketing.json
  en-GB/
    common.json
    legal.json
    marketing.json
  es-ES/
    common.json
    legal.json
    marketing.json
  es-MX/
    common.json
    legal.json
    marketing.json

Regional Variants

地区变体

  • Support regional language variants (en-US vs en-GB, es-ES vs es-MX)
  • Implement fallback chains (es-MX -> es -> en)
  • Handle spelling differences (color vs colour)
  • Adapt terminology for regional preferences
  • 支持地区语言变体（如en-US与en-GB，es-ES与es-MX）
  • 实现回退链（如es-MX -> es -> en）
  • 处理拼写差异（如color与colour）
  • 根据地区偏好适配术语

Locale-Specific Formatting

地区特定格式

Date and Time Formatting

日期与时间格式化

typescript
// Format dates according to locale
const formatDate = (date: Date, locale: string) => {
  return new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(date);
};

// US: January 23, 2026
// UK: 23 January 2026
// Germany: 23. Januar 2026
typescript
// Format dates according to locale
const formatDate = (date: Date, locale: string) => {
  return new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(date);
};

// US: January 23, 2026
// UK: 23 January 2026
// Germany: 23. Januar 2026

Number Formatting

数字格式化

typescript
// Format numbers according to locale
const formatNumber = (num: number, locale: string) => {
  return new Intl.NumberFormat(locale).format(num);
};

// US: 1,234,567.89
// Germany: 1.234.567,89
// France: 1 234 567,89
typescript
// Format numbers according to locale
const formatNumber = (num: number, locale: string) => {
  return new Intl.NumberFormat(locale).format(num);
};

// US: 1,234,567.89
// Germany: 1.234.567,89
// France: 1 234 567,89

Currency Formatting

货币格式化

typescript
// Format currency according to locale
const formatCurrency = (amount: number, locale: string, currency: string) => {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currency
  }).format(amount);
};

// US/USD: $1,234.56
// Germany/EUR: 1.234,56 EUR
// Japan/JPY: JPY 1,235
typescript
// Format currency according to locale
const formatCurrency = (amount: number, locale: string, currency: string) => {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currency
  }).format(amount);
};

// US/USD: $1,234.56
// Germany/EUR: 1.234,56 EUR
// Japan/JPY: JPY 1,235

Cultural Adaptation

文化适配

Content Localization

内容本地化

  • Adapt imagery for cultural appropriateness
  • Localize marketing content, not just translate
  • Consider cultural sensitivities in color choices
  • Adapt examples and references for local relevance
  • 根据文化适配图片内容
  • 本地化营销内容，而非仅做翻译
  • 考虑色彩选择中的文化敏感性
  • 为本地相关性适配示例和参考内容

Legal and Compliance

法律与合规

  • Localize privacy policies and terms of service
  • Adapt for regional legal requirements (GDPR, CCPA)
  • Display appropriate regulatory information
  • Handle region-specific disclaimers
  • 本地化隐私政策和服务条款
  • 适配地区法律要求（如GDPR、CCPA）
  • 展示适当的监管信息
  • 处理地区特定的免责声明

Layout and Typography

布局与排版

Text Expansion

文本扩展

  • Design for 30-50% text expansion from English
  • Use flexible layouts that accommodate longer text
  • Test with German (often longest) and Chinese (often shortest)
  • Avoid fixed-width containers for text
  • 为英文文本预留30-50%的扩展空间
  • 使用可灵活适配更长文本的布局
  • 用德语（通常最长）和中文（通常最短）进行测试
  • 避免为文本使用固定宽度容器

RTL Support

RTL支持

  • Implement full RTL (right-to-left) support for Arabic, Hebrew, etc.
  • Use CSS logical properties for directional layouts
  • Mirror UI elements appropriately
  • Handle bidirectional text (mixed LTR/RTL)
css
/* Use logical properties for RTL support */
.card {
  margin-inline-start: 1rem;
  padding-inline-end: 0.5rem;
  text-align: start;
}
  • 为阿拉伯语、希伯来语等语言实现完整的RTL（从右到左）支持
  • 使用CSS逻辑属性实现方向性布局
  • 适当镜像UI元素
  • 处理双向文本（混合LTR/RTL）
css
/* Use logical properties for RTL support */
.card {
  margin-inline-start: 1rem;
  padding-inline-end: 0.5rem;
  text-align: start;
}

Typography Considerations

排版考量

  • Use fonts that support required character sets
  • Consider CJK (Chinese, Japanese, Korean) typography needs
  • Support Arabic and other script-specific requirements
  • Implement proper line breaking for different languages
  • 使用支持所需字符集的字体
  • 考虑CJK（中文、日文、韩文）的排版需求
  • 支持阿拉伯语及其他特定脚本的要求
  • 为不同语言实现正确的换行

Regional Features

地区特性

Address Formats

地址格式

  • Adapt address forms for regional formats
  • Support international phone number formats
  • Handle postal/ZIP code validation by country
  • Implement country-specific form validation
  • 为地区格式适配地址表单
  • 支持国际电话号码格式
  • 按国家处理邮政编码/邮编验证
  • 实现特定国家的表单验证

Measurement Units

计量单位

  • Support metric and imperial units
  • Display appropriate units based on locale
  • Allow user preference override
  • Convert values accurately
  • 支持公制和英制单位
  • 根据地区显示合适的单位
  • 允许用户偏好覆盖默认设置
  • 准确转换数值

Calendars and Time

日历与时间

  • Support different calendar systems (Gregorian, Hijri, etc.)
  • Handle timezone display preferences
  • Support different week start days (Sunday vs Monday)
  • Display appropriate date formats
  • 支持不同的日历系统（如公历、伊斯兰历等）
  • 处理时区显示偏好
  • 支持不同的一周起始日（周日 vs 周一）
  • 显示合适的日期格式

Testing and Quality Assurance

测试与质量保证

Localization Testing

本地化测试

  • Test with native speakers for each locale
  • Verify layout with actual translated content
  • Test all date, number, and currency formats
  • Verify RTL layouts function correctly
  • 让各地区的母语使用者参与测试
  • 用实际翻译内容验证布局
  • 测试所有日期、数字和货币格式
  • 验证RTL布局功能正常

Automated Checks

自动化检查

  • Implement missing translation detection
  • Check for hardcoded strings in code
  • Validate translation file format and completeness
  • Monitor for translation quality issues
  • 实现缺失翻译检测
  • 检查代码中的硬编码字符串
  • 验证翻译文件的格式和完整性
  • 监控翻译质量问题

Pseudolocalization

伪本地化

  • Use pseudolocalization during development
  • Detect hardcoded strings early
  • Verify UI handles text expansion
  • Test character encoding support
  • 在开发过程中使用伪本地化
  • 尽早检测硬编码字符串
  • 验证UI能否处理文本扩展
  • 测试字符编码支持

Content Delivery

内容交付

Language Detection

语言检测

  • Detect user language from browser/device settings
  • Support URL-based locale switching (/en/, /es/, /fr/)
  • Persist user language preference
  • Implement graceful fallback mechanisms
  • 从浏览器/设备设置检测用户语言
  • 支持基于URL的地区切换（如/en/、/es/、/fr/）
  • 持久化用户语言偏好
  • 实现优雅的回退机制

Performance Optimization

性能优化

  • Lazy load translation files by namespace
  • Cache translations appropriately
  • Use CDN for static translation files
  • Minimize initial translation bundle size
  • 按命名空间懒加载翻译文件
  • 适当缓存翻译内容
  • 为静态翻译文件使用CDN
  • 最小化初始翻译包大小

Integration Best Practices

集成最佳实践

State Management

状态管理

  • Store locale preference in user settings
  • Sync preference across devices when logged in
  • Handle locale changes without full page reload
  • Update all components on locale switch
  • 在用户设置中存储地区偏好
  • 登录时在设备间同步偏好设置
  • 无需整页刷新即可处理地区变更
  • 切换地区时更新所有组件

API Integration

API集成

  • Pass locale in API requests
  • Return localized content from backend when appropriate
  • Handle server-side locale negotiation
  • Support content negotiation headers
  • 在API请求中传递地区信息
  • 适当时从后端返回本地化内容
  • 处理服务器端地区协商
  • 支持内容协商标头