Көп тилдүү интерфейстер жана локализация

1) Принциптер

1. Тил - тери эмес. Тексттер, форматтар, каттын багыты, иллюстрациялар, юридикалык блоктор жана ал тургай навигация өзгөрөт.
2. Биринчи ачкычтар, андан кийин тексттер. Семантикалык ачкычтарды жана параметрлерди түзүңүз - которуулар кийинчерээк келет.
3. Псевдолокализация - чыкканга чейин. Толуп, "катуу тигилген" саптарды жана жашыруун англисизмдерди кармаңыз.
4. Фолбэктерди алдын ала айтууга болот. 'ru-UA → ru → en'. Эч кандай "тынч" ийгиликсиз.
5. Коопсуздук. Санитайзерсиз DOM котормосунан HTML жок; pleisholders гана positional/деп аталат.
6. A11y барабар. Alt-тексттер, ария-лейблдер, кыскартуулар - баары локализацияланат.

2) Жергиликтүү стратегиясы

Системалык коддору: 'language-REGION' (мисалы, 'pt-BR', 'en-GB').
Local тандоо: колдонуучу кароо → орнотуу; запастык - браузер/гео боюнча auto-detect (тастыктоо менен).
Көп аймак: тилди укуктан айырмалоо: 'es-ES' ≠ 'es-MX' (ар кандай мыйзамдар/төлөмдөр/лимиттер).
Folback чынжыр: UI - жакын тил; укуктук тексттер - катуу аймактык версия, болбосо блок жана ырастоо өтүнүчү.

3) Маалыматтык архитектура жана мазмун

Негизги багыттар: навигация, CTA, каталар, формалар, кеңештер, билдирүүлөр, каттар, PDF/баннерлер.
Текст кеңейтүү: резерв туурасы + 30-40% (немис/Finnish). Лейаут - ийкемдүү (flex/grid).
Тон/стили: бренд сөздүгү (терминдер, критикалык жерлерде "шилтемени которуу" жок).
Сүрөттөр/иконалар: сүрөттөрдөгү тексттен алыс болуңуз; керек болсо - жергиликтүү версияларды сактаңыз.

4) Архитектура i18n

