Çox dilli interfeyslər və lokalizasiya

1) Prinsiplər

1. Dil skin deyil. Mətnlər, formatlar, yazı istiqaməti, illüstrasiyalar, hüquqi bloklar və hətta naviqasiya dəyişir.
2. Əvvəlcə açarlar, sonra mətnlər. Semantik açarları və parametrləri strukturlaşdırın - tərcümələr daha sonra gəlir.
3. Pseudolokalization - çıxış əvvəl. Daşqınları, «sərt tikilmiş» sətirləri və gizli anqlisizmləri tutun.
4. Folbeklər proqnozlaşdırıla bilər. 'ru-UA → ru → en'. Heç bir «sakit» uğursuzluq.
5. Təhlükəsizlik. Sanitizsiz DOM-a tərcümədən HTML yoxdur; playsholders yalnız mövqe/adlandırılmışdır.
6. A11y ekvivalentliyi. Alt mətnlər, aria etiketləri, qısaltmalar - hamısı lokallaşdırılır.

2) Lokal strategiya

Sistem kodları: 'language-REGION' (məsələn, 'pt-BR', 'en-GB').
Lokal seçimi: istifadəçi profili → konfiqurasiya; ehtiyat - avto-detekt brauzer/geo (təsdiq ilə).
Multi-region: dili hüquqdan ayırın: 'es-ES' ≠ 'es-MX' (müxtəlif qanunlar/ödənişlər/limitlər).
Folbek zənciri: UI - ən yaxın dil; hüquqi mətnlər - ciddi regional versiyası, əks halda blok və təsdiq sorğusu.

3) İnformasiya arxitekturası və məzmun

Əsas sahələr: naviqasiya, CTA, səhvlər, formalar, ipuçları, bildirişlər, məktublar, PDF/bannerlər.
Mətn genişləndirmələri: ehtiyat eni + 30-40% (Alman/Fin). Layaut - elastik (flex/grid).
Ton/stil: marka lüğəti (terminlər, kritik yerlərdə «jarqon tərcüməsi» olmadan).
Şəkillər/nişanlar: şəkillərdə mətndən qaçın; lazım olduqda - yerli versiyaları saxlayın.

4) Memarlıq i18n

Açarlar: 'domain. section. intent` → `payments. withdraw. error. insufficient_funds`.
Pleysholders: ('{amount}', '{minutes}') adlandırılmış, sətirdən kənarda formatlaşdırılmışdır.
ICU MessageFormat: çoxluq, cins, koordinasiya.
Fayllar: lokal və domenlərə görə ('/i18n/{ locale }/{ domain} .json '), çantalar tənbəl şəkildə yüklənir.
Server/müştəri: universal render, cookie + HTTP-Vary lokal.

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

5) Formatlaşdırma: ədədlər, tarixlər, valyutalar, vahidlər

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');

Kiçik vahidlər: məbləğləri sent/qəpikdə saxlayın; müştəri format.
Nisbi vaxt: 'Intl. RelativeTimeFormat`.
Vahidlər: 'Intl. NumberFormat({ style:'unit', unit:'meter' })`.
Təqvim/həftə: həftənin 1-ci günü və tarixin formatı - yerli.

6) RTL və məktub istiqaməti

'dir =' rtl 'üçün' ar ',' he ',' fa '; istifadəçi məzmunu üçün 'dir =' auto 'istifadə edin.
/ Chevron ikonlarını çevirin; güzgü karusel və steppers.
Rəqəmlər/valyuta simvolları - LTR pəncərələri (qarışıq BiDi xaosundan çəkinin).
CSS-məntiqi xüsusiyyətləri ('inline-start/end') əvəzinə left/right.

7) Formalar və giriş

Adlar/ünvanlar: apostroflara/diakritikaya/qoşa soyadlara icazə verin.
Telefonlar: E.164 saxlama; maskalar - yumşaq, əlavə dəstəyi ilə.
Ünvan formatları: ölkə üzrə sahə sırası; indeks/ştat yox ola bilər.
Klaviaturalar: 'inputmode', 'autocomplete' yerli üçün doğrudur.
Playsholders: yerli dil/formatda nümunələr.

8) Psevdolokalizasiya və test

Sətirləri avtomatik olaraq "【 ĚĚ, 】 '+ + +' uzantısı ilə əvəz edin (~ 35%).
«qps-ploc» kimi dev montaja psevdolokal daxil edin.
Tərcüməçilər üçün kontekstli ekran görüntüləri: pleysholders və uzun mətnlərin işıqlandırılması.
Test edin: budamalar, köçürmələr, daşmalar, «sərt tikilmiş» sətirlər, RTL.

9) Bildirişlər, məktublar, şablonlar

Məktub və mövzu şablonu - hər lokal üçün; mətnləri və düzənləri ayırın.
Mövzuda tarixlər/məbləğlər - lokal olaraq formatlaşdırılır.
«Bildirişləri konfiqurasiya et» linkləri həmişə məktub dilindədir.
SMS: qısa, çox sətirli tırnak işarələri olmadan; UTM - lokalizasiya olmadan.

