多語言接口和本地化

1）原則

1.語言不是皮膚。文本，格式，寫作方向，插圖，法律塊甚至導航都發生了變化。
2.首先是鑰匙，然後是文字。構造語義鍵和參數-稍後會進行翻譯。
3.偽定位-在退出之前。捕捉溢出，「硬縫」字符串和隱藏的英語主義。
4.Folbacks是可預測的。「ru-UA → ru → en」。沒有「安靜」的失敗。
5.安全。沒有HTML從翻譯到DOM而無需消毒；播放器僅定位/命名。
6.A11 y等效。Alt文本，aria標簽，縮寫-一切都是本地化的。

2）區域策略

系統代碼：「language-REGION」（例如「pt-BR」，「en-GB」）。
選擇位置：用戶配置文件→設置；備用-通過瀏覽器/地理（確認）自動細節。
多區域：將語言與法律區分開：'es-ES' ≠ 'es-MX'（不同的法律/付款/限制）。
Folback鏈：UI是最近的語言；法律文本-嚴格的區域版本，否則塊和確認請求。

3）信息架構和內容

關鍵領域：導航、CTA、錯誤、表格、提示、通知、信件、PDF/橫幅。
文本擴展：寬度儲備+30-40％（德國/芬蘭）。Layout是一種彈性（flex/grid）。
語氣/風格：品牌字典（在關鍵位置沒有「語翻譯」的術語）。
圖像/圖標：避免圖片中的文字；如果需要-存儲本地版本。

4）體系結構i18n

鑰匙： "域。section.intent` → `payments.withdraw.error.insufficient_funds`.

播放器：命名（"{amount}，"{minutes}"），格式化為行外。
ICU MessageFormat：復數，屬，匹配。
文件：沿著位置和域（'/i18n/{locale}/{domain} .json'），輪廓是懶惰的。
服務器/客戶端：通用渲染，Cookie+HTTP-Vary中的本地化。

json
{
"betslip": {
"placed": "Ставка на сумму {amount} {currency} принята",
"timeout": "Ожидаем подтверждение… ~{seconds, plural, one {# сек} few {# сек} many {# сек} other {# сек}}"
}
}

5）格式： 數字、日期、貨幣、單位

js const nf = new Intl.NumberFormat('uk-UA', { style:'currency', currency:'UAH' });
nf.format(2000); // 2 000,00 ₴

const df = new Intl.DateTimeFormat('tr-TR', { dateStyle:'medium', timeStyle:'short' });
df.format(new Date());

const pl = new Intl.PluralRules('ru-RU');

次要單位：以美分/一分錢儲存金額；在客戶端上格式化。

相對時間： 'Intl。RelativeTimeFormat`.

單位： 'Intl。NumberFormat({ style:'unit', unit:'meter' })`.

日歷/周：一周的第一天和日期格式-按地區。

6）RTL和寫作方向

支持'dir='rtl'代表'ar'，'he'，'fa'；對於用戶生成的內容使用'dir='auto'。
反轉圖標/雪佛龍；旋轉木馬和步進鏡。
貨幣數字/符號-LTR窗口（避免混合BiDi混亂）。
CSS邏輯屬性（「inline-start/end」）代替left/right。

7）表格和輸入

名稱/地址：允許撇號/變音符號/雙重姓氏。
電話：E.164存儲；口罩-柔軟,支持插入。
地址格式：按國家劃分的字段順序；索引/州可能不存在。
鍵盤：「inputmode」，「autocomplete」適合本地。
播放器：本地語言/格式的示例。

8）偽定位和測試

自動將行替換為'【 Ĥěļļő 】'+延伸'++'（~ 35%）。
在dev裝配中以「qps-ploc」的形式啟用偽纖維。
譯者上下文截圖：播放器和長文本突出顯示。
測試：修剪、攜帶、溢出、「硬縫」字符串、RTL。

9）通知、信件、模板

字母和主題模板適用於每個區域；將文字和文字分開。
主題中的日期/總和-按位置格式化。
「設置通知」鏈接-始終使用寫作語言。
短信：簡短，沒有多行引號；UTM-無本地化。

10）安全性和可靠性

切勿將翻譯解釋為HTML,請使用安全插入。
播放器只是數據，不是標記。
Logi/度量標準是無限制的，但具有用於跟蹤問題的位置。
當翻譯文件不可用時，後退是「安靜」（顯示英語+遙測）。

11）生產力

Кеш CDN с `ETag`/`Cache-Control`.

沿路線/域的班次；常見的預裝載。
更改位置時避免重新渲染-帶模因的i18n上下文。

12） iGaming的細節

