Un botón que dice “Save” en inglés se convierte en “Speichern” en alemán y “Guardar cambios” en español. Si tu diseño se pensó para la longitud del inglés, la traducción lo rompe, normalmente después del lanzamiento y en un mercado que no puedes probar fácilmente.
¿Cuánto crece el texto?
Los textos cortos son los que más crecen. La pauta clásica de IBM: los textos de hasta 10 caracteres pueden crecer entre 100 y 200%, los de 11 a 20 caracteres alrededor de 80–100%, y los párrafos de más de 70 caracteres cerca de un 30%. El alemán es en promedio un 30% más largo que el inglés; el español y el francés, alrededor de 15–25%.
El CSS que se rompe
- Anchos fijos en botones, pestañas, etiquetas y badges (width: 120px).
- white-space: nowrap combinado con overflow: hidden, que corta el texto sin avisar.
- Barras de navegación que asumen que todo cabe en una línea.
- Encabezados de tabla con anchos de columna fijos.
- Armar frases por partes (“You have ” + n + “ items”): el orden de las palabras cambia entre idiomas.
Alternativas resistentes
- min-width en vez de width, y permite que los botones crezcan en alto (min-height, line-height ~1.2).
- flex-wrap en navegaciones y filas de acciones; barras de pestañas con scroll horizontal en vez de pestañas apretadas.
- overflow-wrap: anywhere y hyphens: auto con el atributo lang correcto, para que las palabras compuestas largas del alemán se corten bien.
- Coloca las etiquetas encima de los campos cuando falte espacio, en vez de darles un ancho fijo.
- Usa puntos suspensivos solo para datos del usuario (nombres, archivos) y muestra el texto completo.
Detéctalo a tiempo con pseudolocalización
Antes de tener traducciones, reemplaza el inglés por texto con acentos, relleno y corchetes: “Save” se convierte en “⟦Šáṽé lorem⟧”. Los corchetes cortados revelan recortes, el texto sin acentos revela textos fijos en el código y el relleno simula la expansión. Úsalo en tus revisiones de diseño y pruebas visuales.
No olvides
- Fechas, números y monedas cambian de formato según el idioma: usa Intl.DateTimeFormat e Intl.NumberFormat.
- Los idiomas de derecha a izquierda invierten el diseño; usa propiedades lógicas (margin-inline-start) desde el principio.
- Define el atributo lang en la página (y en cualquier fragmento en otro idioma) para que los lectores de pantalla pronuncien bien.