10) Təhlükəsizlik və etibarlılıq

Heç vaxt tərcüməni HTML kimi şərh etməyin, təhlükəsiz əlavələrdən istifadə edin.
Playsholders - yalnız məlumat, nişan deyil.
Log/metriklər məxfi deyil, lakin problemlərin treysinqi üçün lokaldır.
Tərcümə faylı əlçatmaz olduqda folbek - «sakit» (ingilis + telemetriya göstərin).

11) Performans

Marşrutlar/domenlər üzrə pul köçürmələri; tez-tez üçün ön yükləmə.
Кеш CDN с `ETag`/`Cache-Control`.
Lokal dəyişdirərkən rerenderlərdən çəkinin - memoizasiya ilə i18n konteksti.

12) iGaming xüsusiyyətləri

Diskleymerlər və məsuliyyətli oyun: sözlər ölkədən asılıdır (18 +/21 +, tənzimləmə orqanları, yardım xətləri).
KYC/AML: hüquqi cəhətdən düzgün terminlər (məsələn, «Vəsait mənbəyi», «Benefisiar sahibi»), hallar/doğuş variantları.
Ödəniş metodları: yerli adlar (PIX, Papara, SEPA) və şərtlər (ETA/komissiyalar) - bölgəyə görə.
Əmsallar və format: 'decimal/fractional/american' - yerli izahlar və nümunə.
Hüquqi mətnlər: dəyişməz regional versiyalar; digər yurisdiksiyaya folbek qadağası.

13) Dizayn sistemi tokenləri (nümunə)

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) Snippetlər

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) Boş/səhvlər/qreysful deqradasiya

Açarın tərcüməsi yoxdur: ingiliscə + logo 'missing _ key'.
Heç bir yerli fayl: folbek və banner «İngilis dilində interfeys hissəsi».
Çox uzun mətn: çox xəttli, 'line-clamp' yerində, tam mətnli tooltip.

16) Metrika və keyfiyyətə nəzarət

Açarlar/lokallar üzrə% coverage (hədəf ≥ 98%).
Time-to-Translate (TTT) yeni buraxılışlar üçün.
Bug rate L10n: vizual budamalar, RTL qüsurları, səhv formatlar.
Reading ease (subyektiv sorğu) və NPS per locale.
Regionlar üzrə hüquqi validasiya (komplayens çeklisti).

17) Antipattern

Kodda sətirlərin konkatenasiyası («Siz» + amount + «!») - qrammatikanı pozur.
Yerli versiyası olmayan şəkillərdə/ikonalarda mətn.
İngilis dilində sərt enlər.
Ölkənin hüquqlarını dillə əvəz etmək (Meksika üçün 'es-ES' istifadə etmək).
Sanitar olmadan CMS-dən HTML vasitəsilə tərcümə.
Müxtəlif yerlərdə fərqli mənaları olan eyni açar.

18) QA-çek siyahısı

Sətirlər və açarlar

• Adları Playsholders; heç bir konkatenasiya.
• ICU-pluralization/lazım olan yer.
• Folback zənciri işləyir.

Layout və əlçatanlıq

• Enlik ehtiyatı + 30-40%; 'line-clamp', söz transferi.
• Alt/aria-etiketlər lokallaşdırılmışdır.
• RTL nişanlar/naviqasiya güzgü; ədədlər oxunur.

Formatlar

• 'Intl.' Vasitəsilə Tarix/Valyuta; kiçik vahidlərin məbləğləri.
• Ünvan/telefon/ad - ölkə üzrə çevik qaydalar.

Təhlükəsizlik/performans

• Tərcümə HTML yerinə yetirmir; XSS istisna edilir.
• Tənbəl fincan, CDN önbellək, lazımsız rerender.

iGaming spesifikasiyası

• Disleymerlər/18 +/yardım xətləri - yurisdiksiya üzrə.
• KYC/AML mətnləri qanuni olaraq təsdiqlənmişdir.
• Ödəniş adları/ETA/komissiyalar - yerli.

19) Dizayn sistemində sənədləşmə

Разделы: i18n Tokens, Guides (ICU/Plural/RTL), Patterns (Emails/SMS/Toasts), Legal Strings per Region.
Alətlər: psevdolokal, ekran screenshoter, hesabat coverage, açar linter.
Proses: Sözlük, Tərcümə Yaddaşı, Kontekstli Ekran Görüntüləri, Dilin nəqli.

Qısa xülasə

Çox dilli UI memarlıq, dizayn, məzmun və hüquq səviyyəsində sistemli bir işdir. Açarları və folbekləri təşkil edin, ICU və 'Intl' istifadə edin, RTL-ni dəstəkləyin, psevdolokalı əvvəlcədən qovun və regional ifadələrin hüquqi düzgünlüyünü təmin edin. Sonra məhsul hər ölkədə və hər istifadəçi üçün əmsallardan və ödənişlərdən məktublara və arayışlara qədər yerli hiss olunacaq.