Upgrade to Pro — share decks privately, control downloads, hide ads and more …

On Internationalization and Localization

On Internationalization and Localization

At the inaugural WordCamp DC I talked about the importance of both internationalization and localization.

They have a massive impact on user acceptance and usability. I highlight existing tools, interfaces, and best practices to get internationalization right in the UIs we create and the code we write.

Learn how not to get into the White House, why English ≠ English, and why you should not use flags for language switchers.

Pascal Birchler

July 14, 2017
Tweet

More Decks by Pascal Birchler

Other Decks in Technology

Transcript

  1. Internationalization
    and
    Localization

    View full-size slide

  2. Pascal Birchler

    @swissspidy

    View full-size slide

  3. "beat around the bush"

    View full-size slide

  4. "talk around the hot
    mash"

    View full-size slide

  5. Why Internationalization?

    View full-size slide

  6. The process of creating a product in such
    a way that it can be easily adapted
    to specific local languages and cultures
    Internationalization (I18N)

    View full-size slide

  7. The process of adapting a product or
    service to a particular language,
    culture, and desired local “look-and-feel.”
    Localization (L10N)

    View full-size slide

  8. “Localization is like translation
    but with a cultural twist”
    Localization

    View full-size slide

  9. Locale ≠ Language

    View full-size slide

  10. Flag ≠ Language

    View full-size slide

  11. flagsarenotlanguages.com

    View full-size slide

  12. 123 456.99
    123,456.99
    123’456.99
    123.456,99

    View full-size slide

  13. Right to Left Icons
    Symbols
    Puns
    Jokes
    Legal
    Currencies
    Numbers
    Formal/Informal
    Support
    Units

    View full-size slide

  14. Dealing with Locales

    View full-size slide

  15. Locale Detection

    View full-size slide

  16. Accept-Language: es, en-gb;q=0.8, en;q=0.7

    View full-size slide

  17. Internationalization
    in User Interfaces

    View full-size slide

  18. Symbols
    ✅ ⭕

    View full-size slide

  19. Personal Names

    View full-size slide

  20. David Lloyd George

    View full-size slide

  21. Lang
    Leyen
    Little
    Lovett
    von der

    View full-size slide

  22. Implications for
    Field Design

    View full-size slide

  23. Left-to-Right
    Right-to-Left

    View full-size slide

  24. Internationalization
    in Development

    View full-size slide

  25. String Extraction

    View full-size slide

  26. function translateIt( $str ) {
    // Do something.
    }
    __( 'Foo' ); // ✓
    translateIt( 'Bar' ); // ☓
    __( 'Baz' ); // ✓

    View full-size slide

  27. $foo = 'Hello World';
    __( $foo ); // ☓

    View full-size slide

  28. Plural Forms

    View full-size slide

  29. if ( $num == 1 )
    printf( __( '%d item' ), $num )
    else
    printf( __( '%d items' ), $num )

    View full-size slide

  30. printf(
    _n(
    '%d item',
    '%d items',
    $num
    ),
    $num
    )

    View full-size slide

  31. printf(_n('%d item', '%d items', 1), 1)
    printf(_n('%d item', '%d items', 2), 2)
    printf(_n('%d item', '%d items', 5), 5)

    View full-size slide

  32. developer.wordpress.org

    View full-size slide

  33. Localization Management

    View full-size slide

  34. w3.org/internationalization

    View full-size slide

  35. cldr.unicode.org

    View full-size slide

  36. To Sum Things Up

    View full-size slide

  37. 1. Don’t make assumptions
    2. Understand cultural values
    3. i18n from the beginning
    4. Don’t reinvent the wheel

    View full-size slide

  38. Further Reading

    View full-size slide