Projeto adaptado para todos os mercados

Um recurso está pronto para o mundo quando funciona em qualquer idioma e segue as convenções de cada leitor sem alterações no código. Esta página segue as diretrizes da Microsoft. lista de verificação de internacionalização: cada seção explica as diferenças entre os mercados, como escrever código que funcione corretamente e o verificação de Globalização código que marca a prática incorreta.

Na maioria dos casos, tudo se resume a uma regra: deixe que a localidade do leitor decida. A API do navegador Intl APIs, o formatador do seu framework e os dados por trás Cultura conhece as convenções de cada mercado; código que codifica rigidamente as regras de um único mercado não é adequado.

Texto e frases#

Todo texto que uma pessoa lê deve fazer parte do catálogo de origem, sob uma chave, e ser renderizado pela função de tradução do projeto. Isso inclui rótulos, títulos, botões, mensagens, erros exibidos às pessoas, placeholders, alt texto e rótulos ARIA. Códigos: hardcoded_text.

Uma frase equivale a uma mensagem. A ordem das palavras varia entre os idiomas, portanto uma frase montada a partir de partes não pode ser traduzida. Passe valores como placeholders e contagens como formas plurais. Códigos: concatenated_text.

// Not world-ready: English word order and English plurals
'You have ' + count + ' new ' + (count === 1 ? 'message' : 'messages');

// World-ready: one ICU message
t('inbox.new', { count });
// "inbox.new": "{count, plural, one {You have # new message} other {You have # new messages}}"

Os idiomas precisam de formas plurais diferentes: o inglês tem duas, o árabe seis e o japonês uma. Escreva a mensagem de origem com pluralização ICU e o mecanismo adicionará as formas necessárias para cada idioma.

Números#

Os mercados escrevem o mesmo número de maneiras distintas: 1.234,5 nos Estados Unidos, 1.234,5 na Alemanha, 1 234,5 na Suécia e França, e com outros dígitos em alguns mercados árabes. Formate de acordo com a localidade do leitor. Códigos: locale_number.

new Intl.NumberFormat(locale).format(1234.5);
new Intl.NumberFormat(locale, { style: 'percent' }).format(0.25);

Leia um número digitado por uma pessoa com a mesma localidade ou use um campo de entrada numérica, cujo valor é normalizado pelo navegador. parseFloat('1,5') é 1, não um e meio. Códigos: locale_parsing.

Datas, horários e fusos horários#

A ordem das datas, os separadores, os nomes dos meses, o relógio de 12 ou 24 horas e o calendário variam em cada lugar. Formate de acordo com a localidade do leitor e nunca use um padrão fixo como MM/dd/yyyy. Códigos: locale_date.

new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short', timeZone }).format(when);

• Armazene instantes em UTC, como ISO 8601 com um deslocamento, e formate-os no fuso horário do leitor. Calcule "hoje" e os limites diários nesse fuso horário, não no do servidor.
• As semanas começam em dias diferentes: domingo nos Estados Unidos, segunda-feira na maior parte da Europa e sábado em partes do Oriente Médio. Os fins de semana também variam. Consulte ambos na localidade (new Intl.Locale(locale).getWeekInfo() quando disponível, ou nos dados de localidade da sua biblioteca de datas), nunca use um valor constante. Códigos: calendar_names.
• Nomes de dias da semana e meses vêm da localidade (Intl.DateTimeFormat(locale, { weekday: 'long' })), não de uma lista no código. Códigos: calendar_names.
• Calendários. Arábia Saudita, Israel e Japão usam o calendário gregoriano junto com os calendários Umm al-Qura, hebraico e japonês; a Tailândia e o Irã usam por padrão os calendários budista e persa. A cultura indica qual calendário é utilizado em cada mercado.

Moeda#

Formate valores monetários com a moeda e a localidade do leitor, nunca coloque um símbolo ao lado do número. O mesmo valor é exibido como $1,234.50, 1.234,50 $ ou US$1,234.50 dependendo do leitor, e muitos mercados compartilham o mesmo símbolo. Códigos: hardcoded_currency.

new Intl.NumberFormat(locale, { style: 'currency', currency }).format(1234.5);

A moeda é uma decisão de negócios, não de formatação: alterar a localidade do leitor não deve converter os preços. A cultura registra em qual moeda cada mercado efetua pagamentos.

Ordenação, comparação e caixa alta/baixa#

Cada idioma tem sua própria forma de ordenação: o sueco coloca å, ä e ö após z, o alemão ordena ä junto com a e o chinês ordena por pinyin ou por traços. Ordene o texto que as pessoas leem de acordo com a localidade do leitor. Códigos: ordinal_sort.

names.sort(new Intl.Collator(locale).compare);

O mapeamento de caixa alta/baixa também depende do idioma: em turco, a versão maiúscula de i é İ. Use toLocaleUpperCase(locale) para o texto que as pessoas leem. Códigos: case_mapping.

Listas#

