Көп тілді интерфейстер және оқшаулау

1) Қағидаттар

1. Тіл - скин емес. Мәтіндер, пішімдер, хат бағыты, иллюстрациялар, заңды блоктар және тіпті навигация өзгереді.
2. Алдымен кілттер, содан кейін мәтіндер. Мағыналық кілттер мен параметрлерді құрылымдаңыз - аудармалар кейінірек келеді.
3. Псевдолокализация - шығуға дейін. Толып кетулерді, «қатты тігілген» жолдарды және жасырын англицизмдерді ұстаңыз.
4. Фолбэктерді болжауға болады. 'ru-UA → ru → en'. Ешқандай «тыныш» сәтсіздіктер жоқ.
5. Қауіпсіздік. Санитайзерсіз DOM аудармасынан HTML болмайды; тек позициялық/атаулы плейсхолдер.
6. A11y-баламалылығы. Alt-мәтіндер, aria-лейблдер, қысқартулар - барлығы оқшауланады.

2) Жергілікті жерлердің стратегиясы

Жүйелік кодтар: 'language-REGION' (мысалы, 'pt-BR', 'en-GB').
Локальді таңдау: пайдаланушы профилі → баптау; қосалқы - браузер/гео бойынша авто-деталь (растаумен).
Мульти-аймақ: тілді құқықтан ажыратыңыз: 'es-ES' ≠ 'es-MX' (әртүрлі заңдар/төлемдер/лимиттер).
Фолбэк тізбегі: UI - жақын тіл; құқықтық мәтіндер - қатаң өңірлік нұсқа, әйтпесе блок және растау сұранысы.

3) Ақпараттық сәулет және контент

Негізгі салалар: навигация, CTA, қателер, пішіндер, кеңестер, хабарламалар, хаттар, PDF/баннерлер.
Мәтіндік кеңейту: ені + 30-40% резерв (неміс/фин). Лэйаут - икемді (flex/grid).
Тон/стиль: бренд сөздігі (терминдер, сыни жерлерде «сленг аудармасы» жоқ).
Суреттер/иконалар: суреттердегі мәтіннен аулақ болыңыз; қажет болса, жергілікті нұсқаларды сақтаңыз.

4) i18n сәулеті

Кілттер: 'domain. 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' })`.
Күнтізбе/апта: аптаның 1-ші күні және күн форматы - жергілікті бойынша.

6) RTL және хат бағыты

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

7) Нысандар және енгізу

Аттары/мекенжайлары: апострофтарға/диакритикаға/қос тектерге жол беріңіз.
Телефондары: E.164 сақтау; бетперделер - қоюды қолдайтын жұмсақ.
Мекенжай форматтары: ел бойынша өріс тәртібі; индексі/штаты болмауы мүмкін.
Пернетақталар: 'inputmode', 'autocomplete' жергілікті үшін дұрыс.
Плейсхолдерлер: жергілікті тілдегі/пішімдегі мысалдар.

8) Жалған талдаулар және тестілеу

Жолдарды автоматты түрде "【 Ěě 】 '+ + +' (35% ) ұзартуға ауыстырыңыз.
«qps-ploc» дегенді dev-құрастыруға қосыңыз.
Аудармашыларға арналған контексті бар скриншоттар: плейсхолдер мен ұзын мәтіндерді жарықтандыру.
Тестілеу: кесу, тасымалдау, толтыру, «қатты тігілген» жолдар, RTL.

9) Хабарламалар, хаттар, үлгілер

Хат пен тақырып үлгісі - әрбір локальге; мәтіндер мен беттерді бөліңіз.
Тақырыптағы күндер/сомалар - жергілікті бойынша пішімделеді.
«Ескертулерді баптау» сілтемелері әрдайым хат тілінде.
SMS: қысқаша, көп жолды тырнақшасыз; UTM - оқшаулаусыз.

10) Қауіпсіздік және сенімділік

Аударманы ешқашан HTML деп түсіндірмеңіз, қауіпсіз ендірмелерді пайдаланыңыз.
Плейсхолдерлер - тек деректер, таңба емес.
Логи/метриктер - құпиясыз, бірақ проблемалар трейсингі үшін жергілікті.
Аударма файлының қол жетімсіздігі кезінде фолбэк - «тыныш» (ағылшын + телеметрияны көрсетіңіз).

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) Бос/қателер/грейсфул деградациясы

Кілт аудармасы жоқ: ағылшынша көрсетеміз + логиндаймыз '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-чек парағы

Жолдар мен кілттер

• Аталған плейсхолдерлер; конкатенация жоқ.
• ICU-pluralization/қажет жерде түрі.
• Фолбэк тізбегі жұмыс істейді.

Лэйаут және қол жетімділік

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

Пішімдер

• Күндер/валюталар арқылы 'Intl.'; шағын бірліктерден алынған сомалар.
• Мекен-жайы/телефоны/аты - ел бойынша икемді ережелер.

Қауіпсіздік/көрініс

• Аудармалар HTML орындамайды; XSS алынып тасталды.
• Жалқау күбілер, CDN кэші, артық ререндерсіз.

iGaming ерекшелігі

• Дисклеймерлер/18 +/көмек желілері - юрисдикция бойынша.
• KYC/AML мәтіндері заңды түрде тексерілген.
• Төлем атаулары/ETA/комиссиялар - жергілікті.

19) Дизайн-жүйедегі құжаттама

Разделы: i18n Tokens, Guides (ICU/Plural/RTL), Patterns (Emails/SMS/Toasts), Legal Strings per Region.
Құралдар: жалған талшық, экрандар скриншотері, coverage есебі, кілттер линтері.
Процесс: глоссарий, Translation Memory, контекстік скриншоттар, тілде сөйлеушінің өрнегі.

Қысқаша түйіндеме

Көп тілді UI - бұл сәулет, дизайн, контент және құқық деңгейіндегі жүйелі жұмыс. Кілттер мен фолбэктерді ұйымдастырыңыз, ICU және 'Intl' пайдаланыңыз, RTL-ді қолдаңыз, бүркеншік талшықты алдын ала қуып шығыңыз және өңірлік тұжырымдамалардың заңды дұрыстығын қамтамасыз етіңіз. Сонда өнім әрбір елде және әрбір пайдаланушы үшін коэффициенттер мен төлемдерден хат пен анықтамаға дейін туыстық сезінетін болады.