## layout issues - When your users are in `Arabic`, the document will be displayed from right to left. So you need to adjust the layout of the document. ```css html { direction: rtl; } ``` If you use a position absolute property, let element on the left, then when you change the direction of the document, the element still stays on the left. You need to adjust the position of the element to the right. ```css /* before, direction: ltr */ .element { position: absolute; left: 0; } /* after, direction: rtl */ .element { position: absolute; right: 0; } ``` - different language has different character length, so you need to adjust the width and height of the element. ```javascript const en = "What's the weather like today?" const zh = "今天天气怎么样？" const ar = "ما هو الطقس اليوم ؟" const ja = "今日の天気はどうですか？" const ko = "오늘 날씨는 어때요?" const es = "¿Qué tiempo hace hoy?" const fr = "Quel temps fait-il aujourd'hui?" const de = "Wie ist das Wetter heute?" const it = "Che tempo fa oggi?" const pt = "Qual a temperatura hoje?" const nl = "Wat is de weer vandaag?" const pl = "Jakie jest pogoda dzisiaj?" const ro = "Ce vreme este azi?" const tr = "Bugün hava nasıl?" const vi = "Hôm nay thời tiết thế nào?" ``` - different countries have different price format For example, in Brazil (pt-BR), prices use commas as decimal separators instead of periods/points: ``` // US/UK format $10.50 (using decimal point) // Brazil format R$ 10,50 (using comma as decimal separator) ``` - show discount If you want to show a promotional price, for example "35% off" in English is "6.5折" in Chinese. ```javascript discount: t("{percent} off", { percent: 35, num: (100 - 35) / 10, // 6.5 }), ``` Then add it to the corresponding translation files: ``` // en.json "{percent} off": "{percent} off" // zh_CN.json "{percent} off": "{num} 折" ``` - sort If you want to sort an array that includes en/zh/ja and so on, you should not use Array.sort, it just sort by UTF-16 code unit. Then it will be out of order. For example: ``` ["Apple", "Google", "facebook", "阿里", "腾讯", "字节", "ソニー", "トヨタ", "任天堂"].sort() // ["Apple", "Google", "facebook", "ソニー", "トヨタ", "任天堂", "字節", "腾讯", "阿里"] ``` So you need to use `localeCompare`: ``` function createStringSorter({ caseInsensitive = true, order = ["en", "zh", "ja"] } = {}) { const collator = new Intl.Collator("zh", { sensitivity: caseInsensitive ? "base" : "variant", }); const getGroup = (str) => { if (/^[\u3040-\u309f\u30a0-\u30ff]/.test(str)) return "ja"; if (/^[\u4e00-\u9fff]/.test(str)) return "zh"; return "en"; }; return (a, b) => { const groupA = getGroup(a); const groupB = getGroup(b); if (groupA !== groupB) { return order.indexOf(groupA) - order.indexOf(groupB); } return collator.compare(a, b); }; } const items = ["Apple", "Google", "facebook", "阿里", "腾讯", "字节", "ソニー", "トヨタ", "任天堂"]; // default: en → zh → ja items.sort(createStringSorter()); // ["Apple", "facebook", "Google", "阿里", "任天堂", "腾讯", "字节", "ソニー", "トヨタ"] // ja → zh → en items.sort(createStringSorter({ order: ["ja", "zh", "en"] })); ``` ## text transformation Different languages have different text transformation rules. For example, in Turkish, the uppercase of `i` is `İ` (with a dot), not `I`. ``` "i".toUpperCase() // "I" ✗ "i".toLocaleUpperCase("tr") // "İ" ✓ ``` So when you need to transform text case, use toLocaleUpperCase / toLocaleLowerCase with the correct locale: ``` ``` Note: toLocaleUpperCase requires a BCP 47 language tag (e.g., zh-CN), but i18next uses underscores (e.g., zh_CN). Passing the wrong format will crash the page: ``` "beta".toLocaleUpperCase("zh_CN") // ❌ RangeError: Incorrect locale information provided "beta".toLocaleUpperCase("zh_TW") // ❌ RangeError: Incorrect locale information provided "beta".toLocaleUpperCase("zh-CN") // ✅ "BETA" "beta".toLocaleUpperCase("zh-TW") // ✅ "BETA" ``` Always convert the locale format before passing it: i18n.language.replace("\_", "-") Or: ``` i18next.init({ lng: "zh-CN", supportedLngs: ["en", "zh-CN", "zh-TW", "ja", "ko", "tr"], }); ``` ## plural rules Different languages have different plural rules. For example: - English has two forms: singular (1 minute) and plural (2 minutes) - Chinese has only one form: 1 分钟, 2 分钟 - Russian has three forms: 1 минута, 2 минуты, 5 минут - Arabic has six forms: 0 دقيقة, 1 دقيقة, 2 دقيقة, 3-10 دقائق, 11-99 دقيقة, 100+ دقيقة You can use libraries like `i18next` to handle plural rules: ```javascript // English i18next.t("key", { count: 1 }) // "1 minute" i18next.t("key", { count: 2 }) // "2 minutes" // Chinese i18next.t("key", { count: 1 }) // "1分钟" i18next.t("key", { count: 2 }) // "2分钟" // Russian i18next.t("key", { count: 1 }) // "1 минута" i18next.t("key", { count: 2 }) // "2 минуты" i18next.t("key", { count: 5 }) // "5 минут" ``` The `key` in i18next is a unique identifier for your translation strings. It's like a variable name that maps to different translations in different languages. Here's how it works: ```javascript // translation files // en.json { "time.minutes": { "one": "{{count}} minute", "other": "{{count}} minutes" } } // zh.json { "time.minutes": "{{count}}分钟" } // Usage i18next.t('time.minutes', { count: 1 }); // "1 minute" in English, "1分钟" in Chinese i18next.t('time.minutes', { count: 2 }); // "2 minutes" in English, "2分钟" in Chinese ``` The key can be: - A simple string: `"welcome"` - A nested path: `"common.buttons.submit"` - A key with plural forms: `"time.minutes"` The plural forms like `one` and `other` are special keys that i18next uses to handle different plural rules: - `one`: Used for singular form (when count is 1) - `other`: Used for plural form (when count is 0 or > 1) Some languages have more plural forms. For example, in Russian: ```javascript // ru.json { "time.minutes": { "one": "{{count}} минута", // 1 "few": "{{count}} минуты", // 2-4 "many": "{{count}} минут", // 5-20 "other": "{{count}} минуты" // 21, 22, 25-30, etc. } } ``` The plural rules are based on the [CLDR (Common Locale Data Repository)](https://cldr.unicode.org/) specification, which defines plural rules for different languages. i18next automatically selects the correct form based on the count and the current language's rules. If your translation files don't support nested structure, you have a simple solution: ``` minute > 1 ? t("{num} minutes) : t("{num} minute) ``` But this approach has several problems: 1. It doesn't work for languages with more than two plural forms (like Russian, Arabic, etc.) 2. It doesn't handle zero correctly in many languages 3. It's not maintainable - you need to write this logic everywhere you need plural forms 4. It doesn't follow the CLDR standards, which means your translations might be incorrect 5. It makes it harder for translators to work with your translation files For example, in Russian: ```javascript // Wrong approach minute > 1 ? t("{num} минут") : t("{num} минута") // This would be wrong for: // 2-4 minutes (should be "минуты") // 5-20 minutes (should be "минут") // 21, 22, 25-30 minutes (should be "минуты") ``` That's why it's better to use i18next's built-in plural handling: ## policy issues - Don't show strikethrough price in Turkey for legal reasons Due to the Turkish government's regulations, we cannot display the strikethrough price on the product page. For example, if you have a product with a original price of 100 TL and a discounted price of 80 TL, you cannot display it as 100 TL → 80 TL. You need to display it as 80 TL. ```html 80 ~~100 ₺~~ ```