Mediante las propiedades que veremos en este artículos podemos decorar o transformar nuestros textos. Se han dividido en 3 apartados:
- 1️⃣ Decoraciones: Añadir trazos para decorar el texto
- 2️⃣ Transformaciones: Realizar modificaciones a mayúsculas, minúsculas, etc...
- 3️⃣ Énfasis: Añadir carácteres para enfatizar el texto
Decoraciones de texto
Para establecer decoraciones en ciertos fragmentos de texto podemos utilizar las propiedades de la familia text-decoration-*. Normalmente, esta propiedad se suele utilizar sobre los elementos <a> para modificar el subrayado por defecto que se establece en los enlaces.
Antes de hacer esto, recuerda que los enlaces suelen tener el subrayado para que el usuario lo identifique como un enlace, por lo que puede ser contraproducente eliminarlo.
Las propiedades de decoración de texto son las siguientes:
| Propiedad | Valor | Significado |
|---|---|---|
text-decoration-line | none | underline | overline | line-through | Indica el tipo de decoración de texto. |
text-decoration-style | solid | double | dotted | dashed | wavy | Trazo de la decoración. |
text-decoration-color | currentcolor | | Indica el color de la decoración. |
text-decoration-thickness | auto | from-font | | Indica el grosor del trazo de la decoración. |
text-underline-position | auto | from-font | under | Indica donde aparece el trazo del subrayado. |
text-underline-offset | auto | | Indica el desplazamiento del trazo del subrayado. |
text-decoration | Propiedad de atajo de las anteriores. |
Observa que existen dos propiedades relacionadas con la familia text-decoration, pero sólo aplican cuando se establece un valor underline, hablaremos de ellas en este artículo, un poco más adelante.
La propiedad text-decoration-line
La propiedad text-decoration-line permite establecer o cambiar el tipo de decoración de texto, entre los que se encuentran los siguientes valores:
| Valor | Descripción |
|---|---|
none | Elimina cualquier tipo de decoración. |
underline | La línea de decoración se establece por abajo (subrayado). |
overline | La línea de decoración se establece por encima. |
line-through | La línea de decoración es una línea tachada. |
Esta propiedad se utiliza junto a otras propiedades para modificar el trazo de la decoración. Por ejemplo, la propiedad text-decoration-style permite establecer el tipo de trazo, donde hay ciertos estilos similares a los que se aplican en los bordes CSS. Los valores son los siguientes:
| Valor | Descripción | Ejemplo |
|---|---|---|
solid | Indica un trazo continuo. | ManzDev |
double | Indica un trazo doble, con líneas paralelas. | ManzDev |
dotted | Indica un trazo discontinuo, con puntos. | ManzDev |
dashed | Indica un trazo discontinuo, con rayas. | ManzDev |
wavy | Indica un trazo ondulado. | ManzDev |
La propiedad text-decoration-color permite indicar el color del trazo, independientemente del color del texto. Por defecto, el valor utilizado es currentcolor, que es el color actual del texto. Por otro lado, la propiedad text-decoration-thickness permite establecer el grosor del trazo.
Por último, la propiedad text-decoration es la propiedad de atajo que podemos utilizar para aplicar todas las propiedades anteriores en una sola:
.text-container {
/* Sintaxis clásica */
text-decoration: underline;
/* Sintaxis moderna */
text-decoration: 2px wavy overline gold;
}<div class="text-container">Manz.dev te observa</div>Antiguamente, la propiedad
text-decorationtenía una sintaxis limitada con el valor detext-decoration-line, sin embargo, actualmente funciona como propiedad de atajo donde podemos establecer los valores de las 4 propiedades anteriores.
Distancia del trazo de decoración
Mediante las propiedades text-underline-position y text-underline-offset podemos establecer la distancia del trazo del subrayado respecto al texto, algo que podría ser interesante si el trazo está molestando o demasiado cerca del texto, dependiendo de la tipografía que se use.
.text-container {
text-decoration: 2px solid underline red;
text-underline-position: under;
text-underline-offset: 10px;
}<div class="text-container">Manz.dev te observa</div>Por ejemplo, en el ejemplo anterior, text-underline-position establece que el trazo debe aparecer por debajo del trazo habitual. Además, con la propiedad text-underline-offset puedes establecer una distancia de separación específica, que con valores negativo, puede incluso invertirse y dirigirse en dirección contraria.
Para que estas propiedades funcionen, la propiedad text-decoration-line (o su atajo) debe estar fijada al valor underline.
Transformaciones de texto
En CSS es posible realizar transformaciones a ciertos textos, donde a pesar de tener un texto original en el HTML, queremos mediante CSS realizar una transformación y ponerlo todo en mayúsculas, todo en minúsculas o transformaciones similares sin tener que modificar el contenido HTML.
| Propiedad | Significado |
|---|---|
text-transform | Convierte un texto, transformándolo a una variación (minúsculas, mayúsculas, capitalizado, etc...) |
Para ello, mediante esta propiedad text-transform se pueden indicar varios valores:
| Valor | Descripción |
|---|---|
| none | No realiza ninguna transformación. Valor por defecto. |
capitalize | Convierte a mayúsculas la primera letra de cada palabra. |
uppercase | Convierte a mayúsculas todas las letras. |
lowercase | Convierte a minúsculas todas las letras. |
⚠️ full-width | Escribe letras en formato ancho, alineadas como ideogramas asiáticos. |
Todos estos valores están muy bien soportados en navegadores actuales, sin embargo, el valor full-width es muy reciente y aún tiene un soporte irregular:
Énfasis de texto
En ciertos idiomas, se suelen utilizar ciertos carácteres para enfatizar textos, generalmente colocados sobre las palabras. Las propiedades de la familia text-emphasis-* sirven para este propósito:
| Propiedad | Valor | Significado |
|---|---|---|
text-emphasis-style | none | dot | circle | triangle double-circle | sesame | Indica un carácter para utilizar de énfasis. |
text-emphasis-style | Indica un carácter personalizado de énfasis. | |
text-emphasis-color | Indica el color de los carácteres de énfasis. | |
text-emphasis-position | over right | over left under right | under left | Indica la posición de los carácteres de énfasis. |
text-emphasis | Propiedad de atajo de las dos primeras. |
La propiedad text-emphasis-style permite establecer unos carácteres para enfatizar los textos, que por defecto se establecen sobre los mismos. Se pueden indicar los valores dot, circle, double-circle, triangle o sesame, los cuales pueden combinarse con las palabras clave open y filled si queremos que sean signos huecos o rellenos, respectivamente:
.text-container {
font-size: 2rem;
text-emphasis-style: open triangle;
text-emphasis-color: red;
text-emphasis-position: over right;
}<div class="text-container">Manz.dev te observa</div>Por otro lado, la propiedad text-emphasis-color nos permite elegir un color para estos carácteres, y la propiedad text-emphasis-position indicar en que lugar deben aparecer los carácteres. Asegúrate de marcar dos opciones para incluir idiomas con diferentes direccionalidades.
También puede indicarse un text-emphasis-style para personalizarlo con carácteres concretos, e incluso emojis (lo cual aunque llamativo, podría no ser una muy buena idea):
.text-container {
font-size: 2rem;
text-emphasis-style: "🎈";
text-emphasis-position: under left;
}<div class="text-container">Manz.dev te observa</div>Recuerda que tienes una propiedad
text-emphasisde atajo que nos permite resumir las dos primeras propiedadestext-emphasis-styleytext-emphasis-coloren una sola.
El soporte de esta familia de propiedades es bastante buena en la actualidad. Puedes verla a continuación:
