Uma tradução pseudo substitui cada string por um texto falso reconhecível. Em um idioma de esquerda para direita, cada letra recebe acento e a string aumenta dentro de parênteses: Salvar alterações vira ⟦Šáṽé çĥáñĝéš··········⟧. Em um idioma de direita para esquerda, cada string é invertida com uma sobrescrita de direção, fazendo com que a página seja lida da direita para a esquerda mesmo antes do árabe ou hebraico existirem.
Em uma página renderizada dessa forma, três problemas ficam visíveis:
- Texto simples não veio do catálogo: foi escrito no código ou gerado em tempo de execução.
- Texto cortado não deixou espaço para idiomas mais longos.
- Layout que permanece fixo em uma página de direita para esquerda usa esquerda e direita em vez de início e fim.
Frete grátis em todo pedido
Salvar alterações⟦Šáļṽáŕ áļţéŕáçõéš··············⟧Os preços incluem impostos.⟦Óš þŕéçóš íñçļúéɱ íɱþóšţóš.·················⟧
Frete grátis em todo pedido
Salvar alteraçõesSalvar alteraçõesOs preços incluem impostos.Os preços incluem impostos.
- Texto que não veio do catálogo/{locale}/ · p#promo · “Frete grátis em todo pedido” · runtime_text (de-DE, ar-SA)
- Texto cortado quando aumenta/{locale}/ · button#save · “⟦Šáļṽáŕ áļţéŕáçõéš··············⟧” · clipped_text (de-DE)
- Layout que não espelha para a direita para a esquerda/{locale}/ · p#note · “padding-left: 12px” · unmirrored_layout (ar-SA)
O que as páginas pseudotraduzidas mostram: a mesma página em alemão, com todas as strings acentuadas e mais longas, e em árabe, invertida da direita para a esquerda. A sonda marca o texto escrito no código, um botão que corta seu texto e uma regra que permanece à esquerda. Dados ilustrativos.
Na verificação de Globalização
Quando o arquivo de configuração indica como iniciar o aplicativo, o Verificação de Globalização renderiza suas páginas a cada alteração e as verifica. Ele opera em uma cópia da alteração dentro da própria área de isolamento da verificação, de modo que a tradução pseudo nunca chegue ao seu repositório ou a outras verificações:
- Ele grava a tradução pseudo em um idioma de esquerda para direita e em um idioma de direita para esquerda do projeto.
- Ele instala as dependências e inicia o aplicativo.
- Ele abre cada página nos dois idiomas em um navegador configurado para esse idioma e lê o que está na tela.
- Ele para o aplicativo e exclui a cópia.
O que ele encontra se torna os resultados da verificação:
| Código | O que é encontrado |
|---|---|
runtime_text | Texto visível sem as marcas pseudo |
clipped_text | Texto pseudo cortado pela sua caixa, com overflow oculto ou um reticências |
unmirrored_layout | Em uma página de direita para esquerda: uma página que não é de direita para esquerda, texto alinhado ou flutuante à esquerda ou à direita, ou um elemento posicionado, com margem ou preenchimento definido por esquerda ou direita |
O mesmo texto encontrado nos dois idiomas constitui um resultado. Os resultados aparecem nas Problemas encontrados da tarefa, incluindo a página, o elemento, o texto e os idiomas, como /{locale}/ · p#promo · “Free shipping on every order” · runtime_text (de-DE, ar-SA).
Eles são reportados e não bloqueiam nada até você decidir. Sob Controle de Qualidade → Globalização, Renderizar páginas desativa a etapa, e Problemas de página que devolvem a alteração para correção escolhe quais códigos devem bloquear.
Um aplicativo que não instala ou inicia é reportado como não renderizado, com sua saída, nunca como uma renderização limpa. Ele retém a alteração somente quando você bloqueia problemas de página.
Configure-o
Adicione world.render em .coroid/i18n.json:
{
"world": {
"render": {
"start": "npm run dev",
"pages": ["/{locale}/", "/{locale}/pricing", "/{locale}/checkout"]
}
}
}| Campo | Significado |
|---|---|
start | Inicia o aplicativo. Ele deve escutar na porta definida em $PORT; HOST é 127.0.0.1 |
pages | Até dez caminhos, a partir da raiz do aplicativo. {locale} se torna a tag do idioma, portanto /{locale}/pricing abre /de-DE/pricing; use /?lang={locale} caso o idioma seja um parâmetro de consulta |
directory | A pasta do aplicativo no repositório, quando não for a raiz |
install | O comando que instala as dependências. Sem ele, o Coroid executa o npm quando um package.json declara alguma |
locales | Até três idiomas de destino para renderização. Sem isso, o primeiro idioma da esquerda para a direita e o primeiro da direita para a esquerda são usados |
readyTimeoutMs | O tempo máximo que o aplicativo pode levar para responder, 120.000 por padrão |
O navegador também envia cada idioma como seu idioma preferido; assim, um aplicativo que
seleciona o idioma a partir do navegador funciona sem {locale}.
O campo requer CLI 1.16.0 ou versão posterior na configuração de cli pin; um mecanismo mais antigo
recusa a configuração.
O que foi omitido
A verificação lê apenas o que uma pessoa vê. Ela ignora elementos ocultos, código
(code, pre, kbd, samp), os valores próprios dos campos de formulário e os elementos marcados
translate="no", aria-hidden="true", data-i18n-ignore ou com a classe
notranslate. As palavras na lista de configuração de world.allow , como nomes de produtos,
nunca são relatadas como texto simples.
O texto proveniente de seus próprios dados, como nomes de produtos ou conteúdo do usuário,
não é traduzido pelo catálogo tampouco. Marque seu contêiner translate="no" ou
data-i18n-ignore, o que também indica às ferramentas de tradução do navegador para deixá-lo inalterado.
Experimente você mesmo
A tradução pseudo faz parte da ferramenta de linha de comando. Execute-a em um checkout temporário, pois ela substitui as traduções do idioma:
coroid-i18n pseudo --locale de-DE # accented and longer
coroid-i18n pseudo --locale ar-SA # reversed, right to left
coroid-i18n pseudo --locale de-DE --style rtl # choose the style yourselfEm seguida, inicie o aplicativo e abra suas páginas nesse idioma. Os placeholders, formas plurais e a marcação permanecem intactos, de modo que o aplicativo funcione normalmente. As páginas Markdown e MDX permanecem como estão.