# Texto

En esta lección se comentan las propiedades que se pueden aplicar al texto de una página web:

## Color del texto y color de fondo: color y background-color

La propiedad color permite establecer el color del texto. La propiedad background-color permite establecer el color de fondo del texto.

| body { background-color: aqua; } h2 { color: magenta ; background-color: gold; } p { color: blue; background-color: lightblue; } | ## Esto es un encabezado h2 Esto es un párrafo p normal y corriente. Esto es otro párrafo p.

El color de fondo de la página se establece en la etiqueta body,

El color de fondo de una etiqueta no se aplica solamente al texto, sino a la caja que contiene el texto (por eso el color de fondo se extiende hasta el extremo derecho de la línea).

Volver al índice

## Alineación horizontal: text-align

La propiedad text-align permite establecer la alineación horizontal de un bloque de texto. Los posibles valores de text-align son left (izquierda), right (derecha), center (centro) y justify (justificado a derecha e izquierda).

| body { text-align: justify; } h2 { text-align: center; } h3 { text-align: right } | ## Esto es un encabezado h2 ### Esto es un encabezado h3 Esto es un párrafo p normal y corriente que se muestra justificado a derecha e izquierda porque se ha establecido la propiedad en body y, por tanto, afecta a todos los elementos menos a los que tienen la propiedad explícitamente establecida con otro valor

Para centrar una imagen, el elemento que contiene la imagen tiene que tener su contenido centrado. Por ejemplo, si la imagen está en un párrafo, se puede definir la clase "p.centrado" con el atributo text-align establecido con el valor center y después dar al párrafo que contiene la imagen la clase "centrado". Lógicamente, si se añade texto al párrafo, el texto también se centrará.

| p.centrado { text-align: center; } |

Volver al índice

## Alineación vertical: vertical-align

La propiedad vertical-align permite establecer la alineación vertical de un elemento respecto al elemento que lo contiene. Los posibles valores de vertical-align son baseline, sub, super, top, text-top, middle, bottom y text-bottom.

    Alineación:  sub,   bottom,  middle, text-bottom, baseline, text-top, top,    super.
    Ejemplo:    bq bq bq bq  bq  bq bq bq
    Alineación:  sub,      bottom,   middle, text-bottom, baseline, text-top,   top,      super.
    Ejemplo:

Estos ejemplos no sirven para ver qué hace exactamente cada valor. Además, los ejemplos no se ven igual en IE y en FF.

Volver al índice

## Sangría: text-indent

La propiedad text-indent permite establecer la sangría de un bloque de texto. Su valor se puede establecer como cualquier otra longitud.

| p { text-indent: 25px; } | Esto es un párrafo p normal y corriente cuya primera línea tiene sangría, es decir, empieza más a la derecha que el resto de líneas del párrafo. La sangría es habitual en España (y no sólo para beberla).
| p { text-indent: -25px; } | Esto es un párrafo p normal y corriente cuya primera línea tiene sangría negativa (sangría francesa), es decir, empieza más a la izquierda que el resto de líneas del párrafo, así que se ve bastante mal. Poniendo margen al párrafo se corrige este problema (lo veremos más adelante).

Volver al índice

## Espaciado de letras y palabras: letter-spacing y word-spacing

La propiedad letter-spacing permite establecer un espaciado entre cada una de las letras de un bloque de texto. La propiedad word-spacing permite establecer un espaciado entre cada una de las palabras de un bloque de texto. Estos valores, positivos o negativos, se establecen como cualquier otra longitud y se añaden al espaciado normal.

| p { letter-spacing: 5px; } | Esto es un párrafo normal y corriente.
| p { letter-spacing: 10px; } | Esto es un párrafo normal y corriente.
| p { letter-spacing: -2px; } | Esto es un párrafo normal y corriente.

Ver bug 125.390 (letter-spacing se aplica a última letra) en la página de bugs de Firefox.

Volver al índice

## Decoración: text-decoration

La propiedad text-decoration permite añadir a un bloque de texto distintos tipos de rayado. Los posibles valores de text-decoration son none (ninguno), underline (subrayado), overline (sobrerayado), line-through (tachado) y blink (parpadeo). Internet Explorer no reconoce el valor blink.

| p { text-decoration: underline; } | Esto es un párrafo p normal y corriente.
| p { text-decoration: overline; } | Esto es un párrafo p normal y corriente.
| p { text-decoration: blink; } | Esto es un párrafo p normal y corriente.
| p { text-decoration: line-through; } | Esto es un párrafo p normal y corriente.

Volver al índice

## Mayúsculas / minúsculas: text-transform

La propiedad text-transform permite cambiar el texto a minúsculas o mayúsculas. Los posibles valores de text-transform son none (ninguno), capitalize (la primera letra de cada palabra en mayúsculas), uppercase (todas las letras en mayúsculas) y lowercase (todas las letras en minúsculas).

