Interfețe multilingve și localizare

1) Principii

1. Limbajul nu este piele. Textele, formatele, direcția de scriere, ilustrațiile, blocurile juridice și chiar navigarea se schimbă.
2. Mai întâi cheile, apoi textele. Structura chei semantice și parametrii - traduceri vin mai târziu.
3. Pseudolocalizare - înainte de ieșire. Prinde revărsări, linii „cusute” și anglicisme ascunse.
4. Folback-urile sunt previzibile. 'ru-UA → ru → en'. Fără eşecuri „liniştite”.
5. Securitate. Fără HTML de la traducere la DOM fără igienizare; înlocuitorii sunt doar poziționali/numiți.
6. A11y-equivalence. Alt texte, etichete aria, abrevieri - totul este localizat.

2) Strategie locală

Coduri de sistem: „limbă-REGIUNE” (de exemplu, „pt-BR”, „en-GB”).
Selectie locala: profil utilizator → setare; rezervă - auto-detectare prin browser/geo (cu confirmare).
Multi-regiune: distinge limba de drept: "es-Es' ≠" es-MX "(legi diferite/plăți/limite).
Lanț folback: UI este cea mai apropiată limbă; texte juridice - versiunea strict regională, în caz contrar bloc și cerere de confirmare.

3) Arhitectura și conținutul informației

Domenii cheie: navigare, CTA, bug-uri, formulare, solicitări, notificări, scrisori, PDF/bannere.
Extensii text: + 30-40% lățime rezervă (germană/finlandeză). Aspect - elastic (flex/grilă).
Ton/stil: dicționar de brand (termeni, fără „traducere argou” în locuri critice).
Imagini/pictograme: evitați textul în imagini; dacă este necesar, păstrați versiunile locale.

4) i18n arhitectura

Chei: 'domeniu. secțiunea. intenție „→” plăți. se retrag. eroare. insufficient_funds'.
Înlocuitori: numiți ('{cantitate}', '{minute}'), formatați în afara liniei.
ATI MessageFormat: multiplicitate, gen, concordanță.
Fișiere: după locale și domenii ('/i18n/{ locale }/{ domain} .json '), bucățile sunt încărcate leneș.
Server/client: randare universală, localizare în cookie + HTTP-Vary.

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

5) Formatare: numere, date, valute, unități

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

Unități minore: Păstrați cantități în cenți/copeici; Formatul pe client.
Timp relativ: "Intl. RelativeTimeFormat '.
Unităţi: 'Intl. NumberFormat ({style: 'unitate', unitate: 'metru'}) '.
Calendar/săptămână: prima zi a săptămânii și formatul datei - pe plan local.

6) RTL și direcția de scriere

Suport 'dir =' rtl' pentru 'ar', 'he', 'fa'; use 'dir = "auto" "pentru conținut personalizat.
Invertiți icoane/chevroni; carusel și oglinzi pas cu pas.
Numere/simboluri valutare - ferestre LTR (evitați haosul BiDi mixt).
Proprietăți CSS Boolean ("inline-start/end') în loc de stânga/dreapta.

7) Formulare și intrare

Nume/adrese: permiteți apostrofe/diacritice/nume duble.
Telefoane: stocare E.164; măști - moale, cu suport de inserare.
Formate de adrese: comandă câmp după țară; indexul/starea poate lipsi.
Tastaturi: 'inputmode', 'autocomplete' corecte pentru locale.
Înlocuitori: exemple în limba/formatul local.

8) Pseudolocalizare și testare

Înlocuirea automată a liniilor cu '【 ěεő 】' + extensie '+ + +' (~ 35%).
Includeți pseudolocalul în ansamblul dev ca „qps-ploc”.
Capturi de ecran cu context pentru traducători: evidențierea substituenților și texte lungi.
Test: maruntisuri, cratime, revarsari, siruri de caractere „tare-cusute”, RTL.

9) Notificări, scrisori, șabloane

Model de scrisoare și subiect - pentru fiecare local; texte separate și aspect.
Date/sume în subiect - formatate de local.
Link-urile Configurare notificări sunt întotdeauna în limba scrisorii.
SMS: scurt, fără citate pe mai multe linii; UTM - fără localizare.

10) Siguranță și fiabilitate

