Interfaces multi-línguas e localização

1) Princípios

1. A língua não é skin. Altera textos, formatos, direção de escrita, ilustrações, blocos legais e até navegação.
2. Primeiro as chaves, depois os textos. Estruture as chaves de sentido e os parâmetros - as traduções vêm depois.
3. Pseudolocalização antes de sair. Apanhem cheias, linhas «apertadas» e anglicismos ocultos.
4. Os folbacks são previsíveis. Não há falhas silenciosas.
5. Segurança. Nada de HTML da tradução para DOM sem saneamento; playsholders apenas posicionados/nomeados.
6. Equivalência A11y. Alt-textos, ária-editoras, abreviações, tudo é localizado.

2) Estratégia local

Códigos de sistema: 'language-REGION' (por exemplo, 'pt-BR', 'en-GB').
Selecionar localização: perfil do usuário → configuração; reserva - detetive automático por navegador/geo (com confirmação).
Região Multi: Diferenciar o idioma do direito 'es-ES' n' es-MX '(diferentes leis/pagamentos/limites).
Cadeia Folback: UI - a língua mais próxima; textos legais são uma versão estritamente regional, senão um bloco e um pedido de confirmação.

3) Arquitetura de informação e conteúdo

Áreas-chave: navegação, CTA, erros, formulários, dicas, notificações, e-mails, PDF/banners.
Extensões de texto: reserva de largura + 30-40% (alemão/finlandês). Layout - elástico (flex/grid).
Tom/estilo: dicionário da marca (termos, sem «tradução» em locais críticos).
Imagens/ícones: evite o texto em imagens; Se precisar dele, guarde as versões locais.

4) Arquitetura i18n

As chaves são 'domain. section. intent` → `payments. withdraw. error. insufficient_funds`.
Playsholders: renomados ('<amount 03', '<minutes 03'), formatados fora da linha.
ICU MessageFormat: multiplicidade, gênero, concordância.
Arquivos: por locais e domínios ('/i18n/1962 local Aquela coisa é de preguiçoso.
Servidor/cliente: render universal, local em cookies + HTTP-Vary.

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

5) Formatação: números, datas, divisas, unidades

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

Unidades menores: guarde as quantias em centavos/centavos; formatem no cliente.
Hora relativa: 'Intl. RelativeTimeFormat`.
Unidades: 'Intl. NumberFormat({ style:'unit', unit:'meter' })`.
Calendário/semana: 1º dia da semana e formato da data por local.

6) SE e direção de carta

Suporte 'dir =' 'para' ar ',' he ',' fa '; use 'dir =' auto 'para conteúdo personalizado.
Inverte ícones/chevron 's; espelhar carrossel e steppers.
Números/caracteres de moedas - janelas LTR (evite o caos BiDi misto).
Propriedades lógicas CSS ('inline-start/end') em vez de left/right.

7) Formulários e entrada

Nomes/endereços: admita apóstrofos/diacriticos/nomes duplos.
Telefones: E.164 armazenamento; máscaras - macias, com suporte de inserção.
Formatos de endereço: ordem de campos por país; o índice/estado pode estar ausente.
Teclados: 'inputmode', 'autocomplete' corretos para localização.
Playshalders: exemplos em linguagem/formato local.

8) Pseudolocalização e testes

Substitua automaticamente as linhas por ' + alongamento' + + + '(£35%).
Inclua o pseudolocal na montagem uv como 'qps-ploc'.
Ecrã com contexto para tradutores: realce playsholders e textos longos.
Teste: corte, transposição, cheias, linhas «severamente costuradas», SE.

9) Notificações, cartas, modelos

Modelo de e-mail e tópicos - para cada local; divida os textos e as letras.
Datas/somas em tópico - formatados localmente.
Os links Personalizar notificações são sempre no idioma da carta.
SMS: brevemente, sem aspas de várias linhas; UTM - sem localização.

10) Segurança e confiabilidade

Nunca interprete uma tradução como HTML, use inserções seguras.
Os playsholders são apenas dados, não marcação.
Logs/métricas - não secreta, mas com localização para problemas de trailing.
O folback quando o arquivo de tradução não estiver disponível é «silencioso» (mostre inglês + telemetria).

11) Desempenho

Chancas traduções em rotas/domínios; pré-sal para frequentes.
Кеш CDN с `ETag`/`Cache-Control`.
Evite os reenders ao trocar de localização - contexto i18n com memoide.

12) Especificidades iGaming

Discreters e jogo responsável: a formulação depende do país (18 +/21 +, órgãos de regulação, linhas de ajuda).
KYC/AML: Termos legalmente corretos (por exemplo, «Fonte de Fundos», «Proprietário Beneficiário»), opções de corte/parto.
Métodos de pagamento: nomes locais (PIX, Papara, SEPA) e termos (ETA/comissões) - estritamente por região.
Coeficientes e formato: 'decimal/fractional/american' - explicações e exemplos locais.
Textos legais: versões regionais imutáveis; banir o folback de outra jurisdição.

13) Sistema de design de tokens (exemplo)

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

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) Vazios/erros/graciful degradação

Sem tradução de chave: mostramos inglês + logem 'missing _ key'.
Nenhum arquivo local, folback e banner «Parte da interface em inglês».
Texto muito longo: multi-linha, 'line-clamp' por local, tooltip com texto completo.

16) Métricas e controle de qualidade

Coverage% por chave/localização (≥ de destino 98%).
Time-to-Translate (TTT) para novos lançamentos.
Bug rate L10n - Recorte visual, defeitos de LED, formatos errados.
Reading ease (pesquisa subjetiva) e NPS per local.
Validação legal por região (chapa de complacência).

17) Antipattern

A concatenação de linhas no código («Você ganhou» + amount + «!») rompe a gramática.
Texto em imagens/ícones sem versão local.
Largura dura para o inglês.
Troca de direito de país (usar 'es-ES' para o México).
Transferência por HTML do CMS sem saneamento.
A mesma chave, com significados diferentes, em lugares diferentes.

18) QA-folha de cheque

Linhas e chaves

• Playsholders nomeados; não há concatenação.
• A plutalização ICU/gênero onde for necessário.
• A cadeia Falback funciona.

Layout e disponibilidade

• Reserva de largura + 30-40%; 'line-clamp', transferência de palavras.
• Alt/ária-editoras localizadas.
• SE espelha ícones/navegação; os números são legíveis.

Formatos

• Datas/divisas através de 'Intl'; somas de unidades menores.
• Endereço/telefone/nome - regras flexíveis para o país.

Segurança/performance

• Traduções não executam HTML; O XSS foi excluído.
• Chancinhas preguiçosas, kesh CDN, sem retalhos demais.

iGaming-especificidades

• Discricionários/18 +/linhas de ajuda - jurisdição.
• Os textos do KYC/AML estão legalmente ajustados.
• Nomes de pagamento/ETA/comissões - locais.

19) Documentação em design

Разделы: i18n Tokens, Guides (ICU/Plural/RTL), Patterns (Emails/SMS/Toasts), Legal Strings per Region.
Ferramentas: pseudolocal, ecrã de tela, relatório de coverage, linter de chaves.
Processo: glossário, Translation Memory, screenshots contextuais, revezamento de linguagem.

Resumo breve

A UI multi-linguagem é um trabalho de sistemas ao nível da arquitetura, design, conteúdo e direito. Organize as chaves e os folbacks, use ICU e 'Intl', apoie o'SE ', execute o pseudolocal com antecedência e assegure que os termos regionais estejam legalmente corretos. Então, o produto se sentirá familiar - desde coeficientes e pagamentos até cartas e informações - em cada país e para cada usuário.