internationalization

name	Internationalization
description	Designing and building software that can be adapted to various languages, regions, and cultures without engineering changes
license	MIT
compatibility	universal
audience	developers, designers, product managers
category	interdisciplinary

Internationalization

What I Do

I prepare applications for global audiences by designing systems that support multiple languages, date/time formats, number formats, and cultural conventions. I separate locale-specific content from code to enable efficient localization.

When to Use Me

• Preparing applications for international markets
• Implementing multiple language support
• Handling locale-specific formatting (dates, numbers, currencies)
• Managing right-to-left (RTL) language layouts
• Creating translation workflows and management systems
• Adapting content for cultural preferences

Core Concepts

1. Locale Identification: Language tags (en-US, zh-Hans, ar-EG)
2. Message Formatting: ICU MessageFormat with plurals, gender, select
3. Date/Time Formatting: Locale-aware date and time display
4. Number Formatting: Locale-specific decimal/thousand separators
5. Pluralization Rules: Language-specific plural categories
6. Text Expansion: Languages that require more space than English
7. RTL Support: Right-to-left layout for Arabic, Hebrew, Persian
8. Cultural Adaptations: Date formats, currencies, address formats
9. Translation Management: Workflows for handling translations
10. Pseudo-localization: Testing for i18n before actual translations

Code Examples

Internationalization Provider

class I18nProvider {
  constructor(locale, translations) {
    this.locale = locale;
    this.translations = translations;
    this.fallbackLocale = 'en';
  }
  
  t(key, params = {}) {
    const keys = key.split('.');
    let message = this.translations[this.locale];
    
    for (const k of keys) {
      message = message?.[k] || this.translations[this.fallbackLocale]?.[k];
    }
    
    if (!message) return key;
    
    return this.interpolate(message, params);
  }
  
  interpolate(message, params) {
    return message.replace(/\{(\w+)\}/g, (_, key) => {
      return params[key] !== undefined ? params[key] : `{${key}}`;
    });
  }
  
  formatDate(date, options = {}) {
    const localeDate = new (date);
      .(., {
      : ,
      ...options
    }).(localeDate);
  }
  
  () {
      .(., {
      : ,
      : ,
      : ,
      ...options
    }).(number);
  }
  
  () {
      .(., {
      : ,
      currency
    }).(amount);
  }
}

ICU Message Formatter

class MessageFormatter {
  constructor(locale) {
    this.locale = locale;
    this.plurals = {
      en: (n) => n === 1 ? 'one' : 'other',
      zh: () => 'other',
      ar: (n) => {
        if (n === 0) return 'zero';
        if (n === 1) return 'one';
        if (n === 2) return 'two';
        if (n % 100 >= 3 && n % 100 <= 10) return 'few';
        if (n % 100 >= 11) return 'many';
        return 'other';
      }
    };
  }
  
  format(message, params) {
    return message.replace(/\{(\w+)(,\s*\w+(?:,\s*[^}]+)?)?\}/g, (match, key, rest) => {
      const value = params[key];
       (value === )  match;
      
       pluralFn = .[.] || ..;
      
       (!rest)  value;
      
       [, type, options] = rest.() || [];
      
       (type) {
         :
           category = (value);
           optionMatch = options?.( ());
           optionMatch ? optionMatch[] : options.().();
         :
           selectMatch = options?.( ());
           selectMatch ? selectMatch[] : ;
        :
           value;
      }
    });
  }
}


 formatter =  ();
 message = formatter.(
  ,
  { :  }
);

RTL Layout Manager

class RTLManager {
  constructor() {
    this.supportedRTL = ['ar', 'he', 'fa', 'ur'];
    this.currentDir = 'ltr';
  }
  
  detectLocale(locale) {
    const baseLocale = locale.split('-')[0];
    return this.supportedRTL.includes(baseLocale) ? 'rtl' : 'ltr';
  }
  
  applyDirection(locale) {
    const dir = this.detectLocale(locale);
    this.currentDir = dir;
    document.documentElement.dir = dir;
    document.documentElement.lang = locale;
  }
  
  flipStyles(styles) {
    if (this.currentDir !== 'rtl') return styles;
    
    const flipMap = {
      'margin-left': 'margin-right',
      'margin-right': 'margin-left',
      : ,
      : ,
      : ,
      : ,
      : ,
      : ,
      : ,
      : 
    };
    
     flipped = { ...styles };
    .(styles).( {
       (flipMap[key]) {
        flipped[flipMap[key]] = value;
         flipped[key];
      }
    });
     flipped;
  }
  
  () {
     . ===  
      ? { : , :  }
      : { : , :  };
  }
}

Best Practices

1. Externalize all user-facing strings from the beginning
2. Use locale-aware formatting libraries (Intl API, i18next, react-intl)
3. Design for text expansion (languages can be 300% longer)
4. Test with pseudo-localization before real translations
5. Support RTL languages from the start, not as an afterthought
6. Store translations in structured files (JSON, YAML, XLIFF)
7. Use ICU MessageFormat for complex pluralization and gender
8. Consider date, time, number, and currency formatting per locale
9. Maintain separate translation memories for consistency
10. Involve native speakers in translation review