Nu interpretați niciodată traducerea ca HTML, utilizați inserții sigure.
Înlocuitori - numai date, nu marcaj.
Busteni/metrici sunt neclasificate, dar cu o localizare pentru probleme de urmărire.
Folback atunci când fișierul de traducere nu este disponibil - „liniștit” (arată engleză + telemetrie).

11) Performanță

Bucăți de transferuri pe rute/domenii; preîncărcare pentru frecvente.
Кеш CDN с „ETag ”/„ Cache-Control”.
Evitați redarea atunci când schimbați locațiile - i18n context cu memorare.

12) Specificul iGaming

Disclaimers și joc responsabil: formularea depinde de țară (18 +/21 +, autorități de reglementare, linii de ajutor).
KYC/AML: termeni corecți din punct de vedere juridic (de exemplu, „Sursa fondurilor”, „Beneficiarul benefic”), opțiuni de caz/naștere.
Metode de plată: nume locale (PIX, Papara, SEPA) și condiții (ETA/comisioane) - strict pe regiuni.
Coeficienți și format: „zecimal/fracțional/american” - explicații locale și exemplu.
Texte juridice: versiuni regionale neschimbate; interzicerea folbeck din alte jurisdicții.

13) Proiectarea tokenurilor sistemului (exemplu)

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) Fragmente

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) Gol/eroare/degradare gri

Nu există nici o traducere cheie: vom arăta limba engleză + jurnal „lipsă _ cheie”.
Fără fișier local: folback și banner „Parte a interfeței în limba engleză”.
Text prea lung: multi-line, „linie-clemă” în loc, tooltip cu text complet.

16) Măsurători și controlul calității

Acoperire% după cheie/locație (țintă ≥ 98%).
Time-to-Translate (TTT) pentru noi versiuni.
L10n ratei de erori: decupaje vizuale, defecte RTL, formate eronate.
Citirea ușurinței (sondaj subiectiv) și NPS per local.
Validarea legală pe regiuni (lista de verificare a conformității).

17) Antipattern

Concatenarea șirurilor în cod („Ai câștigat” + suma + „!”) - rupe gramatica.
Text în imagini/pictograme fără versiuni locale.
Lățimi mari pentru limba engleză.
Înlocuirea dreptului țării cu limba (utilizarea "es-Es' pentru Mexic).
Traducere HTML de la CMS fără salubritate.
Aceeași cheie cu sensuri diferite în locuri diferite.

18) Lista de verificare QA

Linii și chei

• Numiți înlocuitori; fără concatenare.
• ICU-pluralizare/gen acolo unde este necesar.
• Lanțul folback funcționează.

Aspect și disponibilitate

• Marja de lățime + 30-40%; „line-clamp”, împachetarea cuvintelor.

Etichetele Alt/aria sunt localizate.

• RTL oglinzi icoane/navigare; numerele pot fi citite.

Formate

• Date/valute via 'Intl. '; sume provenite de la unități minore.
• Adresa/Telefon/Nume - Reguli de țară flexibile.

Siguranță/performanță

• Traducerile nu execută HTML; XSS exclus.
• bucăți leneș, cache CDN, fără renters inutile.

Specificul iGaming

• Disclaimers/18 +/linii de ajutor - prin jurisdicție.
• Textele KYC/AML sunt reconciliate legal.
• Numele de plată/ETAs/taxe - locale.

19) Documentația în sistemul de proiectare

Разделы: i18n jetoane, ghiduri (ICU/Plural/RTL), modele (e-mailuri/SMS/Toasts), șiruri juridice pe regiune.
Instrumente: pseudolocal, captură de ecrane, raport de acoperire, linter cheie.
Proces: glosar, memorie de traducere, capturi de ecran contextuale, revizuire de către un vorbitor nativ.

Scurt rezumat

Interfața multilingvă este o lucrare sistematică la nivel de arhitectură, design, conținut și drept. Organizați cheile și folback-urile, utilizați ICU și "Intl', sprijiniți RTL, rulați un pseudo-local în avans și asigurați corectitudinea legală a formulării regionale. Apoi, produsul se va simți nativ - de la coeficienți și plăți la scrisori și ajutor - în fiecare țară și pentru fiecare utilizator.