Text-decoration revisado. Disponible en colores y otros estilos 14.6.17
¿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
Con todo el cariño para quienes aún siguen diciendo que no se puede cambiar el color a "la rayita de los enlaces".
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:
- Text-decoration se convierte en la forma acortada de las nuevas propiedades:
- text-decoration-line
- text-decoration-color
- text-decoration-style
- 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'.
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
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:
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.
Kseso
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
Lástima que no se puedan combinar 'over' y 'under', porque así sería más fácil.
ResponderEliminar<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<style type="text/css">
p {
background-color: black;
text-align: center;
border-radius: 3em / 50%;
}
span {
font: bold 60px/1.2 sans-serif;
color: white;
-webkit-text-emphasis-style: '*'; /* \2383'; */
-webkit-text-emphasis-color: goldenrod;
-webkit-text-emphasis-position: under;
letter-spacing: .1em;
}
span:before, span:after {
content:'*';
display: inline-block;
font: bold 30px/1.2 sans-serif;
color: goldenrod;
-webkit-text-emphasis-style: '\2733';
-webkit-text-emphasis-color: goldenrod;
-webkit-text-emphasis-position: under;
}
</style>
</head>
<body>
<p>
<span>KSESO CSS?</span>
</p>
</body>
</html>
Me quedé a mitad de camino. Y sólo lo pude hacer andar en Chrome (debería intentar más pruebas).
Muy buen artículo. Creí que todo esto aún era ciencia ficción.
Pues fíjate que yo echo de menos otras propiedades "complementarias", como poder definir la anchura (text-decoration-width: 1rem;) e incluso que text-decoration-position: under -10px; admitiese valores numéricos y alguna otra más.
EliminarDe hecho pregunté, pero como no localicé los "twiteres" de los 2 ponentes la @w3c me dio la callada por respuesta xD
Pero, sí, por supuesto. Obvié mencionar que intenté simular un "borde de caracteres", y si pudiesemos combinar valores como en 'text-decoration: underline overline' se nos haría más fácil.
EliminarSupongo que todavía podremos seguir con simulaciones, y cambiar el grosor o la distancia al texto del subrrayado usando un borde y un 'padding'; hasta que incorporen esos valores numéricos.
Lo que pediría, si encontrás a la gente del W3C, es un '-text-emphasis-image: url()'.
Digo, si no es mucha molestia.