O texto traduzido raramente tem o mesmo comprimento do original. Alemão e holandês ficam notavelmente mais longos que o inglês, finlandês e russo ainda mais, e o chinês e o japonês bem mais curtos. Um layout que se ajusta perfeitamente ao texto em inglês não tem espaço para o extra, então ele quebra, transborda ou é cortado. Nada está errado com a tradução; o design não tinha margem.
Onde aparece primeiro
Navegação. Um menu que se encaixa perfeitamente em inglês quebra em duas linhas, ou os itens deslizam sob o logo. O sintoma único mais comum.
Botões e chamadas para ação. Botões de largura fixa cortam o rótulo, ou o texto quebra e o botão fica mais alto que a linha em que está.
Cartões em uma grade. O título de um cartão ocupa uma linha extra e os cartões dessa linha param de ter a mesma altura.
Tabelas. Os cabeçalhos das colunas são palavras curtas em inglês e frases em outros idiomas, então uma tabela que cabia começa a rolar.
Qualquer coisa com posicionamento absoluto. Texto sobreposto, selos e faixas são posicionados para um comprimento de string e não se movem quando a string muda.
Corrigindo
Permita que os contêineres cresçam. Substitua width e height fixos em elementos que contêm texto por min-width, min-height ou nada. Essa única mudança corrige a maioria dos casos.
Mire na linguagem, não no site. O elemento <html> em uma página traduzida carrega um atributo lang, então você pode ajustar apenas a linguagem que precisa e deixar as outras em paz. O valor inclui a região em minúsculas, como de-de, de-at ou es-mx, então combine com o início dele em vez do valor inteiro:
/* Give the German nav more room without touching other languages */
html[lang^="de"] .site-nav a {
font-size: 0.9rem;
letter-spacing: -0.01em;
}
Para estilizar apenas uma região, combine o valor inteiro: html[lang="de-at"].
Permita que palavras longas quebrem. Substantivos compostos em alemão e finlandês podem exceder uma coluna estreita por conta própria:
.card h3 {
overflow-wrap: break-word;
hyphens: auto;
}
Verifique o da direita para a esquerda separadamente. Nove dos idiomas suportados invertem a direção, o que é uma classe de problema diferente do comprimento. Veja Idiomas da direita para a esquerda.
Quando o texto em si é o problema
Se uma tradução for muito mais longa do que o necessário, encurte essa string em vez de refazer o design. Editá-la manualmente é a correção direta, e ela permanece: a tradução normal da página nunca substitui uma string que já tem uma tradução. Escolher Retraduzir com IA nessa linha a substitui. Veja Editar traduções manualmente.
Para um termo que não deveria ter sido traduzido, e que agora está esticando um botão, uma regra de glossário o mantém como está em todos os lugares. Veja Regras de glossário.
Verificando antes de lançar um idioma
Abra duas ou três das suas páginas com maior densidade de layout no idioma mais longo que você suporta, com uma largura de janela estreita. Alemão é um bom teste de estresse se você o tiver. O que quer que sobreviva a isso geralmente sobrevive a todo o resto.