CSS en elaboración: Decoración de texto

En esta lección se comentan algunas de las propiedades CSS definidas en las futuras recomendaciones CSS Text Decoration Module Level 3 y CSS Text Decoration Module Level 4. Actualmente (octubre de 2021) estas recomendaciones se encuentran en elaboración y no se consideran parte de la definición oficial de CSS en CSS Snaphot 2020, aunque se espera que puedan hacerlo en el futuro.

Estas propiedades permiten añadir al texto ciertos tipos de decoración que amplian los disponibles en CSS 2.

CSS 3 Decoración con líneas: text-decoration

Esta propiedad ya existía en CSS 2, aunque CSS Text Decoration Module Level 3 (actualmente -octubre de 2021- en elaboración) amplía sus posibilidades.

Las propiedades de decoración de texto mediante una línea son las siguientes:

p {
  text-decoration: underline wavy red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

CSS 4 Decoración con líneas: text-decoration

Algunas propiedades de decoración de texto que los navegadores no admiten todavía se han incorporado en la futura recomendación CSS 4: Decoración de texto, actualmente (octubre de 2021) en elaboración.

Las propiedades de decoración de texto mediante una línea son las siguientes:

CSS 3 Énfasis: text-emphasis

La propiedad text-emphasis de CSS Text Decoration Module Level 3 (actualmente -octubre de 2019- en elaboración) está pensada para añadir un símbolo al texto. Estos símbolos se utilizan en los lenguajes asiáticos orientales para enfatizar el texto.

Actualmente (junio de 2020), las propiedades text-emphasis, text-emphasis-style y text-emphasis-position funcionan en Firefox, pero no en Chrome, como se comenta en la página de diferencias entre navegadores.

Incorrecto en Chrome Correcto en Firefox
p {
  text-emphasis: dot red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox
p {
  text-emphasis: circle red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox
p {
  text-emphasis: double-circle red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox
p {
  text-emphasis: triangle red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox
p {
  text-emphasis: sesame red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto en Chrome Correcto en Firefox
p {
  text-emphasis: "X" red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Actualmente (junio de 2020), la propiedad text-emphasis-position funciona en Firefox, pero no en Chrome, como se comenta en la página de diferencias entre navegadores.

Incorrecto en Chrome Correcto en Firefox
p {
  text-emphasis: double-circle red;
  text-emphasis-position: under right;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

CSS 4 Énfasis: text-emphasis

Algunas propiedades que los navegadores no admiten todavía se han incorporado en la futura recomendación CSS Text Decoration Module Level 4, actualmente (octubre de 2021) en elaboración.