CSS en elaboración: Decoración de texto

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 2022- en elaboración) amplía sus posibilidades.

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

• text-decoration: propiedad compuesta,
  Espera tres valores (text-decoration-line, text-decoration-style y text-decoration-color)
• text-decoration-line: none | underline | overline | line-through | blink
  Posición de la línea
• text-decoration-style: solid | double | dotted | dashed | wavy
  Estilo de línea
• text-decoration-color: color
  Color de la línea:
• text-underline-position: under | left | right
  Posición de la línea respecto al texto

p {
  text-decoration: underline wavy red;
}

p {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

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

En la futura recomendación CSS 4: Decoración de texto, actualmente (octubre de 2022) en elaboración, aparecen algunas propiedades de decoración de texto que los navegadores no admiten todavía.

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

• text-decoration-skip: none | objects | spaces | ink | edges | box-decoration
  Elementos que se salta la línea
• text-decoration-skip-ink: auto | none
  Si la línea salta o no los elementos
• text-decoration-line: añade los valores spelling-error | grammar-error
• text-underline-offset: auto | from-font | longitud
  Desplazamiento de la línea
• text-decoration-thickness: auto | from-font | longitud

CSS 3 Énfasis: text-emphasis

La propiedad text-emphasis de CSS Text Decoration Module Level 3 (actualmente -octubre de 2022- 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.

• text-emphasis: propiedad compuesta
  Espera dos valores (text-emphasis-style, text-emphasis-color)
• text-emphasis-style: none [ filled | open ] [ dot | circle | double-circle | triangle | sesame ] carácter
• text-emphasis-color: color
• text-emphasis-position: over | under && right | left (se deben escribir las dos posiciones, horizontal y vertical, pero el orden no es importante)

p {
  text-emphasis: dot red;
}

p {
  text-emphasis: circle red;
}

p {
  text-emphasis: double-circle red;
}

p {
  text-emphasis: triangle red;
}

p {
  text-emphasis: sesame red;
}

p {
  text-emphasis: "X" red;
}

p {
  text-emphasis: double-circle red;
  text-emphasis-position: under right;
}

CSS 4 Énfasis: text-emphasis

En la futura recomendación CSS 4: Decoración de texto, actualmente (octubre de 2022) en elaboración, aparecen algunas propiedades de decoración de texto que los navegadores no admiten todavía.

• text-emphasis-skip: spaces | punctuation | symbols | narrow
  Elementos en los que añade énfasis