¡Ay, caramba! Multilingual websites

¡Ay, caramba! Multilingual websites

Even though it’s a part of the name, sometimes we forget that the Web IS world wide. It is a platform enjoyed by millions of people of different languages. This presentation reviews some of the “¡Ay, caramba!” moments we might face when designing a multilingual site.

http://miguel-perez.com/talks/ay-caramba-multilingual-websites/

03dc95d767005ef76222a5de975d54c6?s=128

Miguel Ángel Pérez

June 17, 2014
Tweet

Transcript

  1. Multilingual Websites Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba!

  2. None
  3. None
  4. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    Avoid Character Espaces
  5. ‣ Escape syntax characters" ‣ Escape invisible characters" ‣ For

    everything else, there’s UTF-8 encode Properly to avoid escapes <meta charset=‘UTF-8’> Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites
  6. None
  7. ‣ Detect your user’s language setting for a good default"

    ‣ Have a way for the user to change their settings" ‣ List language names in their own language" ‣ Don’t lose the user’s position on the site Set the language of your document <html dir=‘rtl’ lang=‘ar’> Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites
  8. None
  9. None
  10. styling a specific language Miguel A. Perez Front-end/Ux at Weblinc

    ¡Ay, caramba! Multilingual Websites [lang=en] { // IE 7+! ! line-height: 1.5em! }! html:lang(ar) { // IE 8+, HTTP headers! ! font-family: sans-serif;! } Choose your font-stack carefully since it will provide a feedback for missing glyphs.
  11. None
  12. None
  13. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    Consider imagery very carefully
  14. Using images as text makes translation difficult Miguel A. Perez

    Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites
  15. Non-repeatable Backgrounds will break Miguel A. Perez Front-end/Ux at Weblinc

    ¡Ay, caramba! Multilingual Websites
  16. None
  17. Visual metaphors don’t always translate This check symbol means 'correct'

    or 'ok' in many countries. In some countries, however, such as Japan, it can indicate 'incorrect'. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites
  18. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    Language Agnostic GUI
  19. None
  20. None
  21. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    furigana
  22. None
  23. ruby markup <p lang=‘ja’>! ! <ruby>! ! ! <rb>౦</rb> <!—

    Ruby Base —>! ! ! <rt>ͱ͏</rt> <!— Ruby Text —>! ! ! <rb>ژ</rb> ! ! ! <rt>͖ΐ͏</rt>! ! </ruby>! </p> Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites
  24. None
  25. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    Embrace the wrap
  26. Number of Characters Additional Physical Space Required Up to 10

    100% to 200% 11 to 20 80% to 100% 21 to 30 60% to 80% 31 to 50 40% to 60% 51 to 70 31% to 40% Over 70 30% Text strings will vary in size Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites
  27. None
  28. Bad ways to solve this problem... Miguel A. Perez Front-end/Ux

    at Weblinc ¡Ay, caramba! Multilingual Websites .class {! ! word-wrap: break-word;! }! .class {! ! overflow: hidden;! } These may solve the visual problem of longer strings but render the text unreadable.
  29. ‣ Word Break Opportunity marks a position within text where

    the browser may break a line." ‣ Soft Hyphen is an invisible character that suggest where the browser may break the line and add a hyphen. <wbr> and &shy; Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites Alright ways to solve this...
  30. The holy grail of hyphens Miguel A. Perez Front-end/Ux at

    Weblinc ¡Ay, caramba! Multilingual Websites .class {! ! -webkit-hyphens: auto;! ! -moz-hyphens: auto;! ! -ms-hyphens: auto;! ! hyphens: auto;! } Modernizer test available for feature detection that could be used alongside a polyfill.
  31. None
  32. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    Validate your work
  33. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    Pseudolocalizations Instead of translating the text of the software into a foreign language the textual elements are replaced with an altered version of the original language. Normal Text Pseudolocalization Account Settings [== Àççôûñţ Šéţţîñĝš ==]
  34. None
  35. None
  36. None
  37. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    Respond to language
  38. Thanks ¡Ay, caramba! @tayokoart & @Weblinc