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

Internationalization Done Right

Internationalization Done Right

In this presentation I introduce the concept of internationalization, localization, and their benefits. By highlighting how culture influences the user’s behaviour, I explain why we need to do more than just “making things translatable”.

I18N has a massive impact on user acceptance and usability. I show existing tools, interfaces, and best practices to get internationalization and localization right in the UIs we create and the code we write.

Pascal Birchler

May 13, 2017
Tweet

More Decks by Pascal Birchler

Other Decks in Programming

Transcript

  1. Internationalization
    Done Right

    View Slide

  2. Pascal Birchler

    @swissspidy

    View Slide

  3. Why Internationalization?

    View Slide

  4. View Slide

  5. Why Internationalization?

    View 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

    View Slide

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

    View Slide

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

    View Slide

  9. I18N L10N

    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. DD/MM/YYYY
    MM/DD/YYYY
    YYYY-MM-DD

    View Slide

  17. View Slide

  18. 12/05/2017

    View Slide

  19. View Slide

  20. View Slide

  21. Numbers

    View Slide

  22. 123 456.99
    123,456.99
    123’456.99
    123.456,99

    View Slide

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

    View Slide

  24. Dealing with Locales

    View Slide

  25. Locale Detection

    View Slide

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

    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. Agüero
    Alcázar
    Almarez
    Ancheta
    del

    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. String Concatenation

    View Slide

  49. echo $num . ' ' . __( 'items' )

    View Slide

  50. Plural Forms

    View Slide

  51. printf( __( '%d items' ), $num )

    View Slide

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

    View Slide

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

    View Slide

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

  55. Context

    View Slide

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

    View Slide

  57. Dates & Units

    View Slide

  58. Resources

    View Slide

  59. Documentation

    View Slide

  60. Localization Management

    View Slide

  61. w3.org/internationalization

    View Slide

  62. cldr.unicode.org

    View Slide

  63. developer.wordpress.org

    View Slide

  64. To Sum Things Up

    View Slide

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

    View Slide

  66. One Last Thing…

    View Slide

  67. WordCamp Bern, Switzerland
    September 9, 2017

    View Slide

  68. ¡Gracias!
    Eskerrik asko!

    View Slide