Internationalization

Internationalization 多語系跨不同程式語言套件

UI Design Guide for Multilingual Support

Layout Planning Principles

• Reserve sufficient space to accommodate potential text length variations across different languages
• Design with the longest text language as a baseline to ensure all translations display properly
• Provide contextual screenshots or context to the translation team to help them understand the actual application scenarios of features

Locale issue

• Account for locale-specific currency format differences (symbol position, decimal separators, grouping)
• Design for variable time format patterns (12/24 hour, different date orders like MM/DD/YYYY vs DD/MM/YYYY)
• Implement locale-aware formatting for numbers, currencies, dates, and times rather than hardcoding formats
• Test the interface with various locale settings to verify proper display of currency symbols and time representations
• Consider right-to-left (RTL) layout adjustments for locales that require it, which may affect how currencies are displayed

Scripts

• i18n-js - npm "A small library to provide the i18n translations on the JavaScript."
• Introduction - i18next documentation "i18next is an internationalization-framework written in and for JavaScript"

CSS

• Defensive CSS
• unicode-range - CSS: Cascading Style Sheets | MDN
  • Purpose: On a website that includes both Mandarin and English characters, the Mandarin section uses the AAA font, while the English section opts for the BBB font.

Further readings

• Design for internationalization. Build better products for people around… | by John Saito | Dropbox Design | Medium