Aspecto del texto
Una buena parte de cualquier página web es texto. Y CSS3 también puede definir reglas para este elemento de la página, no solo para definir tipo, tamaño o estilo de letra (atributos font-), también para alinearlo, o darle color o aplicarle efectos.
Una vez has elegido el tipo de letra que vas a usar para escribir algo en tu página web, lo siguiente suele ser decidir el color que vas a usar, la alineación, si vas a destaclaro de alguna manera, ... todas estas opciones las puedes controlar con CSS. Las relativas al aspecto del texto son estas:
| Propiedad | Uso | Valor |
|---|---|---|
| color | Usa el el código de color CSS para darle color al texto | Código de color |
| direction | Para idiomnas que van de derecha a izquierda (rtl) o de izquierda a derecha (ltr) | ltr, rtl |
| text-decoration | Linea horizontal por encima, debajo o encima (tachado). Se pueden combinar. | none, underline, overline, |
| text-shadow | Sirve para poner somba al texto | Posición y color |
| unicode-bidi | Para páginas con texto bidireccinoal |
Al hablar del aspecto vamos a ver que puedes definir su color, hacer que aparezca en mayúsuclas o minúsuclas) y darle efectos como los subrayados y las sombras.Vamos a ver las distintas propiedades y sus efectos:
color: red;
text-transform: uppercase;
text-decoration: overline underline;
}
Esta clase (destacado) daría como resultado:
un texto de color rojo, todo en mayúsculas y con una linea por encima y por debajo
Vamos a ponerle sombra, para esto necesitamos cuatro propiedades:
Distancia X: la distancia horizontal al texto
Distancia Y: distancia vertical al texto
Difuminado: el grado de difuminado de la sombra
Color: el color de sombra. Se usa un código de color CSS, es posible usar un color con una opacidad inferior a 1 para complementar el efecto difuminado.
Apliquemos este estilo, que completo con capitalize para que se vea su efecto, la frase está toda en minúscula
color: #338;
text-transform: capitalize;
text-shadow: 5px 10px 8px #39F;;
Dimensiones
¿Quéhacer si el texto no cabe en su contenedor?¿como manejar el espaciado?. Aquí agrupo algunas propiedades relativas a dimensiones del texto (no a tamaño de caracteres, que se definene con font-size)
| Propiedad | Uso | Valor |
|---|---|---|
| letter-spacing | Espacio entre los caracteres | Medida |
| word-spacing | Espaciado entre palabras | Medida |
| white-space | Como manejar los espacios y las rupturas de linea |
normal nowrap pre pre-wrap pre-line |
| line-height | Altura de la linea, es un interllineado | Medida |
| text-overflow | Especifica que hacer si el texto no cabe en un elemento, si cortarlo o mostrar puntos suspensivos. | clip, ellipsis |
Mediante el estilo adecuado podemos conseguir efectos sin modificar los caracteres, sino trabajando sobre los espaciados e interlineados del texto. Es tan simple como por ejemplo aumentar el espacio entre caracteres o entre palabras, bien ea para acomodar el texto a un espacio o simplemente para resaltar.
<span style="letter-spacing: 3px">palabra expandida</span>
<span style="letter-spacing: -3px">palabra apretadita</span>
<span style="letter-spacing: normal">espaciado normal (0px)</span>
En esta linea hay una palabra expandida. Los caracteres se separan más de lo habitual.
También puedes comprimirpara tener una palabra apretadita con valores negativos.
De la misma manera podemos separar u unir las palabras de un texto, esta vez la proeiedad usada es word-spacing, que mediante una medida nos separa o acerca plabras entre sí
<span style="word-spacing: 2em">la frase expandida</span>
<span style="word-spacing: -0.2em">la frase apretadita</span>
<span style="word-spacing: normal">la frase normal (0px)</span>
Este es un ejemplo de
Este es un ejemplo de
En el segundo caso nos hemos comido el espacio entre palabras, pero los caracteres del texto siguen igual de separados.
El espaciado de palabras o caracteres se usa más para resaltar que para ajustar el texto en una linea, de esta tarea se encarga la propiedad white-space.
<span style="white-space:nowrap>Estes un texto extenso...</span>
<span style="white-space:pre">Estes un texto extenso...</span>
<span style="white-space:pre-wrap">Estes un texto extenso...</span>
<span style="white-space:pre-line">Estes un texto extenso...</span>
El texto comienza con una secuencia de 9 espacios y lleva un salto de linea antes de ¿que hacer, no un <br> sino un salto de linea del editor de texto. Estos saltos de linea no son respetados por HTML, que también colapsa (unifica) los espacios en blanco seguidos, a no ser que lo metas todo en un bloque <pre>. Esto mismo hace el valor pre. Mientras que el valor wrap cortar un linea al llegar al margen.
En el texto normal (white-space: normal) el salto de linea no se respeta y los espacios se unifican. El texto se mete dentro de la caja contenedora ajustándolo al alineamiento horizontal del texto y repartiendo la linea adecuadamente.
Para que no corte el texto y siga por encima del borde puedes darle el valor nowrap si no quieres mantener ni los espacios ni el salto de linea, o pre si quieres mantenerlos, copia literal del texto
Las otras opciones serían mantener espacios y slatos de linea pero cortar al llegar al borde, pre-wrap (pre y wrap) o colapsar los espacios en blanco y respetar el salto de linea pre-line.
Los cuadros muestran los compartamientos del texto en cada caso
No obstante aún queda una opción para los textos demasiado largos para un cuadro, el compartamiento se controla mediante text-overflow. Podemos simplemente ocultar el texto sobrante (text-overflow: clip) o agregar puntos suspensivos (text-overflow:ellipsis). Para que este valor actúe necesita que el texto no sea cortado (white-space:nowrap) y que el texto sobrante quede oculto (overflow:hidden)
<span style="white-space: nowrap; overflow: hidden; text-overflow: clip>Estes un texto extenso...</span>
<span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">Estes un texto extenso...</span>