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.

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