15,028
edits
No edit summary Tags: Mobile edit Mobile web edit |
(+ [https://defensivecss.dev/ Defensive CSS]) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
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 | Scripts | ||
| Line 6: | Line 21: | ||
CSS | 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] | * [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. | ** 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]] | [[Category: Translation]] [[Category: Web Dev]] [[Category: Design]] | ||