# Texto

En esta página 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 {
      background-color: gold;
      color: magenta ;
    }
    p {
      background-color: lightblue;
      color: blue;
    }
| ## 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).

Nota: Internet Explorer 7 representa correctamente el color de fondo de <html> y <body>. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE7 e IE6.

Volver al principio de la página

## 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 principio de la página

## 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:

Nota: La posición relativa de los elementos es la misma en Firefox, Internet Explorer y Chrome, aunque las líneas horizontales que se han añadido a los ejemplos para facilitar la comparación no se muestran de la misma manera en los tres navegadores, como se explica en el apartado dedicado a la propiedad text-decoration.

Volver al principio de la página

## 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), por ello la primera línea empieza más a la izquierda que el resto de líneas del párrafo. Como se sale de la celda, se ve bastante mal, pero poniendo margen al párrafo se corrige este problema (ver ejemplo siguiente).
    p {
      margin-left: 25px;
      text-indent: -25px;
    }
| Esto es un párrafo p normal y corriente con margen izquierdo y cuya primera línea tiene sangría negativa del mismo valor que el margen (sangría francesa), por ello la primera línea empieza más a la izquierda que el resto de líneas del párrafo.

Volver al principio de la página

## 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. 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.

La propiedad letter-spacing se aplica a todas las letras, incluida la última, como muestran los ejemplos siguientes en los que se añade un espacio final:

    span {
      letter-spacing: 10px;
      text-decoration: underline;
    }
| Letras separadas
    span {
      background-color: lightblue;
      letter-spacing: 10px;
    }
| Letras separadas

Este espacio final puede producir efectos no deseados, como en los ejemplos siguientes en que el texto parece no estar centrado (al poner color de fondo al texto se ve que el texto sí que está centrado, pero el espacio final hace que parezca que no).

    p {
      letter-spacing: 50px;
      text-align: center;
    }
| XX
    p {
      letter-spacing: 50px;
      text-align: center;
    }

    span {
      background-color: lightblue;
    }
| XX

Nota: Internet Explorer 8 representa correctamente el espacio final al aplicar letter-spacing a un elemento en-línea. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE8 e IE7.

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 {
      word-spacing: 5px;
    }
| Esto es un párrafo normal y corriente.
    p {
      word-spacing: 10px;
    }
| Esto es un párrafo normal y corriente.
    p {
      word-spacing: -5px;
    }
| Esto es un párrafo normal y corriente.

La propiedad word-spacing no se aplica a la última palabra.

    p {
      text-align: center
      word-spacing: 50px;
    }
| XX
    span {
      text-decoration: underline;
      word-spacing: 10px;
    }
| Palabras separadas
    span {
      background-color: lightblue;
      word-spacing: 10px;
    }
| Palabras separadas

Volver al principio de la página

## 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).

Nota: Internet Explorer y Chrome no interpretan el valor blink, como se comenta en la página de diferencias entre Firefox e Internet Explorer.

    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.

Nota: Los navegadores no muestran el valor overline de la misma manera en todos los casos. Si un párrafo tiene suprarayado y alguna palabra de ese párrafo está aumentada:

- Firefox mantiene la línea de suprayado a la misma altura a lo largo de todo el párrafo, basándose en el primer carácter del párrafo
- Internet Explorer también mantiene la línea de suprarayado a la misma altura a lo largo de todo el párrafo, pero basándose en el carácter más alto (como se comenta en la página de diferencias entre Firefox e Internet Explorer).
- Chrome dibuja la línea en la parte superior de cada carácter, desplazándola verticalmente en función del tamaño del carácter.

    <p style="text-decoration: overline;">Este es un párrafo
    <span style="font-size: 200%">suprarayado</span>.</p>
| Este es un párrafo suprayado.

Volver al principio de la página

## 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.

El valor capitalize únicamente transforma la primera letra de cada palabra, el resto de letras se mantienen como estén (minúsculas o mayúsculas).

    p {
      text-transform: capitalize;
    }
| Este PÁRRAFO tiene una palabra en mayúsculas.

Volver al principio de la página

## 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.

Esta propiedad estaba incluida en la recomendación CSS 2 y no está incluida en la recomendación CSS 2.1, pero está incluida en la recomendación CSS 3 Text (actualmente -octubre de 2011- en fase de borrador).

Nota: Internet Explorer no interpreta esta propiedad, como se comenta en la página de diferencias entre Firefox e Internet Explorer.

    p {
       text-shadow: grey 1px -1px
    }
| Esto es un párrafo con sombreado.
    p {
       text-shadow: grey 5px -5px 2px;
    }
| Esto es un párrafo con sombreado desenfocado.

Volver al principio de la página

## 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)

    pre {
      white-space: normal;
    }
    <pre>white-space: normal
            Espacios en blanco seguidos: (     ).
            Tercera línea.</pre>
    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

    pre {
      white-space: pre;
    }
    <pre>white-space: pre
             Espacios en blanco seguidos: (     ).
             Tercera línea.</pre>
    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.

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

Nota: Los borradores de las recomendaciones CSS 2.1 y CSS 3 Text (actualmente -octubre de 2011- en fase de borrador) incluyen también los valores pre-wrap y pre-line.

Volver al principio de la página

## 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 {
      direction: ltr;
      unicode-bidi: bidi-override;
    }
| Esto es un párrafo normal y corriente.
    p {
      direction: rtl;
      unicode-bidi: bidi-override;
    }
| 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 {
      direction: ltr;
      unicode-bidi: bidi-override;
    }
Columna 1 - Fila 1 | Columna 2 - Fila 1
Columna 1 - Fila 2 | Columna 2 - Fila 2
    table {
      direction: rtl;
      unicode-bidi: bidi-override;
    }
Columna 1 - Fila 1 | Columna 2 - Fila 1
Columna 1 - Fila 2 | Columna 2 - Fila 2

Volver al principio de la página

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.