Ачкычтар: 'домен. section. intent` → `payments. withdraw. error. insufficient_funds`.
Pleysholders: ('{amount}', '{minutes}') деп аталган, саптан тышкары түрдө форматталат.
ICU MessageFormat: көптүк, тукум, макулдашуу.
Files: жергиликтүү жана домендери боюнча ('/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' })`.
Календарь/жума: Жуманын 1-күнү жана дата форматы - жергиликтүү.

6) RTL жана каттын багыты

Колдоо 'dir = "rtl"' үчүн 'ar', 'he', 'fa'; 'dir =' auto 'колдонуучу мазмуну үчүн.
Инвертировать иконалар/chevron 's; айнек карусель жана степпер.
сандар/акча белгилер - LTR терезелер (аралаш BiDi башаламандык качуу).
CSS-логикалык касиеттери ('inline-start/end') ордуна left/right.

7) Формалар жана киргизүү

Аттары/даректери: апострофторго/диакритикага/кош фамилияларга жол бериңиз.
Телефондор: E.164 сактоо; маскалар - жумшак, киргизүү колдоосу менен.
Даректүү форматтар: өлкө боюнча талаалардын тартиби; индекси/штаты жок болушу мүмкүн.
Klaviatura: 'inputmode', 'autocomplete' жергиликтүү үчүн туура.
Playsholders: жергиликтүү тил/формат мисалдар.

8) Псевдолокализация жана тестирлөө

Автоматтык түрдө бир сызыктарды алмаштырат 【 【 ĚĚ ~ 】 '+ узартуу' + + '(35%).
'qps-ploc' деп dev-чогултуу psevdolokal киргизүү.
Котормочулар үчүн контексттеги скриншоттор: плейсхолдерлерди жана узун тексттерди жарыктандыруу.
Сыноо: кыркуу, которуу, толуп, "катуу тигилген" саптар, RTL.

9) Билдирүүлөр, каттар, шаблондор

Кат жана тема үлгүсү - ар бир жергиликтүү үчүн; тексттерди жана макеттерди бөлүшүү.
Тема боюнча даталар/суммалар - жергиликтүү түрдө форматталат.
шилтемелер "Эскертүү орнотуу" - ар дайым кат тилинде.
SMS: кыска, көп саптуу тырмакчалары жок; UTM - локализациясыз.

10) Коопсуздук жана ишенимдүүлүк

Эч качан которууну HTML катары чечмелебеңиз, коопсуз кошумчаларды колдонуңуз.
Playsholders - гана маалыматтар, белгилөө эмес.
Логи/метриктер - жашыруун эмес, бирок жергиликтүү менен Trace көйгөйлөр.
Котормо файлынын жеткиликсиздигинде Folback - "тынч" (англисче + телеметрияны көрсөтүңүз).

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) Сниппеттер

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) бош/каталар/greysful деградация

Эч кандай котормо ачкычы: англис + логин 'missing _ key' көрсөтөт.
Жок жергиликтүү файл: фолбек жана баннер "Англис тилиндеги интерфейстин бир бөлүгү".
Өтө узун текст: көп сап, 'line-clamp' орду боюнча, толук текст менен tooltip.

16) Метрика жана сапатын контролдоо

Coverage% ачкычтар/локалдар боюнча (98% максаттуу ≥).
Time-to-Translate (TTT) жаңы релиздер үчүн.
Bug rate L10n: визуалдык кесүү, RTL кемчиликтери, туура эмес форматтар.
Reading ease (субъективдүү сурамжылоо) жана NPS per locale.
Региондор боюнча юридикалык валидация (комплаенс чеклиси).

17) Антипаттерндер

Коддогу саптардын конкатенациясы ("Сиз" + amount + "!") - грамматиканы бузат.
Жергиликтүү версиялары жок сүрөттөрдө/иконкаларда текст.
Англис үчүн катуу туурасы.
Өлкө укугун тил менен алмаштыруу (Мексика үчүн 'es-ES' колдонуу).
Санитайзерсиз CMSден HTML аркылуу которуу.
Бир эле ачкыч ар кайсы жерде ар кандай мааниде.

18) QA-чек тизмеси

Саптар жана ачкычтар

• Playsholders деп аталган; эч кандай конкатенация жок.
• ICU-pluralization/род керек.
• Folback чынжыр иштейт.

Жарык жана жеткиликтүүлүк

• туурасы + 30-40%; 'line-clamp', сөз которуу.
• Alt/aria-лейблдер локализацияланган.
• RTL күзгү сөлөкөттөрдү/багыттоо; сандар окулат.

Форматтар

• Даталар/валюталары аркылуу 'Intl.'; минор бирдиктеринин суммасы.
• Дареги/тел/аты-жөнү - өлкө боюнча ийкемдүү эрежелер.

Коопсуздук/аткаруу

• Которуулар HTML аткарбайт; XSS алынып салынат.
• Жалкоо Чанки, CDN кэш, эч кандай ашыкча Rerender.

iGaming өзгөчөлүгү

• Disclamers/18 +/жардам линиялары - юрисдикция боюнча.
• KYC/AML тексттер юридикалык жактан текшерилет.
• Төлөм аталыштары/ETA/Комиссиялар - жергиликтүү.

19) Дизайн системасында документтер

Разделы: i18n Tokens, Guides (ICU/Plural/RTL), Patterns (Emails/SMS/Toasts), Legal Strings per Region.
Куралдар: psevdolokal, screenshoter экрандар, отчет coverage, Линтер ачкычтар.
Процесс: глоссарий, Translation Memory, контексттик скриншоттор, тилди алып жүрүүчүнүн ревю.

Кыскача резюме

Көп тилдүү UI - бул архитектура, дизайн, мазмун жана укук деңгээлиндеги системалуу иш. Ачкычтарды жана жазууларды уюштуруп, ICU жана 'Intl' колдонуңуз, RTLди колдоңуз, псевдолокалды алдын ала кууп чыгып, аймактык формулировкалардын укуктук тууралыгын камсыз кылыңыз. Анда продукт ар бир өлкөдө жана ар бир колдонуучу үчүн коэффициенттерден жана төлөмдөрдөн кат жана маалымкатка чейин тууган сезилет.