×
×

Ajustar texto para una mejor lectura

Los navegadores actuales muestran el texto de una web automáticamente sin poder ajustarlo entre líneas para una mejor lectura.

Por ejemplo, cuando escribes una línea de texto y la última palabra queda en una nueva línea totalmente sola. Esto suele quedar bastante mal visualmente, sobre todo en títulos y subtítulos ya que tienen un mayor tamaño.

Ajustar texto para una mejor lectura CSS

También quedaría bastante mal, si centramos el texto.

Ajustar texto para una mejor lectura css

Con las opciones de CCS 3 actualmente y los navegadores, no tenemos opción para hacer que este texto quede mejor. Si bien podríamos añadir saltos de línea, o cambiar margins y paddings en nuestro .css es seguro que algún título o subtitulo (o cualquier entidad a la que se aplique) pueda quedarnos de esta manera.

Ajustar texto para una mejor lectura css

Esto se convierte en un problema común en las páginas webs responsives que se ajustan a todas las pantallas y casi siempre, en algún punto, hay una palabra del texto que se queda solitaria en una línea.

Soluciones actuales

Las soluciones actualmente utilizadas para la presentación del contenido son:

  • Insertar breaks manualmente en el texto
  • Reeditar el texto para cambiar su longitud
  • Cambiar el tamaño de la fuente

¿Por qué estas soluciones no funciona correctamente?

Estas soluciones no dejan de ser un parche.

  • El tipo de pantalla afecta al ancho del contendor del texto
  • El tamaño de la fuente puede cambiar
  • La propia fuente puede cambiar
  • El contenido puede ser editado
  • El contenido es cargado dinámicamente a través de una base de datos.

La alternativa

Desde los blogs de Adobe hay una pequeña propuesta para llevar un pequeño algoritmo a los navegadores. Algo similar a:

h1 {
text-wrap: balance;
}

Esto haría que los elementos h1 que ocupan más de 1 línea automáticamente se mostraran balanceados, sin necesidad de insertar breaks.

Ya que actualmente esta propiedad no existe (aunque se espera que tarde o temprano llegue) la alternativa corre de la mano de un pequeño plugin jQuery que te permite balancear el texto.

Todo lo que necesitas hacer es llamar a la función balanceText() en los elementos en los que quieras aplicar esta característica.

¿Cuál es tu solución a este problema?


Añadir nuevo comentario