Cómo diseñar para la expansión del texto

La expansión del texto se convierte en un problema de composición cuando una interfaz depende de que su redacción original ocupe una cantidad exacta de espacio. Un botón breve en inglés cabe. Una traducción más larga se recorta. Una fila de pestañas ordenadas se amontona, o una tarjeta crece mientras su acción sigue anclada en la posición anterior.

No necesitas esperar a tener todas las traducciones para revisar esa rigidez. Puedes someter un borrador a una prueba con texto deliberadamente más largo y después repetir la revisión con traducciones reales. El primer paso descubre debilidades estructurales; el segundo comprueba si la interfaz funciona con el lenguaje y el significado reales.

Por qué no basta con un único porcentaje de expansión

No existe un porcentaje único que prepare una interfaz para todos los idiomas. Las etiquetas cortas, las frases largas, las palabras compuestas y los distintos sistemas de escritura generan presiones diferentes. Contar caracteres tampoco indica exactamente cuánto espacio necesitará el texto renderizado.

La explicación del W3C sobre el tamaño del texto traducido describe por qué las cadenas breves del idioma de origen pueden expandirse considerablemente y por qué importan la anchura de los caracteres, la estructura de las palabras y el interlineado. Sus ejemplos son advertencias útiles, no una calculadora para tu interfaz concreta. Revisa la combinación real de contenido y fuente antes de considerar preparado un componente.

Imagina un panel de eventos ficticio con un botón llamado «Ver detalles». Una etiqueta más larga podría requerir un botón más ancho o una segunda línea. A la vez, el título del evento podría pasar de dos líneas a tres. Son cambios diferentes, con consecuencias diferentes. Reservar el mismo porcentaje de espacio adicional en cada elemento no decide cómo debe comportarse ninguno de ellos.

Identifica primero qué deben comunicar las palabras. Si una etiqueta distingue entre consultar una reserva y modificarla, esa diferencia debe mantenerse. Si una advertencia explica que una acción no se puede deshacer, no se puede eliminar ese significado para conservar la altura original de la tarjeta. La composición está al servicio del mensaje.

Haz un pequeño inventario de componentes vulnerables

Empieza por los lugares donde el espacio está muy controlado. La navegación, las pestañas, los botones, las insignias, las etiquetas de formulario, los encabezados de tabla y las tarjetas pequeñas suelen ser casos de prueba más informativos que una columna de párrafos amplia. Busca ejemplos en los que el texto esté junto a un icono, un precio, un estado u otra acción.

Para cada componente, registra cuatro comportamientos:

1. Saltos de línea: ¿puede la etiqueta ocupar otra línea?
2. Crecimiento: ¿el contenedor aumenta su altura o anchura con ella?
3. Elementos vecinos: ¿el icono y la acción contigua se desplazan sin problemas?
4. Límites: si se limita el número de líneas, ¿dónde puede leerse el texto completo?

Una pregunta sin respuesta es una decisión de diseño pendiente; quizá la etiqueta breve en inglés simplemente la había ocultado.

Después, anota el coste del fallo. Una etiqueta decorativa que se hace más alta no equivale a un importe de pago tapado por una etiqueta. Prioriza los componentes que transmiten decisiones, requisitos o acciones. Así evitas dedicar la primera hora de una revisión de localización a pulir variaciones inofensivas mientras un control clave sigue siendo ilegible.

Qué descubrió Shopify antes de recibir las traducciones

En el relato de Shopify sobre la internacionalización de su producto, el equipo describe un problema fácil de pasar por alto en una vista previa en inglés: las cadenas extraídas parecían idénticas a las escritas directamente en el código. Introdujeron una pseudotraducción que sustituía caracteres por otros reconocibles y duplicaba las vocales. El texto alterado les ayudaba a ver qué cadenas pasaban por la traducción y a inspeccionar la interfaz con palabras más largas.

