Proprietà CSS text-decoration-skip-ink
Usa la proprietà CSS text-decoration-skip-ink per specificare come devono essere disegnate sottolineature e sopralineature. Valori ed esempi.
La proprietà text-decoration-skip-ink controlla il comportamento di sottolineature e sopralineature quando attraversano le parti di una lettera che scendono sotto la linea di base (discendenti, come le code di "g", "y", "p") o che si alzano al di sopra (ascendenti). Invece di tracciare una linea che taglia direttamente quei tratti, il browser può lasciare piccoli spazi affinché la linea "salti" l'inchiostro del glifo — da qui il nome della proprietà.
Si tratta di una funzionalità pensata per migliorare la leggibilità. Una sottolineatura continua che taglia una "g" o una "j" può rendere il testo più difficile da leggere; saltando l'inchiostro, la sottolineatura rimane visivamente pulita. I browser moderni abilitano questo comportamento per impostazione predefinita (auto), quindi questa proprietà viene usata principalmente per disattivarlo (none) quando si desidera una linea continua e ininterrotta.
text-decoration-skip-ink influisce solo sui valori underline e overline della proprietà text-decoration-line. Il valore line-through si posiziona al centro del testo anziché attraversare i discendenti, quindi non viene influenzato.
La proprietà text-decoration-skip-ink fa parte della famiglia abbreviata più ampia di text-decoration, insieme a text-decoration-line, text-decoration-color e text-decoration-style.
| Initial Value | auto |
|---|---|
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS Text Decoration Module Level 4 |
| DOM Syntax | object.style.textDecorationSkipInk = "none"; |
Sintassi
Valori CSS text-decoration-skip-ink
text-decoration-skip-ink: auto | none | initial | inherit;La forma abbreviata accetta anche le parole chiave globali initial e inherit. Poiché la proprietà è ereditata e il valore predefinito è auto, raramente è necessario impostarla esplicitamente, se non per disabilitare il salto dell'inchiostro.
Esempio della proprietà text-decoration-skip-ink
L'esempio seguente mette a confronto i due stati: il primo paragrafo impone una sottolineatura continua (none), mentre il secondo lascia che il browser salti l'inchiostro attorno ai discendenti (auto). Osserva come si comporta la linea sotto lettere come la "p".
Esempio di codice 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>Risultato
Valori
| Valore | Descrizione |
|---|---|
| auto | Le sottolineature e le sopralineature vengono tracciate solo dove non toccano o si avvicinano troppo a un glifo. Questo è il valore predefinito della proprietà. |
| none | Le sottolineature e le sopralineature vengono tracciate per tutto il contenuto testuale, incluse le parti che attraversano discendenti e ascendenti dei glifi. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Quando utilizzarla
- Mantieni il valore predefinito (
auto) per il corpo del testo e i link. Produce sottolineature più pulite e leggibili, con spazi posizionati automaticamente attorno ai discendenti. - Usa
nonequando il design richiede una linea continua e ininterrotta — ad esempio, una sottolineatura volutamente spessa usata come accento stilistico, oppure quando i piccoli spazi sembrano artefatti grafici a una determinata dimensione del carattere.
Un pattern comune consiste nel reimpostare la proprietà a un valore noto, così il rendering risulta uniforme tra i browser che in precedenza tracciavano la linea attraverso i glifi per impostazione predefinita:
a {
text-decoration-line: underline;
text-decoration-skip-ink: auto; /* explicitly opt in to skipping */
}Supporto dei browser
text-decoration-skip-ink è supportata da tutti i browser moderni (Chrome, Edge, Firefox e Safari). Poiché la proprietà si degrada semplicemente a una normale sottolineatura quando non è supportata, non è necessario alcun fallback — i browser più vecchi tracciano la linea direttamente attraverso i glifi, il che rimane comunque perfettamente leggibile.