打折和負責任的遊戲：語言取決於國家（18+/21+，監管機構，援助線）。
KYC/AML：法律上正確的術語（例如「資金來源」，「受益所有者」），案例/分娩選項。
支付方法：名稱是本地的（PIX，Papara，SEPA）和條款（ETA/傭金）-嚴格按地區劃分。
系數和格式：「decimal/fractional/american」是本地解釋和示例。
法律文本：不變的區域版本；禁止對其他司法管轄區進行反擊。

13）設計系統令牌（示例）

json
{
"i18n": {
"fallback": ["en"],
"rtl": ["ar", "he", "fa"],
"textExpansionPct": 0.35,
"screenshotHints": true
},
"typography": {
"lineHeight": { "ui": 1.4, "dense": 1.3 },
"hyphens": "auto",
"tabularNums": true
},
"layout": {
"minLabelWidth": 96,
"gap": { "sm": 8, "md": 12, "lg": 16 }
},
"a11y": {
"ariaMirroring": true,
"altTranslate": true,
"contrastAA": true
}
}

14）Snippets

ts import i18n from 'i18next';
import ICU from 'i18next-icu';
import { initReactI18next } from 'react-i18next';

i18n.use(ICU).use(initReactI18next).init({
lng: 'uk-UA',
fallbackLng: ['ru', 'en'],
load: 'languageOnly',
interpolation: { escapeValue: false },
resources: {} // пусто — грузим лениво
});

export async function loadNamespace(ns: string, lng = i18n.language){
const mod = await import(`/i18n/${lng}/${ns}.json`);
i18n.addResourceBundle(lng, ns, mod.default, true, true);
}

json
{
"notifications": "{count, plural, one {# уведомление} few {# уведомления} many {# уведомлений} other {# уведомления}}"
}

js const money = (v, c, l) => new Intl.NumberFormat(l, {style:'currency', currency:c}).format(v/100);
const rel = (v, unit, l) => new Intl.RelativeTimeFormat(l, {numeric:'auto'}).format(v, unit);
// money(250000,'EUR','de-DE') → 2.500,00 €

js const rtl = new Set(['ar','he','fa']);
document.documentElement.dir = rtl.has(locale.split('-')[0])? 'rtl': 'ltr';

js const pseudo = s => s.replace(/[aAeEiIoOuU]/g, m => ({a:'à',e:'ê',i:'ï',o:'ô',u:'û'}[m.toLowerCase()]        m)).replace(/([^\s])/g,'$1\u0301');

15）空白/錯誤/格雷斯菲降解

沒有密鑰翻譯：我們顯示英語+我們編寫「missing_key」。
沒有本地文件：後退和標語「界面的一部分在英語中」。

文本太長： 多字符串,「線條」在位置,tooltip與完整的文本.

16）度量與質量控制

按密鑰/本地劃分的覆蓋率（目標≥ 98%）。
用於新版本的時間到翻譯（TTT）。
Bug rate L10n：視覺修剪、RTL缺陷、格式錯誤。
Reading ease（主觀調查）和NPS per locale。
按地區進行法律驗證（合並表）。

17）反模式

代碼中的行串聯（「你贏了」+amount+「!」）-打破語法。
圖像/圖標中的文本沒有本地版本。
剛性寬度為英語。
用語言取代該國的法律（在墨西哥使用「es-ES」）。
通過HTML從CMS進行翻譯而無需消毒。
在不同的位置具有不同含義的相同鍵。

18） QA支票清單

字符串和密鑰

• 命名播放器；沒有串聯。
• ICU pluralization/屬在需要時。
• Folback連鎖店正在運作。

Layout和可用性

• 寬度儲備+30-40%； 「line-clamp」,單詞轉移。
• Alt/aria標簽是本地化的。
• RTL鏡像圖標/導航；數字是可讀的。

格式

• 日期/貨幣通過「Intl.」；小單位的金額。
• 地址/電話/名稱-靈活的國家規則。

安全/表演

• 翻譯不執行HTML；XSS已排除。
• 懶惰的Chanks，CDN的kesh，沒有額外的再渲染。

iGaming特點

• Diskleimer/18+/援助熱線-按管轄範圍。
• KYC/AML文本經過法律驗證。
• 付款名稱/ETA/傭金是本地名稱。

19）設計系統中的文檔

Разделы: i18n Tokens, Guides (ICU/Plural/RTL), Patterns (Emails/SMS/Toasts), Legal Strings per Region.

工具：偽纖維、屏幕截圖、覆蓋報告、鑰匙linter。
過程：詞匯表，翻譯記憶，上下文截圖，母語人士的評論。

簡短的摘要

多語言UI是體系結構，設計，內容和法律級別的系統工作。組織鑰匙和後衛，使用ICU和「Intl」，支持RTL，提前趕走假字母，並確保區域語言的法律正確性。然後，在每個國家/地區和每個用戶，產品都會感覺到本地產品-從系數和付款到信件和幫助。