La pseudotraducción detecta pronto una clase útil de defectos: texto que nunca entra en el sistema de traducción, controles que dependen de palabras cortas y contenedores que no pueden crecer. No permite saber si una instrucción en francés es natural ni si una composición en árabe tiene el orden de lectura correcto.

Merece la pena observar qué sigue siendo reconocible en la captura. Una persona que hace pruebas todavía puede entender la pantalla a pesar de los caracteres inusuales. Eso facilita completar una tarea normal y detectar los fallos durante el proceso. Llenar todas las cajas con cadenas aleatorias generaría presión, pero también impediría juzgar si la acción y la explicación siguen teniendo sentido juntas.

Usa el enfoque de Shopify para separar cuatro comprobaciones:

• Cobertura: el pseudotexto marcado visualmente revela las cadenas que nunca se transformaron.
• Capacidad: la redacción expandida comprueba si los controles y contenedores pueden crecer.
• Renderizado: el sistema de escritura previsto y la fuente de sustitución ponen de manifiesto glifos ausentes o cajas de línea que recortan el texto.
• Idioma: las traducciones aprobadas permiten a una persona que domine el idioma evaluar el significado y la redacción.

Un conjunto práctico de pruebas para una interfaz

Elige una página con un título, pestañas, una insignia de estado, dos acciones y un error. Conserva sus valores y destinos y cambia únicamente el texto que estés revisando.

Vincula cada defecto a la cadena y al estado que lo produjeron. «La acción secundaria en francés tapa la acción principal a 390px después de la validación» indica al desarrollador dónde empezar. «El francés necesita más espacio» no distingue entre una anchura de botón fija, una fila de acciones inflexible o un error mal colocado.

Después de corregirlo, vuelve a probar también el texto corto. Un botón que ocupa todo el ancho puede resolver la etiqueta más larga y parecer desconectado en una pantalla grande. Una tarjeta con una altura fija generosa puede admitir una traducción y dificultar el recorrido visual de los registros normales. Prefiere el crecimiento según el contenido y un comportamiento vertical definido; reserva la capacidad fija para situaciones con una restricción real, como una superficie incrustada en un contenedor externo.

Antes de la revisión lingüística, proporciona al traductor el destino de la acción y la frase que la rodea. «Open» puede describir un estado o expresar una orden. Esa ambigüedad no se corrige ensanchando el botón. Las comprobaciones visuales y lingüísticas deben informarse mutuamente, sin pedir a ninguno de los revisores que certifique un trabajo que no puede evaluar.

Mantén controlada la prueba de exigencia

Usa un título de evento más largo, un nombre de lugar más largo y una etiqueta de acción más descriptiva. Mantén fijas las fechas y las cantidades de participantes durante la primera comparación, de modo que la longitud del texto sea la variable que investigas. Una vez que funcione la composición, añade los formatos de fecha localizados en una pasada independiente.

Usa inglés expandido para detectar la presión sobre la composición y después revisa traducciones reales para comprobar la naturalidad, el significado y el renderizado propio de cada sistema de escritura.

Elige una respuesta para cada componente

La misma cadena más larga no debería desencadenar la misma reparación en todas partes. Un botón puede crecer; la navegación puede cambiar de disposición; una tarjeta puede necesitar otra línea. Empieza por la relación que debe conservarse.

Botones: crecer, admitir varias líneas o apilarse

Los botones necesitan una regla para las etiquetas más largas. Una anchura fija puede ser útil en un grupo alineado de forma deliberada, pero se vuelve frágil cuando esa anchura se considera más importante que la etiqueta. Revisa la acción dentro de su composición antes de decidir si el botón debe crecer, admitir saltos de línea o cambiar de posición.

En una pareja de acciones debajo de un formulario, colocarlas una sobre otra en una pantalla estrecha puede resultar más claro que comprimirlas en una fila. Si una acción es la principal, conserva su protagonismo después de apilarlas. El visitante no debería tener que deducir la importancia a partir de una disposición de escritorio que ya no existe.

