soy Kseso y esto EsCSS

Text-decoration revisado. Disponible en colores y otros estilos

¿Cuántas veces te dijeron que no podías aplicar colores a text-decoration y otras cosas por el estilo? NUEVO Y POR FIN ya está disponible text-decoration-color más otras propiedades de su grupo y las afines a text-emphasis.

Text-decoration revisado. Disponible en colores y otros estilos

·Por Kseso ✎ 3

Con todo el cariño para quienes aún siguen diciendo que no se puede cambiar el color a "la rayita de los enlaces".

Text-decoration nuevas propiedades

Si eres de quienes aún piensan que la propiedad text-decoration sigue estando limitada a si le ponemos una rayita o no y dónde (arriba, abajo o al medio) va siendo hora de revisar el tema y ponerse al día.

Esta veterana propiedad también ha sido sometida a revisión por los grupos de trabajo del consorcio y el documento que la desarrolla, "CSS Text Decoration Module Level 3", tiene desde el 1 de Agosto de 2013 la escarapela de candidate recomendation.

Las novedades principales y más llamativas son:

  1. Text-decoration se convierte en la forma acortada de las nuevas propiedades:
    • text-decoration-line
    • text-decoration-color
    • text-decoration-style
  2. Se añaden nuevas propiedades relacionadas con la decoración del texto:
    • text-decoration-skip
    • text-underline-position
    • text-emphasis que es la forma acortada de las propiedades
      • text-emphasis-style
      • text-emphasis-color
    • text-emphasis-position

La propiedad Css text-decoration

Esta propiedad ha sido ampliada con tres nuevas que permiten elegir el tipo de línea, su color y ubicación de forma individual. En su forma acortada su sintaxis es:
text-decoration: <text-decoration-line> || <text-decoration-style> || <text-decoration-color>

