Page Comparison

...

• 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 like (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

...