El texto traducido rara vez tiene la misma longitud que el original. El alemán y el holandés son notablemente más largos que el inglés, el finlandés y el ruso aún más, y el chino y el japonés mucho más cortos. Un diseño que se ajusta perfectamente a su texto en inglés no tiene espacio para lo adicional, por lo que se dobla, se desborda o se recorta. No hay nada malo con la traducción; el diseño no tenía margen.
Dónde aparece primero
Navegación. Un menú que apenas cabe en inglés se divide en dos líneas, o los elementos se deslizan debajo del logo. El síntoma único más común.
Botones y llamadas a la acción. Los botones de ancho fijo recortan su etiqueta, o el texto se divide y el botón se vuelve más alto que la fila en la que se encuentra.
Tarjetas en una cuadrícula. El encabezado de una tarjeta ocupa una línea adicional y las tarjetas de esa fila dejan de tener la misma altura.
Tablas. Los encabezados de columna son palabras cortas en inglés y frases en otros idiomas, por lo que una tabla que cabía comienza a desplazarse.
Cualquier cosa posicionada absolutamente. El texto superpuesto, las insignias y las cintas se colocan para una longitud de cadena específica y no se mueven cuando la cadena cambia.
Cómo solucionarlo
Permite que los contenedores crezcan. Reemplaza width y height fijos en elementos que contienen texto con min-width, min-height o nada en absoluto. Este único cambio soluciona la mayoría de los casos.
Dirígete al idioma, no al sitio. El elemento <html> en una página traducida lleva un atributo lang, por lo que puedes ajustar solo el idioma que lo necesita y dejar los demás en paz. El valor incluye la región en minúsculas, como de-de, de-at o es-mx, así que coincide con el inicio en lugar del valor completo:
/* 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 aplicar estilo a una sola región, coincide con el valor completo: html[lang="de-at"].
Permite que las palabras largas se dividan. Los sustantivos compuestos en alemán y finlandés pueden exceder una columna estrecha por sí solos:
.card h3 {
overflow-wrap: break-word;
hyphens: auto;
}
Verifica de derecha a izquierda por separado. Nueve de los idiomas admitidos invierten la dirección, lo cual es una clase de problema diferente a la longitud. Consulta Idiomas de derecha a izquierda.
Cuando el texto en sí es el problema
Si una traducción es mucho más larga de lo necesario, acorta esa cadena en lugar de rediseñar. Editarla manualmente es la solución directa, y se mantiene: la traducción normal de la página nunca reemplaza una cadena que ya tiene una traducción. Elegir Volver a traducir con IA en esa fila la reemplaza. Consulta Editar traducciones manualmente.
Para un término que no debería haberse traducido en absoluto, y que ahora está estirando un botón, una regla de glosario lo mantiene tal cual en todas partes. Consulta Reglas de glosario.
Verificación antes de lanzar un idioma
Abre dos o tres de tus páginas más densas en cuanto a diseño en el idioma más largo que admitas, con una ventana de ancho estrecho. El alemán es una buena prueba de estrés si lo tienes. Lo que sea que sobreviva a eso, usualmente sobrevive a todo lo demás.