INTL

Design software works in various languages and regions.

Internationalization (I18N) is the process of designing a software, so it works in various languages and regions without engineering changes. Localization (L10N) is the cultural and linguistic adaptation of an internationalized software to 2+ culturally different markets. Read more.

  • Our users transcend geography, culture, and language
  • A user could be multilingual live in anywhere
  • Find strings not externalized
  • Externalize strings for machines to know it can be translated
  • Localize strings in the codebase to reach wider audience of our software
  • Localize (iOS/Android) App, Product Name
  • Localize images (See Stripe Japan v.s. Stripe)
  • Localize location of users (See how the center of map changes on Stripe's global page)
  • Localize contents and experience in videos
  • Translate everything does not mean great experience
  • Understanding encoding to deal with files of different encoding
  • A word in other languages is not just one byte
    Bonus post: UTF-8, UTF-16?
  • A language could be different: Belgain French, Canadian French, French French Language Localizations
    • es <- es-419 <- es-US (fallback language for users)
    • en <- en-GB <- en-IN
    • Some spellings maybe different in different languages
  • Word could have genders
  • The grammar sentence structure in English doesn't apply to other languages
  • Plural forms could be very different
  • Create and improve onboarding experiences to help users get what they want faster
  • Uphold all regulatory, risk, and compliance requirements in the market
  • Chinese, Korean, Japanese shares CJK characters: CJK Unified Ideographs
  • Sort may not work as you think: %w(a z ä).sort => ["a", "z", "ä"]
  • Timezones and UTC is enough for everyone
  • Japanese street has no names
  • Don't set a language based on location, should set on their preferences
  • Currency Display (Check Google Flight and tweaks language, country, preferred currency)
  • Names PersonNameComponentsFormatter
    • Many cultures have no surnames
    • Full Name could be more than first and last name
  • European language has ligature composed of multiple words: æ
  • Multiple words could represent single word: SS for ß, oo for ꝏ
  • Your intuition order of words is not the same as computing orders
  • Start date in the week is different
  • Chinese information density is 2x-8x than English
  • Understand CLDR and ICU
  • Tools for I18N conformance at code submission or build time
  • Number, dimension
  • [MeasurementFormatter][mf]
  • Date (ISO8601)
  • Language Identifiers (locale)
  • Numeronym
  • Flexible UI for taller & wider languages
    • Consider length difference and directionality when design a layout
    • Consider script height
      • Leave interline spaces for tall typefaces: Telugu, vietnamese, thai, arabic, hindi
  • Pseudolanguages at Shopify, Netflix
    • Double Length Pseudolanguage (German, Finnish, Russian)
    • Right-to-Left Pseudolanguage (Arabic, Hebrew)
    • Accented (See Diacritic)
    • Bounded [# #]
    • Right-to-Left Pseudolanguage with Right-to-Left Strings
  • Understanding Script families & Bi-directioal text
    • LTR: Latin, Cyrillic, greek, han, japanese kana, hangul, thai, devanagari
    • RTL: Arabic, Hebrew
  • Typefaces
    • Get a commissioned font to support all you need
    • Use Font Book on macOS to figure out if a font is supported in certain script
  • Font Styles may not exist in other languages
    • e.g., italicize not exists in Chinese, emphasis maybe better
    • emphasis may not work* in certain languages, use color to distinguish
    • emphasis resulted in Dotted circle in hindi = very wrong
  • INTL as you are building it, come back and INTLize all = a lot of work
  • iOS onboarding choose language then country/region
  • Iconography: Avoid words and numbers in icons

When translate, don't lost in translation.


Any mistake? Send me a Pull Request <3

Share this post