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

Internationalization Introduction at WordCamp Bern

Internationalization Introduction at WordCamp Bern

With great pleasure I talked about the importance of both internationalization and localization at WordCamp Bern 2017 in Switzerland's capital.

I18N and L10N 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

September 09, 2017
Tweet

More Decks by Pascal Birchler

Other Decks in Technology

Transcript

  1. Internationalization
    and
    Localization
    WordCamp Bern 2017

    View Slide

  2. Pascal Birchler

    @swissspidy

    View Slide

  3. View Slide

  4. beat around the bush

    View Slide

  5. um den heissen Brei
    herumreden

    View Slide

  6. Why Internationalization?

    View Slide

  7. 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 Slide

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

    View Slide

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

    View Slide

  10. Locales

    View Slide

  11. Locale ≠ Language

    View Slide

  12. Flag ≠ Language

    View Slide

  13. View Slide

  14. flagsarenotlanguages.com

    View Slide

  15. Dates

    View Slide

  16. View Slide

  17. 12/05/2017

    View Slide

  18. View Slide

  19. View Slide

  20. Numbers

    View Slide

  21. 123 456.99
    123,456.99
    123’456.99
    123.456,99

    View Slide

  22. Right to Left
    Icons
    Symbols
    Puns
    Timezones
    Legal Currencies
    Numbers
    Formal/Informal
    Support
    Units

    View Slide

  23. Dealing with Locales

    View Slide

  24. Locale Detection

    View Slide

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

    View Slide

  26. View Slide

  27. Internationalization
    in User Interfaces

    View Slide

  28. Symbols
    ✅ ⭕

    View Slide

  29. Personal Names

    View Slide

  30. David Lloyd George

    View Slide

  31. Lang
    Leyen
    Little
    Lovett
    von der

    View Slide

  32. Implications for
    Field Design

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. Fonts

    View Slide

  38. View Slide

  39. Left-to-Right
    Right-to-Left

    View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. Internationalization
    in Development

    View Slide

  44. View Slide

  45. String Extraction

    View Slide

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

    View Slide

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

    View Slide

  48. Plural Forms

    View Slide

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

    View Slide

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

    View Slide

  51. 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 Slide

  52. Context

    View Slide

  53. _x('Update', 'verb' )
    _x('Update', 'noun' )

    View Slide

  54. Resources

    View Slide

  55. developer.wordpress.org

    View Slide

  56. Localization Management

    View Slide

  57. w3.org/internationalization

    View Slide

  58. cldr.unicode.org

    View Slide

  59. Conclusion

    View Slide

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

    View Slide

  61. Further Reading

    View Slide

  62. Thank You.

    View Slide