plantillas plantilla gratis elegant divi css usability typography

css - plantilla - ¿Debo evitar usar "text-align: justify;"?



plantilla divi wordpress gratis (12)

Al igual que 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 en las 10 palabras recomendadas por línea (o con cualquier cantidad por encima de eso), probablemente pueda salirse con la suya con el texto justificado y que se vea razonablemente bueno la mayor parte del tiempo a menos que esté usando mucho tiempo. palabras y / o cadenas

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

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

¿Reduce la legibilidad o causa problemas?

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 descubrir por qué IE mantenía centrando cosas. Tal vez le ahorre a alguien más en algún momento.

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.

En primer lugar, se trata simplemente de un problema y una solución 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.

Este sitio 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 ­ (suave separación silábica) separando correctamente palabras largas y problemáticas como supertraje, puede imitar la composición tipográfica (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, los guiones CSS son posibles ahora, excepto que no son factibles (no en Chrome). Además, css4 ofrece aún más control .

Erhh ... ¡No ...!

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

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.

No hay una 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.

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

No puedo pensar en una razón convincente para justificar el texto: en 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 corporal centrado. No creo que haya una mayor señal de alerta de diseño web ammateurish que eso.

Prefiero la justificación a la izquierda (text-align: left) 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 "adelante" para el texto en la otra dirección (por ejemplo, hebreo) ...)

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

text-align: justify no debería usarse en navegadores en este momento. No son buenos para manejar los detalles minuciosos y la salida termina conteniendo muchos ríos y no hay soporte para la hyphenation (que no sean guiones suaves).

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

Editar: this me llamó la 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.

Editar 2: CSS ahora permite la hyphenation con la propiedad de hyphens [ soporte del navegador ]. PPK ahora está diciendo que lo agregues a tus hojas de estilo , mientras que Eric Meyer dice que simplemente lo agregas para dispositivos móviles .

Edición 3: una buena visión general de las cosas que tenemos disponibles ahora, con algunos SASS.