LibrosWeb.es

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 respectivamente a cada uno de los párrafos de la página.

Figura 6.5. Ejemplo de propiedad text-align

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:

Figura 6.6. Ejemplo de propiedad line-height

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.

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:

Figura 6.7. Ejemplo de propiedad text-transform

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>
 
<div style="text-transform: lowercase"><h1>text-transform: lowercase</h1>
Lorem ipsum dolor sit amet...</div>
 
<div style="text-transform: uppercase"><h1>text-transform: uppercase</h1>
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:

Figura 6.8. Ejemplo de 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:

Figura 6.9. Ejemplo de propiedad text-indent

CSS también permite controlar la separación entre las letras que forman las palabras y la separación entre las palabras que forman los textos. La propiedad que controla la separación entre letras se llama letter-spacing y la separación entre palabras se controla mediante word-spacing.

La siguiente imagen muestra la comparación entre un texto normal y otro con las propiedades letter-spacing y word-spacing aplicadas:

Figura 6.10. Ejemplo de propiedades letter-spacing y word-spacing

.especial h1 { letter-spacing: .2em; }
.especial p { word-spacing: .5em; }
 
<div><h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum 
dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
per inceptos hymenaeos. Etiam pharetra blandit purus.</p>
...
</div>
 
<div class="especial"><h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum 
dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
per inceptos hymenaeos. Etiam pharetra blandit purus.</p>
...
</div>

Cuando se utiliza un valor numérico en las propiedades letter-spacing y word-spacing, se interpreta como la separación adicional que se añade (si el valor es positivo) o se quita (si el valor es negativo) a la separación por defecto entre letras y palabras respectivamente.

Como ya se sabe, el tratamiento que hace HTML de los espacios en blanco es uno de los aspectos más difíciles de comprender cuando se empiezan a crear las primeras páginas web. Básicamente, HTML elimina todos los espacios en blanco sobrantes, es decir, todos salvo un espacio en blanco entre cada palabra.

Para forzar los espacios en blanco adicionales se debe utilizar la entidad HTML   y para forzar nuevas líneas, se utiliza el elemento <br/>. Además, HTML proporciona el elemento <pre> que muestra el contenido tal y como se escribe, respetando todos los espacios en blanco y todas las nuevas líneas.

CSS también permite controlar el tratamiento de los espacios en blanco de los textos mediante la propiedad white-space.

El significado de cada uno de los valores es el siguiente:

• normal: comportamiento por defecto de HTML.
• pre: se respetan los espacios en blanco y las nuevas líneas (exactamente igual que la etiqueta <pre>). Si la línea es muy larga, se sale del espacio asignado para ese contenido.
• nowrap: elimina los espacios en blanco y las nuevas líneas. Si la línea es muy larga, se sale del espacio asignado para ese contenido.
• pre-wrap: se respetan los espacios en blanco y las nuevas líneas, pero ajustando cada línea al espacio asignado para ese contenido.
• pre-line: elimina los espacios en blanco y respeta las nuevas líneas, pero ajustando cada línea al espacio asignado para ese contenido.

En la siguiente tabla se resumen las características de cada valor:

La siguiente imagen muestra las diferencias entre los valores permitidos para white-space. El párrafo original contiene espacios en blanco y nuevas líneas y se ha limitado la anchura de su elemento contenedor:

Figura 6.11. Ejemplo de propiedad white-space

Por último, CSS define unos elementos especiales llamados "pseudo-elementos" que permiten aplicar estilos a ciertas partes de un texto. En concreto, CSS permite definir estilos especiales a la primera frase de un texto y a la primera letra de un texto.

El pseudo-elemento :first-line permite aplicar estilos a la primera línea de un texto. Las palabras que forman la primera línea de un texto dependen del espacio reservado para mostrar el texto o del tamaño de la ventana del navegador, por lo que CSS calcula de forma automática las palabras que forman la primera línea de texto en cada momento.

La siguiente imagen muestra cómo aplica CSS los estilos indicados a la primera línea calculando para cada anchura las palabras que forman la primera línea:

Figura 6.12. Ejemplo de pseudo-elemento first-line

La regla CSS utilizada para los párrafos del ejemplo se muestra a continuación:

p:first-line { 
  text-transform: uppercase;
}

De la misma forma, CSS permite aplicar estilos a la primera letra del texto mediante el pseudo-elemento :first-letter. La siguiente imagen muestra el uso del pseudo-elemento :first-letter para crear una letra capital:

Figura 6.13. Ejemplo de pseudo-elemento first-letter

El código HTML y CSS se muestra a continuación:

#normal p:first-letter {
  font-size: 2em;
}
#avanzado p:first-letter {
  font-size: 2.5em;
  font-weight: bold;
  line-height: .9em;
  float: left;
  margin: .1em;
}
#avanzado p:first-line {
  font-weight: bold;
}
 
<div id="normal">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum 
dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
per inceptos hymenaeos. Etiam pharetra blandit purus.</p>
</div>
<div id="avanzado">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum 
dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
per inceptos hymenaeos. Etiam pharetra blandit purus.</p>
</div>