C19Alinear el texto a la izquierda o a la derecha con CSS

Por qué es importante

Al justificar un párrafo, el navegador estira los espacios para que todas las líneas acaben igual. A veces aparecen «ríos» blancos que recorren el texto de arriba abajo.

Para una persona con dislexia o con baja visión, esos huecos rompen el ritmo de lectura. Le cuesta saber dónde acaba una palabra y empieza la siguiente. Un borde derecho irregular, en cambio, ayuda a no perder la línea.

Cómo se hace

1. En idiomas que se leen de izquierda a derecha, como el español, use text-align: left en los bloques de texto.
2. En idiomas que se leen de derecha a izquierda, como el árabe, use text-align: right.
3. Evite text-align: justify en párrafos, noticias, fichas de producto o textos legales.
4. Defina la alineación en la hoja de estilos, no con atributos antiguos de HTML como align.

Cómo comprobarlo

1. Mire los bloques de texto largos de la página. Las líneas no deben acabar todas exactamente en el mismo punto.
2. Abra las herramientas del navegador (tecla F12) y seleccione un párrafo.
3. En los estilos calculados, compruebe que text-align vale left, start o right, y no justify.

Ejemplo

Clase para los textos de una noticia, alineados a la izquierda.

<style>
  .texto-noticia { text-align: left; }
</style>
<div class="texto-noticia">
  <p>El plazo de inscripción se abre el 3 de noviembre.</p>
</div>