C35Permitir el espaciado del texto sin ajuste de línea

Descripción

El objetivo de esta técnica es permitir que el usuario modifique el espaciado del texto mediante una hoja de estilos de usuario, un bookmarklet, una extensión o una aplicación. Aumentar el espaciado entre párrafos, líneas, palabras y caracteres beneficia a las personas con baja visión o con algunas discapacidades cognitivas. El contenido debe admitir cambios de espaciado sin pérdida de contenido ni de funcionalidad, permitiendo que los elementos que contienen el texto se expandan según sea necesario.

Cuando el texto no está pensado para ajustarse en varias líneas, los autores deberían, o bien:

• dimensionar los contenedores con un valor mayor que la anchura predeterminada del texto, o bien
• permitir que los contenedores se expandan en la dirección del texto.

Existe cierta variabilidad en la anchura que alcanzan las palabras o frases al establecer el espaciado entre letras y entre palabras. Si los elementos deben usar una anchura fija, un valor seguro es un 20 % más que la anchura máxima predeterminada. Por ejemplo, si un contenedor de texto pequeño permite 20 caracteres, dejar anchura suficiente para 24 caracteres debería dar espacio bastante para aplicar el espaciado del texto.

Para las cajas que pueden expandirse con el texto, los autores pueden aprovechar el valor inline-block de la propiedad display de CSS y no establecer márgenes negativos, para permitir que se modifique el espaciado del texto.

Ejemplos

Cuando el usuario adapta la página para aumentar el espaciado del texto, el texto cabe dentro de los límites de su caja contenedora.

Se ha utilizado la unidad ex por ser la unidad disponible más cercana a la anchura de un carácter; ex representa la altura de la x de la fuente del elemento (página de MDN sobre las unidades CSS). No es perfecta: los distintos caracteres tienen anchuras predeterminadas diferentes.

<style>
/* Links are less than 8em wide,
so 10em width of each li allows for expanded letter and word width */
nav li { width: 10em; }
</style>

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/contact/">Contact</a></li>
  <ul>
</nav>

<style>
/* CSS containers are given a display of inline-block. No negative margins set. */
 nav li { display: inline-block; }
 </style>

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/contact/">Contact</a></li>
  <ul>
</nav>

Pruebas

Técnicas relacionadas

• Permitir el espaciado del texto en contenido con ajuste de línea