Cómo configurar texto justificado con CSS

click fraud protection

Una de las propiedades de la tipografía de un sitio web que puede elegir ajustar durante el desarrollo de un sitio es cómo se justifica el texto del sitio. De forma predeterminada, el texto del sitio web está justificado a la izquierda y esta es la cantidad de sitios que dejan su texto. Las únicas otras opciones están justificadas a la derecha, lo cual es poco común o está totalmente justificado.

Texto justificado es un bloque de texto que se alinea tanto en el lado izquierdo como en el derecho, a diferencia de solo uno de esos lados (que es lo que hacen las justificaciones "izquierda" y "derecha"). El efecto doblemente justificado se logra ajustando los espacios de palabras y letras en cada línea de texto para asegurar que cada línea tenga la misma longitud. Este efecto se llama justificación completa. Justifique el texto en CSS usando el texto alineado propiedad.

¿Cómo funciona la justificación?

La razón por la que a menudo ve un borde desigual en el lado derecho de un bloque de texto es que cada línea de texto no tiene la misma longitud. Algunas líneas tienen más palabras o palabras más largas, mientras que otras tienen menos palabras o palabras más cortas. Para justificar ese bloque de texto, se deben agregar espacios adicionales a algunas líneas para nivelar todas las líneas y hacerlas consistentes.

instagram viewer

Cada navegador web tiene su propio algoritmo para aplicar los espacios adicionales dentro de una línea. Los navegadores miran la longitud de las palabras, la separación de sílabas y otros factores para determinar dónde colocar los espacios. Como resultado, es posible que el texto justificado no se vea idéntico de un navegador a otro. Sin embargo, tenga la seguridad de que la compatibilidad con los principales navegadores es buena para justificar el texto con CSS.

Cómo justificar el texto

La justificación de texto con CSS requiere una sección de texto para justificar. Normalmente, utilizará párrafos de texto porque los grandes bloques de contexto de texto que abarcan varias líneas se marcarán con etiquetas de párrafo.

Después de tener un bloque de texto para justificar, solo es cuestión de configurar el estilo como justificado con la propiedad de estilo CSS text-align. Aplique esta regla CSS a un selector apropiado para que el bloque de texto se represente como se esperaba.

Cuándo justificar el texto

A muchas personas les gusta el aspecto del texto justificado desde el punto de vista del diseño, en gran parte porque crea un aspecto muy consistente y mesurado, pero hay desventajas de justificar completamente el texto en una página web.

Primero, el texto justificado puede ser difícil de leer. Esto se debe a que cuando justifica el texto, a veces se puede agregar mucho espacio adicional entre algunas palabras en la línea. Esos espacios inconsistentes pueden hacer que el texto sea más difícil de leer. Esto es especialmente importante en las páginas web, que pueden resultar difíciles de leer debido a la iluminación, la resolución u otra calidad del hardware. Agregar espacios inusuales al texto puede empeorar una mala situación.

Además de los problemas de legibilidad, los espacios en blanco a veces se alinean entre sí para crear "ríos" de espacios en blanco en el medio del texto. Esos grandes espacios en blanco realmente pueden crear una pantalla incómoda. Además, en líneas extremadamente cortas, la justificación puede provocar líneas que contengan una palabra con espacios adicionales entre las letras.

Entonces, ¿cuándo debería usar la justificación de texto? El mejor momento para justificar el texto ocurre cuando las líneas son largas y el tamaño de la fuente es pequeño, algo que es difícil de garantizar en sitios web receptivos donde la longitud de las líneas cambia según el tamaño de la pantalla. No hay un número fijo para la longitud de la línea o el tamaño del texto; debe usar su mejor juicio.

Después de aplicar el estilo de alineación de texto para justificar el texto, pruébelo para asegurarse de que el texto no tenga ríos de espacios en blanco y pruébelo en una variedad de tamaños. La prueba más sencilla no requiere nada más complicado que sus propios ojos entrecerrados. Los ríos se destacan como manchas blancas en un bloque de texto gris. Si ve ríos, debe realizar cambios en el tamaño del texto o el ancho del bloque de texto para reajustar el texto.

Solo use la justificación después de haberla comparado con el texto alineado a la izquierda. Puede que le guste la coherencia de la justificación completa, pero el texto estándar justificado a la izquierda suele ser más legible. Al final, debe justificar el texto porque ha elegido justificar el texto con fines de diseño y ha confirmado que su sitio sigue siendo fácil de leer.

instagram story viewer