Propiedad CSS text-decoration-skip-ink
Usa la propiedad CSS text-decoration-skip-ink para controlar cómo se dibujan subrayados y sobrelineados. Consulta valores y ejemplos prácticos.
La propiedad text-decoration-skip-ink controla cómo se comportan los subrayados y sobrelineados cuando atraviesan las partes de una letra que cuelgan por debajo de la línea base (descendentes, como las colas de "g", "y", "p") o se elevan por encima de ella (ascendentes). En lugar de que la línea corte directamente esos trazos, el navegador puede dejar pequeños espacios para que la línea "salte" la tinta del glifo — de ahí el nombre de la propiedad.
Esta es una función de legibilidad. Un subrayado continuo que atraviesa una "g" o una "j" puede dificultar la lectura; al saltar la tinta se mantiene el subrayado visualmente limpio. Los navegadores modernos habilitan este comportamiento por defecto (auto), por lo que esta propiedad se utiliza principalmente para desactivarlo (none) cuando se desea una línea continua sin interrupciones.
text-decoration-skip-ink solo afecta a los valores underline y overline de la propiedad text-decoration-line. El valor line-through se sitúa en la mitad del texto en lugar de cruzar los descendentes, por lo que no se ve afectado.
La propiedad text-decoration-skip-ink forma parte de la familia abreviada de text-decoration, junto con text-decoration-line, text-decoration-color y text-decoration-style.
| Valor inicial | auto |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredable | Sí. |
| Animable | No. |
| Versión | CSS Text Decoration Module Level 4 |
| Sintaxis DOM | object.style.textDecorationSkipInk = "none"; |
Sintaxis
Valores de CSS text-decoration-skip-ink
text-decoration-skip-ink: auto | none | initial | inherit;La forma abreviada también acepta las palabras clave globales initial e inherit. Dado que la propiedad es heredable y tiene auto como valor predeterminado, rara vez es necesario establecerla explícitamente salvo para deshabilitar el salto de tinta.
Ejemplo de la propiedad text-decoration-skip-ink
El ejemplo siguiente muestra los dos estados uno junto al otro: el primer párrafo fuerza un subrayado continuo (none), mientras que el segundo permite al navegador saltar la tinta alrededor de los descendentes (auto). Compara cómo se comporta la línea bajo letras como "p".
Ejemplo de código CSS text-decoration-skip-ink
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.ex1 {
margin: 0;
font-size: 2em;
text-decoration: underline #1c87c9;
text-decoration-skip-ink: none;
}
.ex2 {
margin: 0;
font-size: 2em;
text-decoration: underline #1c87c9;
text-decoration-skip-ink: auto;
}
</style>
</head>
<body>
<h2>
Text-decoration-skip-ink property example
</h2>
<h3>
Text-decoration-skip-ink: none;
</h3>
<p class="ex1">
Lorem ipsum is simply dummy text
</p>
<h3>
Text-decoration-skip-ink:auto;
</h3>
<p class="ex2">
Lorem ipsum is simply dummy text
</p>
</body>
</html>Resultado
Valores
| Valor | Descripción |
|---|---|
| auto | Los subrayados y sobrelineados solo se dibujan donde no tocan ni se aproximan demasiado a un glifo. Es el valor predeterminado de esta propiedad. |
| none | Los subrayados y sobrelineados se dibujan en todo el contenido de texto, incluidas las partes que cruzan los descendentes y ascendentes del glifo. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Cuándo usarlo
- Mantén el valor predeterminado (
auto) para el texto del cuerpo y los enlaces. Produce subrayados más limpios y legibles que los usuarios esperan, con espacios colocados automáticamente alrededor de los descendentes. - Usa
nonecuando el diseño requiera una línea sólida e ininterrumpida — por ejemplo, un subrayado deliberadamente grueso empleado como acento estilístico, o cuando los pequeños espacios parecen fallos de renderizado a un tamaño de fuente determinado.
Un patrón habitual es restablecerlo a un valor conocido para que el renderizado sea el mismo en todos los navegadores que antes dibujaban la línea a través de los glifos:
a {
text-decoration-line: underline;
text-decoration-skip-ink: auto; /* explicitly opt in to skipping */
}Compatibilidad con navegadores
text-decoration-skip-ink es compatible con todos los navegadores modernos (Chrome, Edge, Firefox y Safari). Dado que la propiedad simplemente se degrada a un subrayado normal cuando no es compatible, no es necesario ningún recurso alternativo — los navegadores más antiguos simplemente dibujan la línea directamente a través de los glifos, lo que sigue siendo perfectamente legible.