Además de las propiedades relativas a la tipografía del texto, CSS define numerosas propiedades que determinan la apariencia del texto en su conjunto. Estas propiedades adicionales permiten controlar al alineación del texto, el interlineado, la separación entre palabras, etc.
La propiedad que define la alineación del texto se denomina text-align.
Los valores definidos por CSS permiten alinear el texto según los valores tradicionales: a la izquierda (left), a la derecha (right), centrado (center) y justificado (justify).
La siguiente imagen muestra el efecto de establecer el valor left, right, center y justify espectivamente a cada uno de los párrafos de la página.
La propiedad text-align no sólo alinea el texto que contiene un elemento, sino que también alinea todos sus contenidos, como por ejemplo las imágenes.
El interlineado de un texto se controla mediante la propiedad line-height, que permite controlar la altura ocupada por cada línea de texto:
Además de todas las unidades de medida y el uso de porcentajes, la propiedad line-height permite indicar un número sin unidades que se interpreta como el múltiplo del tamaño de letra del elemento.
Por tanto, estas tres reglas CSS son equivalentes:
p { line-height: 1.2; font-size: 1em }
p { line-height: 1.2em; font-size: 1em }
p { line-height: 120%; font-size: 1em }
Siempre que se utilice de forma moderada, el interlineado mejora notablemente la legibilidad de un texto, como se puede observar en la siguiente imagen:
Además de la decoración que se puede aplicar a la tipografía que utilizan los textos, CSS
define otros estilos y decoraciones para el texto en su conjunto. La propiedad que decora
el texto se denomina text-decoration.
define otros estilos y decoraciones para el texto en su conjunto. La propiedad que decora
el texto se denomina text-decoration.
El valor underline subraya el texto, por lo que puede confundir a los usuarios haciéndoles creer que se trata de un enlace. El valor overline añade una línea en la parte superior del texto, un aspecto que raramente es deseable. El valor line-through muestra el texto tachado con una línea continua, por lo que su uso tampoco es muy habitual. Por último, el valor blink muestra el texto parpadeante y se recomienda evitar su uso por las molestias que genera a la mayoría de usuarios.
Una de las propiedades de CSS más desconocidas y que puede ser de gran utilidad en algunas circunstancias es la propiedad text-transform, que puede variar de forma sustancial el aspecto del texto.
La propiedad text-transform permite mostrar el texto original transformado en un texto completamente en mayúsculas (uppercase), en minúsculas (lowercase) o con la primera letra de cada palabra en mayúscula (capitalize).
La siguiente imagen muestra cada uno de los posibles valores:
Las reglas CSS del ejemplo anterior se muestran a continuación:
<div style="text-transform: none"><h1>Original</h1>Lorem ipsum dolor
sit amet...</div>
<div style="text-transform: capitalize"><h1>text-transform:
capitalize</h1>
Lorem ipsum dolor sit amet...</div>
Lorem ipsum dolor sit amet...</div>
<div style="text-transform: lowercase"><h1>text-transform:
lowercase</h1>
Lorem ipsum dolor sit amet...</div>
Lorem ipsum dolor sit amet...</div>
<div style="text-transform: uppercase"><h1>text-transform:
uppercase</h1>
Lorem ipsum dolor sit amet...</div>
Lorem ipsum dolor sit amet...</div>
Uno de los principales problemas del diseño de documentos y páginas mediante CSS consiste en la alineación vertical en una misma línea de varios elementos diferentes como imágenes y texto. Para controlar esta alineación, CSS define la propiedad vertical-align.
A continuación se muestra una imagen con el aspecto que muestran los navegadores para cada uno de los posibles valores de la propiedad vertical-align:
El valor por defecto es baseline y el valor más utilizado cuando se establece la propiedad vertical-align es middle.
En muchas publicaciones impresas suele ser habitual tabular la primera línea de cada párrafo para facilitar su lectura. CSS permite controlar esta tabulación mediante la propiedad text-indent.
La siguiente imagen muestra la comparación entre un texto largo formado por varios párrafos sin tabular y el mismo texto con la primera línea de cada párrafo tabulada:
