Equilibrar texto con CSS
Muchas veces hay dificultades para plasmar estos diseños en la programación de una web o una APP, es por ello que quiero compartirte como equilibrar textos con CSS con la propiedad:
text-wrap:balance;
El navegador calculará automáticamente el número de palabras y las dividirá en partes iguales entre dos líneas. Con el balanceo de texto, el contenido del título o texto estará balanceado y no tendrás una sola palabra suelta en una línea.
¿Alguna vez ha deseado que haya una forma nativa en CSS de hacer titulares de dos líneas consistentes en el número de palabras por línea?
Esta dificultad puede hacer que la interfaz de usuario en la que estás trabajando se perciba desequilibrada o que falte algo. Veamos el ejemplo:
La palabra “coffee” es una sola palabra aislada del resto del título. Desde una perspectiva visual, esto parece extraño, rompiendo lo visual.
Mientras estas diseñando con una herramienta como Figma, puedes mover intencionalmente el título y dividirlo en 2 lineas, solo para evitar esa inconsistencia.
Eso se ve mejor, ¿verdad?
En la maquetación web, podemos hacerlo manualmente también usando un <br>, o dividiendo la otra parte del contenido con un <span>, pero en este caso no serà un titular <h1> limpio.
Si trabajas con React, hay un componente llamado React Wrap Balancer que hace que el texto se equilibre dinámicamente al cambiar el tamaño.
Solución CSS para equilibrar el texto
Afortunadamente, ahora tenemos soporte experimental para “text-wrap: balance” en Chrome. El navegador calculará automáticamente el número de palabras y las dividirá en partes iguales entre dos líneas.
Todo lo que necesitamos es aplicar el “text-wrap: property”.
Con esto, el contenido del título estará balanceado y no tendremos una sola palabra en una línea suelta.
Equilibrio de texto con “Max-Width”
Es importante tener en cuenta que el uso de equilibrio de texto no afectará el ancho del elemento. Considera la siguiente figura.
El ancho máximo del título es 630px. Cuando “text-wrap: balance” esté allí, alineará el número de palabras por línea y max-width no se verá afectado.
Lo mismo sucede también cuando el contenedor es pequeño. Solo afectará las palabras dentro de su contenedor.
Casos de uso y ejemplos de text-wrap: balance
Exploremos dónde “text-wrap: balance” puede ser útil.
1. Título de la página
El título de una página es lo primero que puede llamar la atención del usuario. Aquí hay un ejemplo sin equilibrar:
Texto equilibrado:
2. Título en una card
Este es un patrón común como un listado de artículos de blog:
Con el balanceo de texto en CSS, eso se puede resolver fácilmente:
3. Tooltips
A menudo usamos tooltips para mostrar información importante al usuario. Pueden ser unas pocas palabras o varias líneas.
Aquí hay una información sobre herramientas donde una sola palabra vive en su línea.
La versión con “text-wrap: balance”.
4. Modals
A menudo, es posible que tengas un título en un modal que abarca varias líneas. Puede ser visualmente molesto ver una sola palabra en su línea.
Con el balance de texto, se verá mejor:
El equilibrio de texto no afecta el ancho del elemento
El uso de “text-wrap: balance” no siempre puede ser la mejor opción, ya que no puedes controlar el ancho del elemento. En ciertos diseños, puede dejar un gran espacio que podría empeorar aún más el diseño en mi opinión.
Considera la siguiente figura:
Observa cómo cuando se aplica el equilibrio de texto, el ancho permanecerá como está y solo se reordenará el texto.
Aquí hay un problema similar en el Tooltip:
El balanceo acaba generando un gran espacio en blanco que hace que el diseño parezca desequilibrado.
¿Qué pasa si, por ejemplo, dejamos “text-wrap: balance” y aplicamos un with para adaptar el ancho del elemento?
La palabra clave “fit-content” forzará el ancho del elemento para que coincida con el nuevo texto equilibrado.
Conclusión
El equilibrio del texto en el diseño web y de aplicaciones es crucial para mantener la armonía visual y mejorar la experiencia del usuario. La propiedad "text-wrap: balance" en CSS proporciona una solución innovadora para lograr este equilibrio, dividiendo automáticamente las palabras en partes iguales entre dos líneas. Esta propiedad resuelve los desafíos de diseño que a menudo surgen al lidiar con títulos, encabezados y otros elementos de contenido textual. Actualmente, la función está limitada a solo 4 líneas. Eso significa que se puede usar principalmente para títulos o párrafos con unas pocas líneas.