011. Flujo Horizontal y Legibilidad
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
La propiedad text-align gobierna el eje X del contenido en línea.
- →left: Por defecto (en lenguajes LTR). Genera un margen derecho irregular ('ragged right') pero ofrece un ancla visual constante para la vista, maximizando la legibilidad.
- →center: Simétrico pero agotador para textos largos. Resérvalo para Títulos (H1, H2).
- →justify: Fuerza a las líneas a tocar ambos extremos estirando los espacios. Cuidado: puede generar 'ríos de espacio blanco' que rompen la estética visual.
022. Transformación de Texto (A11y)
Jamás escribas EN MAYÚSCULAS directamente en el HTML. Muchos lectores de pantalla (Screen Readers) interpretan el texto en mayúsculas como siglas deletreando palabra por palabra. Para un diseño accesible, escribe el texto normal en tu HTML y usa text-transform: uppercase; en el CSS.
?Frequently Asked Questions
¿Por qué el texto justificado (`text-align: justify`) a veces es difícil de leer?
El texto justificado obliga a los navegadores a alterar y estirar el espacio entre palabras (word-spacing) para que las líneas toquen ambos márgenes. En columnas estrechas, esto crea 'ríos de espacio blanco' (huecos verticales) que interrumpen el flujo cognitivo de la lectura.
¿Cuál es el valor recomendado para `line-height` en CSS?
El estándar de accesibilidad dicta un `line-height` (interlineado) de `1.5` a `1.6` sin unidades para cuerpos de texto. Al omitir `px` o `em`, el valor actúa como un multiplicador perfecto que se escala automáticamente si cambia el tamaño de fuente.
¿Cómo afecta `text-transform` a los lectores de pantalla (Screen Readers)?
Los lectores de pantalla leen el HTML subyacente e ignoran el CSS visual como `text-transform: uppercase`. Si escribes TODO EN MAYÚSCULAS en HTML, el lector podría deletrear la palabra letra por letra creyendo que son siglas. Es por ello que siempre debes usar `text-transform` para capitalizar.
