Interfacce multi-lingue e localizzazione

1) Principi

1. La lingua non è uno skin. I testi, i formati, la direzione di scrittura, le illustrazioni, i blocchi legali e persino la navigazione cambiano.
2. Prima le chiavi, poi i testi. Struttura le chiavi di significato e le impostazioni - le traduzioni vengono in seguito.
3. Pseudolocalizzazione - prima dell'uscita. Catturare sovraccarichi, righe rigide e anglicismi nascosti.
4. I Falback sono prevedibili. Niente fallimenti silenziosi.
5. Sicurezza. Nessun HTML da traduzione in DON senza assistenza sanitaria; playsholder solo di posizione/denominazione.
6. Equivalenza A11y. Alt-testi, aria-etichette, abbreviazioni - tutto è localizzato.

2) Strategia locale

Codici di sistema: «language-REGION» (ad esempio «pt-BR», «en-GB»).
Selezione locale: profilo utente personalizzato di ricambio - l'auto per browser/geo (con conferma).
Multi-Regione: differenziare la lingua dal diritto «es-ES» «es-MX» (leggi/pagamenti/limiti diversi).
Catena di Falback: UI è la lingua più vicina; testi legali sono una versione strettamente regionale, altrimenti un blocco e una richiesta di conferma.

3) Architettura e contenuti delle informazioni

Le aree chiave sono navigazione, CTA, errori, moduli, suggerimenti, notifiche, e-mail, PDF/banner.
Estensione testo: riserva di larghezza + 30-40% (tedesco/finlandese). Layout è elastico (flex/grid).
Tono/stile: dizionario del marchio (termini senza «traduzione dello slang» in punti critici).
Immagini/icone: evitare il testo nelle immagini; Se necessario, conserva le versioni locali.

4) Architettura i18n

Le chiavi sono «domain». section. intent` → `payments. withdraw. error. insufficient_funds`.
Playsholder: denominato ('{amount}', '{minute}'), formattato fuori riga.
ICU MessageFormat: pluralità, genere, coerenza.
File: per locali e domini ('/i18n/{ locale }/{ domain} .json ') e carichi pigri.
Server/client: render universale, locale nei cookie + HTTP-Vary.

json
{
"betslip": {
"placed": "{amount} {currency} bid accepted,"
"timeout": "Waiting for confirmation... ~ {seconds, plural, one {# sec} few {# sec} many {# sec} other {# sec}}"
}
}

5) Formattazione: numeri, date, valute, unità

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à minori: conserva le somme in centesimi/centesimi; formattare il client.
Ora relativa: 'Intl. RelativeTimeFormat`.
Unità dì Intl ". NumberFormat({ style:'unit', unit:'meter' })`.
Calendario/settimana: 1 ° giorno della settimana e formato data per locale.

6) RTL e direzione della lettera

Supportare "dir =" rtl "per" ar "," he "," fa "; usa dir = auto per i contenuti personalizzati.
Inverte le icone/chevron's; specchio di caroselli e stepper.
I numeri/simboli di valuta sono finestre LTR (evitare il caos misto).
Proprietà logiche CSS ('inline-start/end') invece di left/right.

7) Moduli e input

Nomi/indirizzi: permetti apostrofi/diacritica/doppi cognomi.
Telefoni: E.164 storage; maschere - morbide, con il supporto per l'inserimento.
Formati di indirizzo: ordine dei campi per paese; indice/stato potrebbero mancare.
Le tastiere sono «inputmode», «autocomplete» corrette per il locale.
Playsholder: esempi in lingua/formato locale.

8) Pseudolocalizzazione e test

Sostituisci automaticamente le righe con « » + estensione «+ + +» (} 35%).
Includere lo pseudolocale nell'assieme def come «qps-ploc».
Screenshot con contesti per traduttori: evidenziazione di playsholder e testi lunghi.
Prova: ritagli, spostamenti, sovraccarichi, righe «cucite», RTL.

9) Notifiche, lettere, modelli

Modello di scrittura e di argomento per ogni locale; Separare testi e cerchi.
Le date/gli importi in oggetto sono formattati localmente.
I collegamenti Configura notifiche sono sempre nella lingua della lettera.
SMS: brevemente, senza virgolette a più righe; UTM - Senza localizzazione.

