Editing 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
* [https://www.npmjs.com/package/i18n-js i18n-js - npm] "A small library to provide the i18n translations on the JavaScript."
* [https://www.i18next.com/ Introduction - i18next documentation] "i18next is an internationalization-framework written in and for JavaScript"

CSS
* [https://defensivecss.dev/ Defensive CSS]
* [https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range 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
* [https://medium.com/dropbox-design/design-for-internationalization-24c12ea6b38f Design for internationalization. Build better products for people around… | by John Saito | Dropbox Design | Medium]


[[Category: Translation]] [[Category: Web Dev]] [[Category: Design]]