Una etiqueta de varias líneas no es incorrecta por definición. Puede funcionar si el botón tiene altura suficiente, un relleno equilibrado y una conexión clara con el contenido sobre el que actúa. Sin embargo, una colección de botones diminutos de dos líneas puede resultar difícil de recorrer visualmente. Si varias acciones necesitan explicaciones largas, reconsidera si todas deben estar en el mismo grupo compacto.

Evita sustituir etiquetas con significado por iconos sin explicación solo para ahorrar anchura. Un icono puede ser adecuado para una acción conocida en un contexto apropiado, pero cambiar la presentación introduce un nuevo problema de reconocimiento. Evalúa esa contrapartida de manera deliberada, en lugar de tratarla como una forma neutral de hacer desaparecer la traducción.

Para una comprobación concreta de tamaño, medí tres etiquetas en inglés en Albert Sans a 32px con 20px de relleno horizontal a cada lado. «View details» necesita 212px en total; «Review booking details», 368px; «Review your booking details», 440px. Un botón de anchura fija de 220px deja solo 180px para la etiqueta, por lo que la primera cabe y las otras necesitan una respuesta de composición. Estas etiquetas de prueba en inglés aíslan la presión de anchura; no son traducciones. La parte más oscura de cada barra representa el texto medido y la más clara, el relleno. En una página estrecha, compara la anchura resultante con el espacio disponible del grupo de acciones antes de elegir entre crecer, permitir varias líneas o apilar los botones.

Navegación: cambia antes de que los elementos choquen

La navegación suele revelar pronto la expansión del texto porque muchas etiquetas compiten por una misma fila horizontal. Una cabecera que apenas admite su idioma de origen tiene poca capacidad para una redacción más larga. Puede necesitar cambiar antes de presentación en otro idioma o usar una composición que se adapte al espacio disponible.

Revisa la cabecera completa, incluidos la marca, el selector de idioma, la acción de cuenta y cualquier enlace promocional. Revisar solo las etiquetas de navegación puede dejar fuera la colisión real. Una etiqueta de cuenta algo más larga puede ser el elemento que obliga a comprimir todo lo demás de forma incómoda.

No acortes las etiquetas por separado solo para conservar anchuras iguales. Un traductor puede elegir otras palabras para preservar el significado, y las etiquetas resultantes pueden no ser visualmente simétricas. Es razonable que un elemento de navegación ocupe más espacio si el grupo sigue siendo comprensible y utilizable.

En las pestañas, considera si distribuirlas en varias líneas crea ambigüedad. Dos filas de pestañas pueden hacer menos evidente qué contenido corresponde al elemento seleccionado. Según la tarea, puede ser más adecuado otro control o un tratamiento de desplazamiento deliberado. Lo fundamental es examinar juntos el estado seleccionado y el contenido de destino, no limitarse a comprobar que todas las palabras sean visibles.

Tarjetas: conserva la identidad y la acción

Las tarjetas repetidas generan presión para que todos los elementos tengan exactamente la misma altura. Eso puede facilitar el recorrido visual, pero importa cómo se consigue. Recortar texto significativo para conservar la cuadrícula puede hacer que las tarjetas sean más fáciles de alinear y más difíciles de distinguir al elegir.

En el panel de eventos, supongamos que un nombre ocupa tres líneas y otro, una. La acción puede seguir estando en una posición previsible si la tarjeta distribuye el espacio con cuidado. La zona del título debe poder crecer, y la relación entre el título, la fecha y la acción debe seguir clara.

Decide qué texto se puede abreviar y cómo acceder a la versión completa. La vista previa de una descripción larga no equivale al título que identifica el evento. Si dos eventos se vuelven indistinguibles después del truncamiento, el componente ha perdido información necesaria para elegir. Los puntos suspensivos no explican la diferencia que falta.