10) Sicurezza e affidabilità

Non interpretare mai la traduzione come HTML, utilizzare le inserzioni sicure.
I playsholder sono solo dati, non marcatori.
I loghi/metriche sono incontrollabili, ma con la localizzazione per i problemi di tracsing.
Folback quando il file di traduzione non è disponibile è silenzioso (mostra inglese + telemetria).

11) Prestazioni

Chanci traduzioni su percorsi/domini; precarica per frequenti.
Кеш CDN с `ETag`/`Cache-Control`.
Evitare i rettificatori quando cambi locali - Contesto i18n con memorizzazione.

12) Specificità del iGaming

Disclaim e gioco responsabile: la formulazione dipende dal paese (18 +/21 +, regolatori, linee di aiuto).
KYC/AML: termini giuridicamente corretti (ad esempio «Fonte fondi», «Beneficiario proprietario»), opzioni di decadenza/parto.
Metodi di pagamento: denominazione locale (PIX, Papara, SEPA) e condizioni (ETA/commissione) - rigorosamente per regione.
I coefficienti e il formato «decimal/fractional/american» sono spiegazioni e esempi locali.
Testi legali: versioni regionali invariate; Vietare al folback un'altra giurisdizione.

13) Token di progettazione (esempio)

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

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: {}//empty - loadim lazy
});

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 {# notification} few {# notifications} many {# notifications} other {# notifications}}"
}

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) Vuoti/errori/grassofoli di degrado

Nessuna traduzione chiave: mostra inglese + logem «missing _ key».
Nessun file locale: folback e striscione «Parte interfaccia in inglese».
Testo troppo lungo, «line-clamp» per posizione, tooltip con testo completo.

16) Metriche e controllo qualità

Coverage% per chiavi/locali (target 98%).
Time-to-Translate (TTT) per le nuove release.
Bug rate L10n - Ritagli visivi, difetti RTL, formati errati.
Reading ease (sondaggio soggettivo) e NPS per locale.
Validazione legale per regione (listino della compilazione).

17) Antipattern

Concatenare le righe nel codice («Hai vinto + amount +!») - Rompe la grammatica.
Testo nelle immagini/icone senza versione locale.
Larghezze rigide sotto l'inglese.
Sostituzione del diritto nazionale con la lingua (usà es-ES "per il Messico).
Traduzione HTML da CMS senza assistenza sanitaria.
Stessa chiave con significati diversi in posti diversi.

18) Lista assegni QA

Righe e chiavi

• Playsholder nominati; nessuna concatenazione.
• La coltivazione ICU/lignea.
• La catena di falback funziona.

Layout e disponibilità

• Riserva di larghezza + 30-40%; 'line-clamp', traduzione di parole.
• Alt/aria-etichette localizzate.
• RTL specchia icone/navigazione; i numeri sono leggibili.

Formati

• Data/valuta tramite «Intl»; gli importi delle unità minori.
• Indirizzo/telefono/nome - regole flessibili per paese.

Sicurezza/Performance

• Le traduzioni non eseguono HTML; XSS escluso.
• Cianfrusaglie pigre, cash CDN, senza troppi ritorni.

Specifica iGaming

• Disclaim/18 +/linee di aiuto - giurisdizione.
• I testi KYC/AML sono legalmente riconducibili.
• Nomi di pagamento/ETA/commissione - locali.

19) Documentazione in progettazione

Разделы: i18n Tokens, Guides (ICU/Plural/RTL), Patterns (Emails/SMS/Toasts), Legal Strings per Region.
Strumenti: pseudolocale, screenshoter, rapporto coverage, linter chiavi.
Processo: glossario, Translation Memory, screenshot contestuali, il supporto della lingua.

Breve riepilogo

UI multi-lingue è un lavoro di sistema a livello di architettura, design, contenuti e diritti. Organizzate chiavi e folback, usate ICU e Intl, supportate RTL, controllate lo pseudolocale in anticipo e assicurate la correttezza legale delle frasi regionali. In questo modo il prodotto si sentirà familiare, dai coefficienti e pagamenti alle lettere e alla guida, in ogni paese e per ogni utente.