¿Debo evitar el uso de "text-align: justify;"?

Question

¿Hay alguna razón para evitar el uso de text-align: justify;?

¿Reduce la legibilidad o causa problemas?

Answer 1

En primer lugar, se trata de un problema y una solución puramente relacionados con el diseño. El diseño de su cuadrícula especifica si es necesario justificar el texto. Creo que justificar la alineación por sí solo no tiene un efecto importante en la usabilidad. La mala tipografía que hace que el texto sea ilegible es lo que disminuye la usabilidad. Dicho esto, asegúrese de tener contrastes sólidos y un buen equilibrio de espaciado en su tipo. El tamaño de letra también importa.

This site es un intento exitoso de justificar texto en línea. Dado que no puede controlar los espacios entre letras y palabras casi tanto con CSS como con InDesign, es mucho más difícil justificar el texto y no tener "ríos" de espacios en blanco en las filas, lo que sucede cuando los espacios entre palabras excede los espacios entre líneas. Cosas que dificultan la justificación del texto: palabras largas, anchos de fila que no contienen suficientes palabras y demasiado contraste entre el texto y los colores de fondo; hacen que los ríos parezcan más anchos y más evidentes.

El ideal tipográfico es tener un bloque de texto uniforme, donde si entrecierra el bloque de texto se convierte en un tono sólido uniforme. Por lo tanto, si mantiene el texto a aproximadamente 10 px y 60% de gris sobre fondo blanco, y tiene filas que caben cerca de 20 palabras, justificar la alineación no debe verse mal. Pero tenga en cuenta que esto no hace nada para mejorar la usabilidad. El texto pequeño y relativamente ligero molesta a muchas personas, especialmente a los lectores mayores.

Debo notar que con ­ (división de palabras suave) separar correctamente las palabras largas y problemáticas como super ­ awesome puedes imitar la composición tipográfica correcta (por ejemplo, InDesign). Hay muchas cosas por ahí para ayudarte a hacer esto. Recomendaría la lógica para ocultar, manipular y mostrar el texto que se debe hacer en el lado del cliente, quizás con this.

Editar: Como otros mencionan a continuación, css hyphens son posibles ahora, excepto que no es factible (no en Chrome). Además, css4 offers even more control.

Answer 2

Prefiero la justificación izquierda (texto-alinear: izquierda) porque generalmente es más legible. También es más rápido leer palabras espaciadas uniformemente, así lo escucho. A menos que tenga una razón estilística para usar justify, manténgalo a la izquierda, a la derecha o al centro. Especialmente para el texto del cuerpo, use la izquierda. (En realidad, querría algo así como "reenviar" el texto en la otra dirección (por ejemplo, en hebreo) ...)

Answer 3

No hay ninguna razón técnica para no hacerlo, es puramente una decisión de diseño. Mucha gente encuentra que el texto justificado es más difícil de leer, pero supongo que depende de tu situación. Aunque funciona bien para imprimir, generalmente los navegadores web no le dan suficiente control sobre el resultado final del texto para garantizar que lo que está sirviendo no se vea como basura en las pantallas de otras personas.

Su mejor opción es evitar la justificación.

Answer 4

Creo que está perfectamente bien en la impresión, pero es torpe en la mayoría de los navegadores web, debido a la falta de un control preciso de los espacios y la separación silábica. Los tipógrafos pueden incluso jugar un poco con el espaciado entre letras o la contracción de la fuente en algunos casos, ya que las páginas/columnas (al menos en las revistas) se pueden ajustar con precisión.

Answer 5

text-align: justify shouldn't be used en los navegadores en este momento. No son buenos en el manejo de los detalles mínimos y la salida termina conteniendo muchos ríos y no hay soporte para hyphenation (que no sean guiones suaves).

Nota anterior fue escrita hace 4.5 años. Las cosas están cambiando lentamente ... http://caniuse.com/#feat=css-hyphens

Editar: Hyphenator fue traído a mi atención en los comentarios de esta respuesta. Parece que justifica usar text-align justify, echa un vistazo a los sitios que lo usan. Es posible que desee utilizar javascript para aplicar text-align justify antes de usar este script para que aquellos sin javascript no queden atrapados.

Edición 2: CSS permite ahora hyphenation con la propiedad hyphens [browser support]. PPK dice ahora al add it to your stylesheets, mientras que Eric Meyer dice just add it for mobile.

Datos 3: A good little overview de cosas disponibles para nosotros ahora, con un poco de SASS.

Answer 6

Los problemas planteados por otros sobre justificar la alineación son más frecuentes con columnas estrechas. Si sus columnas son lo suficientemente amplias en relación con el tamaño de sus fuentes y otros parámetros, entonces está bien justificar el texto. Digamos que querría un promedio de 12 a 15 palabras por línea como mínimo. Más es mejor.

Answer 7

Como cualquier pregunta de diseño web ... depende. Como se ha sugerido, el texto justificado generalmente no se ve bien en columnas estrechas. Lo recomendaría como regla general en las barras laterales, ya que las barras laterales suelen ser angostas.

Con la copia del cuerpo a las 10 palabras recomendadas por línea (o con cualquier cantidad por encima de eso) probablemente podrá salirse con la justificación del texto y que se vea razonablemente bueno la mayor parte del tiempo a menos que esté usando un Muchas palabras y/o cuerdas realmente largas.

Creo que he habilitado este sitio en StackOverflow anteriormente, pero Jon Tan usa texto justificado en su cuerpo (dentro de los artículos) y se ve muy bien el 99.99% del tiempo.

Answer 8

Erhh ... ¡No ...!

[serio] WordPress utiliza justificar, y creo que es una declaración bastante fuerte en cuanto a si es o no disminuye la legibilidad ...

Answer 9

No puedo pensar en una razón de peso para justificar por qué no el texto - a una cierto punto, el volumen y el ancho del contenido casi exigen que esté justificado. Por supuesto, obtendrá problemas con el contenido que consiste en ciertas combinaciones de palabras, pero en mi opinión si está viendo ríos y espacios inusualmente grandes entre palabras, tiene un problema completamente diferente: uno de legibilidad y claridad.

Lo que evitaría, a toda costa, es el texto central del cuerpo. No creo que haya una mayor señal de alerta de diseño web ammateurish que eso.

Answer 10

La justificación no debe usarse sin separación por sílabas. Aquí hay un PHP based hyphenation library, y un puerto de esta biblioteca a un plugin de WordPress: wp-Typography.

Answer 11

También puede usar text-justify: newspaper. La etiqueta text-justify css le ayuda a controlar cómo ajustar el texto cuando justifica

Answer 12

Cabe mencionar que Internet Explorer (al menos) hasta la versión 8 no representa text-align: justify correctamente. En cambio, se interpreta como text-align: center.

Aquí hay más información: text-align: justify

me causó algunos dolores de cabeza para averiguar por qué IE mantuvo centrado cosas. Tal vez le ahorre a alguien más en algún momento.