Decoraciones de texto

Decorar, transformar o enfatizar textos


—— ——

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;
}

Antiguamente, la propiedad text-decoration tenía una sintaxis limitada con el valor de text-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;
}

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;
}

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 en la propiedad 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;
}

Recuerda que tienes una propiedad text-emphasis de atajo que nos permite resumir las dos primeras propiedades text-emphasis-style y text-emphasis-color en una sola.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev