Skip to main content

Cómo establecer texto justificado con CSS

Cómo hallar los divisores de un número (Abril 2025)

Cómo hallar los divisores de un número (Abril 2025)
Anonim

Una de las propiedades de la tipografía de un sitio web que puede ajustar durante el desarrollo de un sitio es cómo se justifica el texto del sitio. Por defecto, el texto del sitio web se deja justificado y esta es la cantidad de sitios que dejan su texto. Las únicas otras opciones están justificadas a la derecha, que nadie usa en los sitios web, ya que haría que el texto sea esencialmente imposible de leer en línea, o lo que se conoce como completamente justificado.

El texto justificado es un bloque de texto que se alinea en los lados izquierdo y derecho, a diferencia de uno de esos lados (que es lo que hace la justificación "izquierda" y "derecha"). El efecto doblemente justificado se logra ajustando los espacios de letras 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. Justificas el texto en CSS usando la 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 porque 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 igualar todas las líneas y hacerlas consistentes.

Cada creador de navegador web tiene su propio algoritmo para aplicar los espacios adicionales dentro de una línea. Los navegadores analizan la longitud de las palabras, la separación de palabras y otros factores para determinar dónde colocar los espacios. Como resultado, el texto justificado puede no parecer idéntico de un navegador a otro. ¡Esto está bien ya que ningún visitante del sitio saltará de un navegador a otro solo para comparar el aspecto de las líneas de su sitio! Tenga la seguridad, sin embargo, de que la compatibilidad con el navegador principal 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. Por lo general, esto se hace con párrafos de texto, ya que los bloques grandes de contexto de texto que abarcan varias líneas se marcarán con etiquetas de párrafo.

Una vez que tenga un bloque de texto para justificar, solo es cuestión de configurar el estilo para que se justifique con la propiedad de estilo CSS text-align.

alinear texto: justificar;

Necesitaría aplicar esta regla CSS a un selector apropiado para obtener el bloque de texto que se procesará según lo previsto.

Cuándo Justificar 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 medido muy consistente, pero existen desventajas para 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 extra entre algunas palabras de la línea. Esos huecos inconsistentes pueden hacer que el texto sea más difícil de leer. Esto es especialmente importante en las páginas web, que pueden ser difíciles de leer debido a la iluminación, la resolución u otra calidad de hardware. Agregar espacios inusuales al texto puede empeorar una 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 centro del texto. Esos espacios grandes de espacios en blanco pueden hacer que la visualización sea incómoda. Además, en líneas extremadamente cortas, la justificación puede causar líneas que contengan una palabra con espacios adicionales entre las letras.

Entonces, ¿cuándo se debe utilizar 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 asegurar en sitios web sensibles donde las longitudes de las líneas cambian según el tamaño de la pantalla). No hay un número fijo y rápido para la longitud de la línea o el tamaño del texto, debe usar su mejor criterio.

Después de aplicar el estilo de alineación de texto para justificar el texto, pruébelo para asegurarse de que no tenga ríos de espacios en blanco y asegúrese de probarlo en una variedad de tamaños. La forma más fácil de hacerlo es verlo con los ojos entrecerrados. Los ríos se destacan como manchas de blanco en un bloque de texto por lo demás gris. Si ve ríos, debe hacer cambios en el tamaño del texto o en el ancho del bloque de texto para deshacerse de esos ríos antiestéticos.

Solo use la justificación después de haberla comparado con el texto alineado a la izquierda como se ve en este artículo. Tiene la misma consistencia de la justificación completa, pero el texto estándar justificado a la izquierda generalmente es más legible. Al final, debe justificar el texto porque ha elegido justificar el texto por motivos de diseño y ha confirmado que su sitio sigue siendo fácil de leer.