Description

Presenters: Alan and Sepideh

A conversation about the intersection of inclusive design and multilingual support, covering topics like localization, translation and designing components and interfaces that can adapt to different scripts and text directions.

Multilingual UIO demo

Agenda

Notes

• Localization

  • Translation
    
    • Static strings vs. templates
    • variances between languages such as gender structures, meaning of words (e.g. "you" in English can mean a single person or group of people, in other languages this may not be true and may have different forms for formal and informal use), formal/informal usage, and etc.
      • May require the context for a proper translation
    • Interpretation may be better than straight translation
  • Encoding, especially of non-Latin character sets
    • Better these days because of unicode support, but not perfect. May need to use entity codes directly.
  • Text direction
    • left-to-right, right-to-left, top-to-bottom
    • changing the text direction may have implications on the design.

• Challenges and complexities

  • Mixing Languages
    • "dir" and "lang" are global attributes - they can be used on any markup
    • For example using English names within Farsi text
      • It may work in one system, but copy and pasting elsewhere may break the formatting
    • Even open/close of parentheses are opposite between left-to-right and right-to-left languages.
    • Adding numbers into right-to-left text.
    • It tends to be easier to write mixed languages by hand than in most computer systems.
  • Level of support in systems for all language features (example - half space in Farsi)
  • Historically, the Old English letter Thorn had issues with typography: https://en.wikipedia.org/wiki/Thorn_(letter)

• Design considerations

  • Average word length differs between languages
    
    • French:  about 150% larger.
  • Designs should be amenable to reversal for RTL reading
    • Some items shouldn't change direction (e.g. media controls - which follow a construct from a physical device )
  • Translation of icons and characters used graphically.

• Implementation considerations

  • Direction-specific CSS selectors
    • Example: https://github.com/waharnum/uio-multilingual/blob/master/demos/src/css/PrefsEditor-RTL.css#L5
  • Language-specific CSS selectors
    • Example: https://github.com/waharnum/uio-multilingual/blob/master/demos/src/css/PrefsEditor-LanguageSpecific.css#L2
  • String externalization
    • Example: https://github.com/waharnum/uio-multilingual/tree/master/demos/src/messages
  • RTL style sheets and CSS
    • Some styles will "parallel" when reversing, but others (such as margin / padding) will not
      • Automated approaches to doing this reversal include:
        • https://github.com/twitter/css-flip
        • https://github.com/MohammadYounes/rtlcss

Links

• UIO Multilingual Experiment: https://github.com/waharnum/uio-multilingual
• "Building RTL-Aware Web Apps & Websites"
  • Part 1: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1/
  • Part 2: https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2/
• "Falsehoods Programmers Believe About Language": http://garbled.benhamill.com/2017/04/18/falsehoods-programmers-believe-about-language/