del { color: #888; text-decoration: line-through;/*Vieja forma*/ text-decoration: line-through wavy red;/*nuevo*/ }

See the Pen LpdxRV by Kseso (@Kseso) on CodePen.

La propiedad Css text-decoration-line

Es la equivalente a la vieja propiedad text-decoration. Indica el lugar donde se coloca el trazo. Los valores posibles son los ya existentes:
none | [ underline || overline || line-through ]

Si echas de menos el valor blink no es por una omisión mía. Ha sido marcado como deprecated. Pero si la quieres siempre puedes crear la animación Css oportuna.

La propiedad Css text-decoration-style

Esta propiedad indica el tipo de línea generada.
solid | double | dotted | dashed | wavy. Las palabras clave tienen el mismo significado que el la propiedad 'borde'. Con 'wavy' obtienes una línea ondulada.

La propiedad Css text-decoration-color

Ahora ya el color del trazo generado no está obligatoriamente ligado al valor de la propiedad 'color' del elemento. Ambos valores han quedado desligados.

La propiedad Css text-decoration-skip

Continuidad de la la línea de decoración.

La especificación Css2.1 indicaba para la propiedad text-decoratión lo siguiente:

Esta propiedad no es heredada, pero las cajas descendientes de una caja de bloque deberían tener en su formato la misma decoración (ej., deberían estar todas subrayadas). El color de las decoraciones debería permanecer igual aunque los elementos descendientes tuvieran diferente valores de 'color'.
las nuevas propiedades y valores css de text-decoration
Crédito imagen

Este efecto de propagación del tipo de decoración ya vimos en el blog cómo evitarlo: anulando el text-decoration "heredado" recurriendo al valor 'inline-block'.

El documento que estamos viendo introduce la nueva propiedad text-decoration-skip que especifica qué partes del contenido del elemento que tiene declarado algún tipo de decoración deben saltarse. Esto es, quedan sin decoración. Los valores posibles son:

  • none: Valor por defecto. El comportamiento es el tradicional de Css2.1. Hay propagación.
  • objects: Si es un elemento 'de naturaleza inline' ("atomic inline" en el original) (como una imagen o un inline-block) todo el elemento al que se le declara (incluido el margen si tuviera) se libra de la propagación del tipo de decoración declarado a su ancestro.
  • spaces: todos los espacios se libran. Incluidos los generados por las propiedades 'white-space', 'letter-spacing' y 'word-spacing'.
  • ink: la decoración no se dibuja sobre los trazos del elemento que sobrepasan la línea de la decoración. Por ejemplo sobre el rabo de la letra 'p' en text-d: underline.
  • edges: Entre elementos adyacentes deja un pequeño espacio sin decorar, de tal manera que la decoración no parezca un sólo trazo.
  • box-decoration: deja sin decoración el margen, border y padding del elemento. Esto sólo tiene efecto sobre decoraciones impuestas por un ancestro.

Puedes ver unas demos de text-decoration-skip aquí o en el siguiente pen:

See the Pen EXgWrY by Kseso (@Kseso) on CodePen.

La propiedad Css text-underline-position

Dónde se coloca la decoración respecto al interlineado Css. Valore posibles:

  • auto: El valor por defecto (y el clásico de Css2.1). Se corresponde con el "medio interlineado" o half-leading en Css.
  • under: La decoración queda 'fuera' de la caja del texto. Esto es, no se sobrepone a los trazos del texto que sobresalen (por arriba o por abajo) como la letra 'g' o la 'b'.
  • left | right: para las escrituras verticales.

Esta propiedad queda fuera de la acortada 'text-decoration'. Esto es, hay que declararla explícitamente por su nombre completo. Por lo tanto no se ve "reseteada" por 'text-decoration'.

Propiedad Css 'Emphasis Marks': remarca con estilo

Distintas marcas de énfasis con 'text-emphasis'

En tipografía, el énfasis es la exageración de las palabras en un texto con una fuente en un estilo diferente al resto del texto para enfatizarlas. En nuestra cultura occidental lo más común es enfatizar parte de un texto utilizando negritas, itálicas, espacios entre letras, color, tamaño... étc.

Sin embargo en la escritura de otras culturas, como la china, japonesa..., estas formas ni son válidas ni posibles. Se sirven de otros métodos, generalmente añadiendo "marcas". Esto es, símbolos o caracteres especiales.

Css en el documento referenciado introduce las propiedades del grupo text-emphasis para controlar qué marca utilizar con text-emphasis-style, su color con text-emphasis-color, y dónde ubicarlas con text-emphasis-position.

Las dos primeras, estilo y color, se pueden declarar conjuntamente con la propiedad text-emphasis que es la forma acortada.

La propiedad Css text-emphasis-style

Define qué tipo de marca genera la propiedad text-emphasis. Sólo admite una serie de palabras claves o una cadena de texto de un solo carácter gráfico. Estas son:

  • none: no genera marca. Es el valor inicial.
  • filled: La forma está llena de color sólido.
  • open: un círculo sin relleno.
  • dot: un pequeño círculo ‘•’ y el abierto ‘◦’
  • circle: un círculo relleno, mayor que dot ‘●’ y el abierto ‘○’
  • double-circle: un doble círculo ◉ y el abierto ‘◎’
  • triangle: un triángulo ‘▲’ y el abierto ‘△’
  • sesame: un apóstrofe ‘﹅’ y la abierta ‘﹆’
  • cadena de texto: Un cadena de texto formada únicamente por un solo carácter o signo gráfico. Si se indican varios sólo se representa el primero, según mis pruebas en codepen. Eso sí, es obligado usar comillas (simples o dobles). Tampoco he necesitado usar codificación css. No se si será por el editor.

La especificación indica que si se usan símbolos tipográficos deberían ser representados al 50% del tamaño de la fuente.

Nota, como ves en la imagen anterior se genera una marca de énfasis por cada carácter del texto, pero no en los espacios o separaciones de palabras.

La propiedad Css text-emphasis-color

Indica el color de las marcas de énfasis. Por defecto su valor inicial es currentColor y si no se especifica toma el color del texto.

La propiedad Css text-emphasis-position

Define la posición (con respecto a la letra) donde aparece dibujada la marca de énfasis. No admite valores numéricos (y por lo tanto tampoco ningún tipo de unidad). Al igual que la propiedad 'text-decoration-position' sólo son válidas las palabras clave:

  • over: sobre el texto.
  • under: debajo del texto.
  • left | right: con las mismas características que en la propiedad 'text-decoration-position'.

Orden de dibujado de las decoraciones del texto

Junto a estos dos grupos de propiedades (decoración y énfasis) la tercera que podemos usar como decoración de textos es text-shadow.

El orden de dibujado, si son utilizadas conjuntamente, de las decoraciones del texto son (sobre/tras o encima/debajo en el eje Z) como sigue. La primera quedaría bajo la segunda y sucesivas:

  • shadows
  • underlines
  • overlines
  • text
  • emphasis marks
  • line-through

Soporte y demo

El soporte a estas propiedades, pese a estar el documento que las desarrolla con el estatus de candidate recomendation es de lo más dispar. Algunos navegadores, en sus últimas versiones soportan unas sí y otras no. Y entre aquellas que soportan, unas lo son con su prefijo privativo y otras ya sin él.

Tampoco he encontrado información sobre este detalle en páginas como caniuse y en otras como quirksmode.org la existente es escasa y algo desfasada. Así que en caso de necesitar conocerlo con exactitud lo mejor es que te hagas tus propias demos en sitios como codepen (con la opción de prefix free activada) y lo complementes con el inspector de código de cada navegador.

Para saber cuál es el estado en cada momento nada como acudir a caniuse.com para estar al día sobre la implementación de las novedades recogidas en el documento CSS Text Decoration Module Level 3. En Junio de 2017 la puedes ver en la siguiente imagen:

Soporte a Text-decoration según caniuse.com

Mientras y como premio a que hayas llegado hasta el final de este artículo, aquí tienes una pequeña demo con las propiedades del grupo de "text-decoration" y "text-emphasis":

See the Pen Text-decoration: the review by Kseso (@Kseso) on CodePen

Artículo publicado originalmente en Agosto de 2013. Actualizado en Octubre de 2015. Revisado Junio de 2017.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso