Wielojęzyczne interfejsy i lokalizacja

1) Zasady

1. Język nie jest skórą. Zmieniają się teksty, formaty, kierunek pisania, ilustracje, bloki prawne, a nawet nawigacja.
2. Najpierw klucze, potem SMS-y. Struktura semantyczne klucze i parametry - tłumaczenia przychodzą później.
3. Pseudolokalizacja - przed wyjściem. Łapać przepełnienia, „twarde szyte” linie i ukryte anglicyzmy.
4. Folbacks są przewidywalne. 'ru-UA → ru → en'. Żadnych „cichych” porażek.
5. Ochrona. Brak HTML z tłumaczenia na DOM bez kanalizacji; znaczniki są pozycyjne/nazwane tylko.
6. A11y-equivalence. Teksty Alt, etykiety Aria, skróty - wszystko jest zlokalizowane.

2) Strategia lokalna

Kody systemu: „język-REGION” (na przykład „pt-BR”, „en-GB”).
Wybór lokalizacji: profil użytkownika → ustawienie; zapasowe - automatyczne wykrywanie przez przeglądarkę/geo (z potwierdzeniem).
Wielobranżowy: odróżnić język od prawa: „es-ES” i „es-MX” (różne prawa/płatności/limity).
Łańcuch folback: UI jest najbliższym językiem; teksty prawne - wersja ściśle regionalna, w przeciwnym razie zablokować i potwierdzić żądanie.

3) Architektura i treść informacji

Kluczowe obszary: nawigacja, CTA, błędy, formularze, prompty, powiadomienia, litery, PDF/banery.
Rozszerzenie tekstu: + 30-40% szerokość rezerwy (niemiecki/fiński). Układ - elastyczny (flex/siatka).
Ton/styl: słownik marki (terminy, bez „tłumaczenia slangu” w miejscach krytycznych).
Obrazy/ikony: unikaj tekstu na zdjęciach; w razie potrzeby zachować lokalne wersje.

4) architektura i18n

Klucze: 'domena. sekcja. intent '→' płatności. wycofać. błąd. insufficient_funds'.
Znaczniki: nazwane („{amount}”, „{minutes}”), sformatowane poza linią.
Format ICU: wielość, płeć, zgoda.
Pliki: według lokalizacji i domen ('/i18n/{ locale }/{ domain} .json '), kawałki są ładowane leniwie.
Serwer/klient: uniwersalny render, locale w cookie + HTTP-Vary.

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

5) Formatowanie: numery, daty, waluty, jednostki

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

Jednostki niewielkie: przechowywać kwoty w centach/kopnikach; Format klienta.
Czas względny: 'Intl. Zrelacjonować Format '.
Jednostki: "Intl. Format ({styl: 'unit', unit: 'meter'}) '.
Kalendarz/tydzień: pierwszy dzień tygodnia i format daty - według locale.

6) RTL i kierunek pisania

Support 'dir =' rtl' 'dla' ar ',' he ',' fa '; użyć 'dir = „auto” dla niestandardowych treści.
Ikony odwrócenia/chevrony; karuzela i lusterka stepowe.
Numery/symbole walutowe - okna LTR (unikaj mieszanego chaosu BiDi).
Właściwości CSS Boolean ('inline-start/end') zamiast lewej/prawej.

7) Formularze i dane wejściowe

Nazwy/adresy: zezwalać na apostrofy/diakrytyki/podwójne nazwiska.
Telefony: przechowywanie E.164; maski - miękkie, z podparciem wkładki.
Formaty adresów: pole kolejności według kraju; może brakować indeksu/stanu.
Klawiatury: 'inputmode', 'autocomplete' poprawne dla locale.
Znaczniki: przykłady w języku/formacie lokalnym.

8) Pseudolokalizacja i testowanie

Automatycznie wymień wiersze na 'wiÄ ™ gniÄ ™ + rozszerzenie' + + + '(~ 35%).
Włączyć pseudolokal do zespołu dev jako „qps-ploc”.
Zrzuty ekranu z kontekstem dla tłumaczy: podkreślanie znaczników i długich tekstów.
Test: ozdoby, hiphenacje, przepełnienia, sznurki „twarde”, RTL.

9) Powiadomienia, litery, szablony

Szablon litery i tematu - dla każdej lokalizacji; oddzielne teksty i układ.
Daty/kwoty w temacie - w formacie locale.
Linki Konfiguracja powiadomień są zawsze w języku litery.
SMS: krótkie, bez wielopoziomowych cytatów; UTM - brak lokalizacji.

10) Bezpieczeństwo i niezawodność

Nigdy nie interpretuj tłumaczenia jako HTML, używaj bezpiecznych wkładek.
Rolnicy - tylko dane, a nie znaczniki.
Kłody/mierniki są niesklasyfikowane, ale z lokalizacją dla problemów ze śledzeniem.
Folback gdy plik tłumaczenia nie jest dostępny - „cichy” (pokaż angielski + telemetria).

11) Wydajność

Kawałki transferów na trasach/domenach; preload dla częstych.
Ке, CDN „ETag ”/„ Cache-Control”.
Unikaj powracających podczas zmiany lokalizacji - kontekst i18n z pamięcią.

12) Specyfika iGaming

Zastrzeżenia i odpowiedzialna gra: brzmienie zależy od kraju (18 +/21 +, organy regulacyjne, linie pomocy).
KYC/AML: prawnie poprawne terminy (na przykład „źródło funduszy”, „właściciel odsetek”), opcje sprawy/urodzenia.
Metody płatności: nazwy lokalne (PIX, Papara, SEPA) i warunki (ETA/prowizje) - ściśle według regionu.
Współczynniki i format: „dziesiętny/frakcyjny/amerykański” - lokalne wyjaśnienia i przykład.
Teksty prawne: niezmienione wersje regionalne; zakazanie ludu z innej jurysdykcji.

13) Żetony systemu projektowania (przykład)

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

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) Pusta/błędna/szara degradacja

Nie ma kluczowego tłumaczenia: pokazujemy angielski + log 'brakujące _ key'.
Brak pliku locale: folback i banner „Część interfejsu w języku angielskim”.
Tekst zbyt długi: multi-line, 'line-clamp' na miejscu, podpowiedź z pełnym tekstem.

16) Mierniki i kontrola jakości

Zasięg% według klucza/lokalizacji (cel ≥ 98%).
Time-to-Translate (TTT) dla nowych wersji.
Wskaźnik błędów L10n: wycinki wizualne, wady RTL, błędne formaty.
Łatwość odczytu (badanie subiektywne) i NPS na lokalizację.
Walidacja prawna według regionów (lista kontrolna zgodności).

17) Antypattery

Konkatenacja ciągów w kodzie („Wygrałeś” + kwota + „!”) - łamie gramatykę.
Tekst w obrazach/ikonach bez wersji lokalnych.
Twarde szerokości dla angielskiego.
Zastąpienie prawa krajowego językiem (użycie „es-ES” dla Meksyku).
Tłumaczenie HTML z CMS bez urządzeń sanitarnych.
Ten sam klucz z różnymi znaczeniami w różnych miejscach.

18) Lista kontrolna QA

Linie i klucze

• Imienni pośrednicy; bez konkatenacji.
• ICU - pluralizacja/rodzaj, w razie potrzeby.
• Łańcuch folback działa.

Układ i dostępność

• Margines szerokości + 30-40%; „zacisk liniowy”, pakowanie słów.
• Etykiety alt/aria są zlokalizowane.
• Ikony luster RTL/nawigacja; numery są czytelne.

Formaty

• Daty/Waluty via 'Intl. '; kwoty z małych jednostek.
• Adres/Telefon/Nazwa - Elastyczne zasady kraju.

Bezpieczeństwo/wydajność

• Tłumaczenia nie wykonują HTML; Wyłączone XSS.
• Leniwe kawałki, pamięć podręczna CDN, bez zbędnych plecaków.

iGaming-specyfiki

• Disclaimers/18 +/linie pomocy - według jurysdykcji.
• Teksty KYC/AML są zgodne z prawem.
• Nazwy płatności/ETA/opłaty - lokalne.

19) Dokumentacja w systemie projektowym

Рабдела: i18n Tokens, Guides (ICU/Plural/RTL), Patterns (Emails/SMS/Toasts), Legal Strings per Region.
Narzędzia: pseudolokalny, zrzut ekranu, raport pokrycia, klucz linter.
Proces: glosariusz, pamięć tłumaczenia, zrzuty ekranu kontekstowego, recenzja przez native speakera.

Krótkie podsumowanie

Wielojęzyczny interfejs użytkownika to systematyczna praca na poziomie architektury, projektowania, treści i prawa. Organizowanie kluczy i folbacków, korzystanie z ICU i "Intl', wsparcie RTL, uruchomić pseudo-locale z wyprzedzeniem i zapewnić legalną poprawność brzmienia regionalnego. Następnie produkt poczuje się rodzimy - od współczynników i płatności po listy i pomoc - w każdym kraju i dla każdego użytkownika.