Interfaces sensíveis à localidade: regras de plural do Intl, datas e layout da direita para a esquerda

Objetivo

Uma interface que continua correta quando a localidade muda: forma de plural certa, formato de data e número certo, direção de leitura certa e nenhum rótulo cortado, sem precisar de uma folha de estilo ou de um template separado para cada idioma.

Pré-requisitos

Uma tag de localidade BCP 47 por usuário ou por documento (lang em html), strings de mensagem mantidas fora do código e o namespace Intl, que segundo o MDN oferece DateTimeFormat, NumberFormat, PluralRules, RelativeTimeFormat e construtores relacionados.

Passos

1. Números e datas: crie new Intl.NumberFormat(locale, options) e new Intl.DateTimeFormat(locale, options) uma única vez e reutilize as instâncias; formate moedas e unidades por meio das opções, em vez de concatenar símbolos. Use Intl.RelativeTimeFormat para "há 3 dias". Trafegue strings ISO 8601 entre sistemas e formate apenas na camada de apresentação.
2. Plurais: new Intl.PluralRules(locale).select(n) retorna uma categoria (zero, one, two, few, many, other); nos cardinais em inglês só aparecem one e other, mas alguns idiomas usam as seis. Armazene uma variante da mensagem por categoria e escolha-a pela tag retornada; nunca faça a ramificação com base em n === 1. Ordinais (1st, 2nd) usam { type: "ordinal" }.
3. Direção: defina dir="rtl" em html para localidades da direita para a esquerda e dir="auto" em campos de entrada que possam receber texto do usuário com direção desconhecida. Escreva o layout com propriedades lógicas (margin-inline-start, padding-block, inset-inline-end, text-align: start), para que margens, floats e alinhamento se invertam junto com a direção da escrita, em vez de fixar esquerda e direita no código.
4. Ícones e controles: espelhe os ícones que indicam direção (setas de voltar, progresso) sob [dir="rtl"]; não altere símbolos universais (play, marcas de seleção).
5. Espaço: o artigo do W3C sobre tamanho de texto reproduz a tabela de expansão da IBM, segundo a qual strings curtas em inglês (até dez caracteres) crescem 200–300 % em idiomas europeus e textos longos, cerca de 130 %. Permita que botões, abas e cabeçalhos de tabela aumentem ou quebrem linha; evite larguras fixas dimensionadas para o rótulo em inglês.
6. Ordenação e busca: compare com Intl.Collator, e não pela ordem de code points, e segmente o texto com Intl.Segmenter para contar caracteres.
7. Teste com uma pseudolocalidade (strings alongadas, acentuadas e espelhadas) antes que existam traduções reais.

Resultado esperado

Ao trocar a localidade, mudam os formatos, as formas de plural e a direção do layout, sem nenhum caminho de código específico por idioma; os tradutores recebem frases completas com placeholders nomeados e uma variante por categoria de plural.

Limites e base de verificação

O comportamento segue a documentação citada do MDN e do W3C; não se afirma nenhuma medição. Fusos horários e calendários (hegiriano, budista) são opções separadas em DateTimeFormat. Texto bidirecional dentro de uma mesma linha (um nome de produto em caracteres latinos no meio de um texto em árabe) exige bdi ou isolamento Unicode, algo que dir sozinho não resolve.