CSS3 09 Textos y alineaciones

 CSS3 09 Textos y alineaciones

CSS también dispone de ciertas propiedades relacionadas con el texto con objetivos de alineación o tratamiento de espaciados. Veamos algunas de ellas:

Las tres primeras propiedades, determinan el espacio en diferentes zonas del texto. Por ejemplo la primera de ellas, letter-spacing, especifica el espacio de separación que hay entre cada letra de un texto, denominado comúnmente interletraje o tracking.

La propiedad line-height especifica la altura que tendrá cada línea de texto, una característica que puede facilitar muchísimo la lectura, puesto que un interlineado excesivo puede desorientar al lector, mientras que uno insuficiente puede hacer perder al visitante el foco en el texto.

La propiedad word-spacing permite establecer el espacio que hay entre una palabra y otra en un texto determinado, lo que puede facilitar la legibilidad de los textos de una página web y da flexibilidad y control sobre ciertas tipografías.

La propiedad text-indent establece un tamaño de indentación (por defecto, 0), o lo que es lo mismo, hace un sangrado, desplazando el texto la longitud especificada hacia la derecha (o izquierda en cantidades negativas).

Al utilizar white-space podemos indicar el comportamiento que tendrán los espacios en blanco en una página web. Por defecto, el valor es normal (transforma múltiples espacios en blanco en un solo espacio consecutivo), pero tiene otras opciones posibles:

Nota: La diferencia entre pre-wrap y pre-line es que este último respeta literalmente los espacios que están antes del texto, mientras que si sobran después del texto, los suprime.

Probablemente, a medida que realices diferentes diseños, te encontrarás con la desagradable situación en la que un texto concreto (por ejemplo, un enlace demasiado largo) no cabe dentro de un contenedor, por lo que el texto se desborda y provoca efectos no deseados como salirse de su lugar.

OJO: La propiedad overflow-wrap sólo funciona cuando white-space está establecida a valores que respeten espacios. Además, la propiedad word-wrap es un alias de overflow-wrap por temas de retrocompatibilidad.

Existen formas de mitigar este problema, como la propiedad word-break, word-wrap o la propiedad hyphens, sin embargo, aún están en fase de desarrollo y su soporte está poco extendido en la actualidad. Aún así, si quieres probar una combinación de varias propiedades que suele dar resultado para paliar este comportamiento, puedes probar lo siguiente:

.container {

    hyphens: auto;

    word-wrap: break-word;

    word-break: break-word;

}

Por otra parte, la propiedad tab-size permite establecer el número de espacios que se mostrarán en el cliente o navegador al representar el carácter de un TAB (tabulador), que generalmente se convierten a un espacio en blanco, pero sin embargo son visibles en elementos HTML como <textarea> o <pre>.

Por último, la propiedad direction permite establecer la dirección del texto: de izquierda a derecha (ltr, left to right) o de derecha a izquierda (rtl, right to left).

Alineaciones

También existen varias propiedades CSS que permiten modificar las diferentes alineaciones de los textos en su conjunto. Veamos un resumen:

En el primer caso, se puede establecer los valores left, right, center o justify a la propiedad text-align para alinear horizontalmente el texto a la izquierda, a la derecha, en el centro o justificar el texto, respectivamente, de la misma forma que lo hacemos en un procesador de texto.

En la propiedad text-justify indicamos el tipo de justificación de texto que el navegador realizará: automática (el navegador elige), ajustar el espacio entre palabras (el resultado de ajustar con la propiedad word-spacing), ajustar el espacio entre par de carácteres (el resultado de ajustar con la propiedad letter-spacing) y justificación desactivada.

Por su parte, la propiedad text-overflow cambia el comportamiento del navegador cuando detecta que un texto no cabe y se desborda. En ella podemos utilizar los valores clip, desbordar el contenedor (comportamiento por defecto), ellipsis, que muestra el texto «...» cuando no cabe más texto y por último indicar el texto que queremos utilizar en lugar de «...».

Al igual que existe text-align para alinear horizontalmente, también existe la propiedad vertical-align, que se encarga de la alineación vertical de un elemento, pudiendo establecer como valor las siguientes opciones:

Consejo: Cuidado con vertical-align. Esta propiedad puede querer utilizarse para centrar verticalmente un elemento, sin embargo, su utilización es un poco menos intuitiva de lo que en un principio se cree, ya que se debe utilizar para alinear textos respecto a elementos. Para alinear bloques de contenido o crear estructuras de diseño, véase Flexbox.

Variaciones Por último, existen varias propiedades aplicables a los textos para variar su naturaleza. Echemos un vistazo:

La propiedad text-decoration permite establecer subrayados (underline), subrayados por encima del texto (overline) y tachados (line-through). Indicando el valor none se puede eliminar cualquiera de los formatos anteriores. Es muy utilizado, por ejemplo, para eliminar el subrayado de los textos que tienen un enlace o hipervínculo.

Por último, la propiedad text-transform es muy útil para convertir textos a mayúsculas (uppercase) o minúsculas (lowercase), o incluso capitalizar el texto (capitalize), es decir, poner sólo la primera letra en mayúscula, independientemente de como esté escrito en el documento HTML.