Revisa por separado las insignias y las etiquetas de estado. Un estado más largo no debe tapar el nombre del evento ni sacar la fecha de la tarjeta. Pasar la insignia a una fila propia puede ser mejor que reducir su letra. Después del cambio, revisa también una tarjeta con una etiqueta corta, para que la reparación no cree un exceso de espacio vacío en las demás.

Formularios: prueba juntos etiquetas, indicaciones y errores

Los formularios son especialmente sensibles a la longitud del texto porque alrededor de un mismo control aparecen varios tipos de contenido. Una etiqueta identifica el campo, una indicación explica qué se espera introducir y un error describe una corrección. Todos ellos pueden alargarse en otro idioma.

Comprueba cada estado con los demás presentes. Un campo que se ve bien solo con su etiqueta puede resultar confuso al añadir debajo una indicación y un error traducidos. El lector debe seguir pudiendo distinguir qué información corresponde a cada campo y dónde continuar después de corregirlo.

Las etiquetas y controles colocados uno al lado del otro pueden necesitar una disposición vertical cuando la etiqueta se alarga. Es una decisión estructural, no una señal de mala traducción. Si conservas la disposición horizontal, da tanto a la etiqueta como al control espacio suficiente para cumplir sus funciones. Una etiqueta amplia junto a un campo de entrada inutilizable por su estrechez no supone una mejora.

Conserva las diferencias entre los mensajes de error. «Obligatorio», «Demasiado largo» y «No se ha podido guardar» describen problemas distintos. Una revisión de localización no debería comprimirlos en una frase genérica breve solo porque la zona de error tenga una altura fija. Deja que esa zona comunique el problema concreto y crezca con el mensaje.

Mantén números, unidades y nombres en contexto

La expansión del texto no se limita a las frases. Las fechas, las monedas, los nombres y las unidades pueden cambiar el espacio y el orden que necesita un componente. Trátalos como ejemplos de contenido que hay que revisar para la configuración regional pertinente, no como valores que el diseñador deba improvisar de memoria.

Una línea de precio puede combinar un importe monetario, un periodo de facturación y una precisión. Si esa precisión pasa a otra línea, comprueba que siga asociándose claramente con ese precio. En el ejemplo del evento, un intervalo de fechas puede necesitar más espacio que una fecha única. Mantener juntos la etiqueta y el valor puede ser más importante que ahorrar una línea en toda la tarjeta.

Usa nombres representativos aportados por usuarios, en lugar de suponer un número fijo de palabras cortas. Una composición que solo funciona con «Alex Lee» no ha demostrado que los nombres más largos vayan a ser legibles. Considera dónde debe mantenerse visible el nombre completo y dónde es aceptable una representación compacta para la tarea.

Evita concatenar fragmentos en la especificación visual como si el orden del idioma de origen fuera universal. Una frase construida con un número, un sustantivo y un sufijo breve puede necesitar otra estructura al traducirse. Entrega el significado previsto y el contexto para que la traducción produzca un mensaje coherente, en lugar de tener que reorganizar piezas desconectadas sin orientación.

Los consejos rápidos de internacionalización del W3C cubren fundamentos relacionados, entre ellos las declaraciones de idioma, la separación entre contenido y presentación y el cuidado con las cadenas ensambladas.

Deja espacio en vertical, además de en horizontal

Una reparación habitual consiste en aumentar la anchura y dejar fijas todas las alturas. Puede ayudar a una etiqueta y dejar otra recortada cuando cambie su número de líneas. Revisa el flujo vertical de toda la sección: un título más largo puede empujar hacia abajo un subtítulo, un grupo de acciones y la sección siguiente.

Permite que la página absorba ese crecimiento siempre que la tarea lo admita. Que una tarjeta se haga más alta suele ser menos perjudicial que perder una frase crucial. Si la altura debe mantenerse limitada, define expresamente el comportamiento alternativo; por ejemplo, trasladar los detalles secundarios a una vista aparte y mantener visible la información identificativa.