"Anna, Ben e Chen" é escrito de maneira diferente em cada idioma. Junte as listas de acordo com a localidade. Códigos: joined_list.

new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' }).format(names);

Nomes, endereços, códigos postais e números de telefone#

• Nomes. Em muitos mercados, o sobrenome vem primeiro e muitas pessoas têm apenas um nome ou mais de dois. Receba o nome completo em um único campo, a menos que o mercado precise de suas partes separadas. Aceite todos os sistemas de escrita: Åsa, José, 王 e Мария são todos nomes válidos. Códigos: latin_only_input.
• Endereços. Os campos, sua ordem e seus nomes variam: um estado e CEP nos Estados Unidos, uma prefeitura no Japão e nenhum código postal em alguns mercados. A cultura define como o correio de cada mercado escreve o endereço. Não exija campos que um mercado não utilize.
• Códigos postais. Mantenha-os como texto e valide-os por país ou nem os valide. Um padrão de cinco dígitos exclui a maior parte do mundo. Códigos: postal_code_format.
• Números de telefone. Armazene-os no formato E.164 (+46 8 123 456 78), formate e valide-os com uma biblioteca que conheça o plano de numeração de cada país, como a libphonenumber. Um padrão como (555) 555-1234 Recusa todos os números fora da América do Norte. Códigos: phone_number_format.

Unidades e papel#

A maior parte do mundo utiliza quilômetros, quilogramas e graus Celsius; os Estados Unidos usam milhas, libras e graus Fahrenheit; o Reino Unido combina ambos. Use a unidade da região do leitor e formate-a de acordo com a localidade. Códigos: fixed_unit.

new Intl.NumberFormat(locale, { style: 'unit', unit: 'kilometer' }).format(12);

A impressão e o PDF seguem o padrão de papel do mercado: Letter na América do Norte e A4 em quase todos os outros lugares. Códigos: paper_size.

Métodos de entrada e fontes#

Chinês, japonês e coreano são digitados por meio de um editor de método de entrada: o usuário pressiona Enter para selecionar uma palavra, não para enviar. Um manipulador que envia dados ao pressionar Enter deve ignorar esse comando enquanto a palavra estiver sendo composta. Códigos: ime_composition.

onKeyDown={event => {
  if (event.key === 'Enter' && !event.nativeEvent.isComposing) submit();
}}

Escolha fontes que cubram todos os scripts que você distribui ou recorra às fontes do sistema que façam isso; árabe, chinês, hebraico, japonês, coreano e tailandês exigem fontes específicas. Deixe espaço na altura da linha para scripts com marcas altas, não dependa de itálico (chinês e japonês não têm) e nunca coloque texto em imagens, pois elas não podem ser traduzidas.

Direita para esquerda#

Árabe e hebraico são escritos da direita para a esquerda, e todo o layout se espelha de acordo com eles: navegação, alinhamento, ícones que indicam direção e ordem das colunas.

• Defina dir="rtl" no elemento raiz para esses idiomas, e lang para cada idioma.
• Use propriedades lógicas: margin-inline-start em vez de margin-left, padding-inline-end, inset-inline-start, text-align: start, float: inline-start, e as classes utilitárias lógicas da sua estrutura CSS (ms-4, pe-2, text-start). Códigos: physical_direction, unmirrored_layout.
• Espelhe ícones que indicam direção, como setas e chevrons, mas não outros, como relógios ou botões de reprodução.
• Números, códigos, URLs e nomes em alfabeto latino permanecem da esquerda para a direita dentro de texto da direita para a esquerda. Isole o texto de pessoas ou dados em <bdi> para que ele não reordene o conteúdo ao seu redor.

Espaço para expansão#

As traduções costumam ser mais longas que o inglês, e os rótulos curtos são os que mais crescem: um 'OK' em alemão pode virar uma palavra inteira, e um rótulo de dez caracteres pode dobrar de tamanho. Dê espaço ao texto: permita que ele quebre de linha, deixe botões e abas expandirem conforme os rótulos e evite larguras e alturas fixas para texto. Não trunque rótulos necessários para a ação do usuário. Códigos: clipped_text.

O pseudotradução alonga cada cadeia de caracteres nesses valores, para que você veja o problema antes de um tradutor trabalhar:

Chinês, japonês e coreano costumam ser mais curtos, mas exigem linhas mais altas.

Uma lista de verificação para cada alteração.#

• O texto que as pessoas leem vem do catálogo, e cada frase constitui uma mensagem.
• Números, datas, horários, moedas, unidades e listas são adaptados conforme a localidade do leitor.
• A ordenação e o mapeamento de maiúsculas/minúsculas seguem a localidade do leitor.
• Nomes, endereços, CEPs e números de telefone são compatíveis com todos os mercados.
• A tecla Enter não envia o formulário enquanto uma palavra estiver sendo composta.
• O layout utiliza propriedades lógicas e reserva espaço para textos mais longos.

Relacionado#

• A verificação de Globalização
• Pseudo-Localização
• Prontidão global e cultura
• Globalização