多语言接口和本地化

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，提前赶走假字母，并确保区域语言的法律正确性。然后，在每个国家/地区和每个用户，产品都会感觉到本地产品-从系数和付款到信件和帮助。