| p { text-transform: capitalize; } | Esto es un párrafo normal y corriente.
| p { text-transform: uppercase; } | Esto es un párrafo normal y corriente.
| p { text-transform: lowercase; } | Esto es un párrafo normal y corriente.

Volver al índice

## Sombreado: text-shadow

La propiedad text-shadow permite establecer un sombreado (o varios) al texto. Para definir un sombreado hay que indicar el color (si se omite, se utiliza el color del texto), la distancia horizontal (positiva o negativa), la distancia vertical (positiva o negativa) y el diámetro de desenfoque.

| p { text-shadow: red 3px 3px; } | Esto es un párrafo con sombreado.
| p { text-shadow: -3px 3px 2px; } | Esto es un párrafo con sombreado.

Ni Firefox ni Internet Explorer son capaces de interpretar esta propiedad, aunque parece ser que actualmente (abril de 2007) los navegadores Webkit, Konkeror o iCab sí pueden y el navegador Opera lo podrá en la futura versión 10. En cualquier caso, esta propiedad no está incluida en la recomendación CSS 2.1 (actualmente -abril de 2007- en fase de borrador)

El bug 10.713 (implementar text-shadow) de la página de bugs de Firefox permite conocer el estado de desarrollo de esta propiedad en Firefox.

Volver al índice

## Espacios en blanco: white-space

La propiedad white-space permite establecer el comportamiento del navegador con respecto a los espacios en blanco repetidos o con los saltos de línea del código fuente. Los posibles valores de white-space son normal, pre y nowrap. El comportamiento habitual de los navegadores (salvo en el caso de la etiqueta <pre>) es:

- colapsar los espacios en blanco, es decir, mostrar un único espacio en blanco cuando en el código fuente hay varios espacios en blanco seguidos
- colapsar los saltos de línea, es decir, no hacer caso de los saltos de línea que haya en el código fuente
- hacer "wrap", es decir, que si el texto no cabe en una línea, pasar el texto a la segunda línea y sucesivas.

Los ejemplos siguientes muestran la diferencia entre los tres casos.

El valor normal hace que el navegador sí colapse los espacios en blanco, no haga caso de los saltos de línea y sí haga wrap (nota: para ver que el navegador hace wrap, es decir que el texto ocupa más de una línea, puede hacer falta estrechar la ventana del navegador)

| p { white-space: normal; } |
    <p>white-space: normal
            Espacios en blanco seguidos: (     ).
            Tercera línea.
| white-space: normal Espacios en blanco seguidos: ( ). Tercera línea.

El valor pre hace que el navegador no colapse los espacios en blanco, sí haga caso de los saltos de línea y no haga wrap

| p { white-space: pre; } |
    <p>white-space: pre
             Espacios en blanco seguidos: (     ).
             Tercera línea.
    white-space: pre
            Espacios en blanco seguidos: (     ).
            Tercera línea.

El valor nowrap hace que el navegador sí colapse los espacios en blanco, no haga caso de los saltos de línea y no haga wrap (nota: aunque se estreche la ventana del navegador, el texto no hará wrap, es decir que se mantendrá en una sola línea.

| p { white-space: nowrap; } |
    <p>white-space: nowrap
             Espacios en blanco seguidos: (     ).
             Tercera línea.
| white-space: nowrap Espacios en blanco seguidos: ( ). Tercera línea.

Volver al índice

## Dirección: unicode-bidi y direction

La propiedad direction permite establecer la dirección de escritura. Los posibles valores de direction son ltr (de izquierda a derecha) y rtl (de derecha a izquierda).

La propiedad unicode-bidi permite establecer el algoritmo de establecimiento de direccionalidad. Los posibles valores de unicode-bidi son normal (no modifica el algoritmo establecido), embed (la dirección se puede redefinir dentro del bloque) y bidi-override (la dirección se puede redefinir dentro del bloque).

Nota: No tengo muy clara la diferencia entre embed y bidi-override, pero parece que embed sólo sirve para elementos en línea, mientras que bidi-override se puede aplicar a cualquier elemento.

| p { unicode-bidi: bidi-override; direction: ltr; } | Esto es un párrafo normal y corriente.
| p { unicode-bidi: bidi-override; direction: rtl; } | Esto es un párrafo normal y corriente.

Cuando se aplican a una tabla, esta propiedades establecen el orden de las columnas de una tabla.

| table { unicode-bidi: bidi-override; direction: ltr; } |
Columna 1 - Fila 1 | Columna 2 - Fila 1
Columna 1 - Fila 2 | Columna 2 - Fila 2
| table { unicode-bidi: bidi-override; direction: rtl; } |
Columna 1 - Fila 1 | Columna 2 - Fila 1
Columna 1 - Fila 2 | Columna 2 - Fila 2

Volver al índice