Examina la parte superior e inferior de los caracteres realmente renderizados. Una caja puede parecer suficientemente grande para las palabras y, aun así, cortar un acento o una parte de un glifo. Cambiar la fuente, el sistema de escritura o el peso puede revelar ese problema. Una captura realizada con la fuente del idioma de origen no es evidencia suficiente para otro sistema de escritura.

No obligues a todos los idiomas a imitar el número exacto de líneas de la página original. El diseño debe conservar la jerarquía, las relaciones y la usabilidad. Algunas variaciones en la altura de las secciones y los saltos de línea son una consecuencia razonable de comunicar el mismo significado con textos diferentes.

Combina las pruebas de localización con la revisión de anchuras

Una traducción que funciona en escritorio puede fallar en un teléfono. Prueba los componentes vulnerables en una vista estrecha, una intermedia y una ancha; después revisa las anchuras en las que cambia la composición. Mantén seleccionado el mismo idioma mientras completas una tarea, para detectar relaciones que una colección de capturas aisladas no mostraría.

Separa las observaciones en problemas de idioma y de composición. Si la redacción suena poco natural, necesita revisión lingüística. Si una etiqueta bien redactada choca con un control vecino, necesita trabajo de composición. A veces ocurren ambas cosas, pero clasificar el problema evita que diseñador y traductor se lo devuelvan una y otra vez.

Recurre a una persona que entienda el idioma para los juicios finales sobre la redacción y el significado. Quien no lo domina puede identificar texto recortado, superposiciones y caracteres ausentes; no puede confirmar de forma fiable si una etiqueta acortada sigue comunicando la acción correcta. Registra esa limitación en la revisión, en lugar de tratar el hecho de que el texto quepa como una aprobación de la traducción.

Las composiciones de derecha a izquierda también necesitan una revisión específica de direccionalidad. Una prueba que solo alarga texto de izquierda a derecha no demuestra que funcionen el orden, el contenido de dirección mixta o los controles direccionales. Mantén visible ese trabajo, en lugar de incluirlo en una afirmación vaga de que todos los idiomas han superado las pruebas.

Usa OpenDesign para examinar y revisar la composición

OpenDesign puede apoyar este trabajo mediante la vista previa HTML, las vistas de escritorio, tableta y móvil, y revisiones concretas del diseño. Puedes proporcionar el texto aprobado como contexto, examinar el resultado y describir una colisión con comentarios o en el chat. Las ediciones manuales de texto y estilo compatibles sirven para probar un ajuste local.

Por ejemplo, especifica que el título del evento puede ocupar más líneas, que la fecha debe seguir totalmente visible y que la acción principal debe permanecer asociada a su tarjeta. Mantén el texto sin cambios mientras pruebas la reparación de la composición. Así resulta más fácil juzgar el resultado que si se pide un rediseño general cada vez que aparece una cadena larga.

Proporciona traducciones aprobadas al evaluar la composición final, para que los cambios de redacción no oculten una colisión que todavía necesite reparación.

Después de una corrección local, vuelve a comparar el contenido original y el expandido. Una regla que resuelve el ejemplo más largo puede hacer innecesariamente incómodas las etiquetas cortas. Una buena flexibilidad admite un intervalo de contenidos: el texto habitual sigue bien compuesto, el más largo sigue siendo utilizable y se entiende el motivo de cualquier tratamiento excepcional.

Define qué significa «listo para traducir»

Una entrega útil registra cómo se comportan los componentes vulnerables, qué casos de exigencia se han probado y qué idiomas reales se han revisado. Incluye las restricciones pendientes, como un widget externo con anchura fija para las etiquetas o una imagen con texto que todavía necesite una versión localizada.

Da contexto a los traductores para las cadenas ambiguas. El destino de un botón, la explicación disponible a su alrededor y la diferencia entre acciones similares pueden ser importantes. Si un límite de caracteres es realmente inevitable, indícalo con su motivo e identifica quién puede decidir si debe cambiar. No conviertas silenciosamente cada anchura de contenedor actual en una restricción lingüística.