Propriété CSS text-decoration-skip-ink
Utilisez la propriété CSS text-decoration-skip-ink pour définir le comportement des soulignements et surlignements. Découvrez les valeurs et les exemples.
La propriété text-decoration-skip-ink contrôle le comportement des soulignements et des surlignements lorsqu'ils traversent les parties d'une lettre qui descendent sous la ligne de base (descendantes, comme la queue des lettres « g », « y », « p ») ou s'élèvent au-dessus (ascendantes). Au lieu qu'une ligne coupe directement ces traits, le navigateur peut laisser de petits espaces afin que la ligne « saute » l'encre du glyphe — c'est de là que vient le nom.
Il s'agit d'une fonctionnalité d'amélioration de la lisibilité. Un soulignement plein qui tranche à travers un « g » ou un « j » peut rendre le texte plus difficile à lire ; le fait de sauter l'encre conserve un soulignement visuellement propre. Les navigateurs modernes activent ce comportement par défaut (auto), de sorte que cette propriété est principalement utilisée pour le désactiver (none) lorsque vous souhaitez une ligne continue et ininterrompue.
text-decoration-skip-ink n'affecte que les valeurs underline et overline de la propriété text-decoration-line. La valeur line-through se situe au milieu du texte plutôt que de croiser les descendantes, elle n'est donc pas concernée.
La propriété text-decoration-skip-ink fait partie de la famille du raccourci text-decoration, aux côtés de text-decoration-line, text-decoration-color et text-decoration-style.
| Valeur initiale | auto |
|---|---|
| S'applique à | Tous les éléments. |
| Héritage | Oui. |
| Animatable | Non. |
| Version | CSS Text Decoration Module Level 4 |
| Syntaxe DOM | object.style.textDecorationSkipInk = "none"; |
Syntaxe
Valeurs CSS de text-decoration-skip-ink
text-decoration-skip-ink: auto | none | initial | inherit;Le raccourci accepte également les mots-clés globaux initial et inherit. Puisque la propriété est héritée et que sa valeur par défaut est auto, il est rarement nécessaire de la définir explicitement, sauf pour désactiver le saut de l'encre.
Exemple de la propriété text-decoration-skip-ink
L'exemple ci-dessous place les deux états côte à côte : le premier paragraphe force un soulignement continu (none), tandis que le second laisse le navigateur sauter l'encre autour des descendantes (auto). Comparez le comportement de la ligne sous des lettres comme « p ».
Exemple de code 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>Résultat
Valeurs
| Valeur | Description |
|---|---|
| auto | Les soulignements et surlignements ne sont tracés que là où ils ne touchent pas ou n'approchent pas un glyphe. Il s'agit de la valeur par défaut de cette propriété. |
| none | Les soulignements et surlignements sont tracés pour tout le contenu textuel, y compris les parties qui croisent les descendantes et les ascendantes des glyphes. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite de la propriété de son élément parent. |
Quand l'utiliser
- Conservez la valeur par défaut (
auto) pour le texte courant et les liens. Elle produit des soulignements plus nets et plus lisibles, avec des espaces automatiquement placés autour des descendantes. - Utilisez
nonelorsqu'un design nécessite une ligne pleine et ininterrompue — par exemple, un soulignement délibérément épais utilisé comme accent stylistique, ou lorsque de petits espaces ressemblent à des artefacts de rendu à une taille de police donnée.
Un modèle courant consiste à le réinitialiser à une valeur connue afin que le rendu soit identique dans les navigateurs qui dessinaient auparavant à travers les glyphes :
a {
text-decoration-line: underline;
text-decoration-skip-ink: auto; /* explicitly opt in to skipping */
}Compatibilité des navigateurs
text-decoration-skip-ink est pris en charge par tous les navigateurs modernes (Chrome, Edge, Firefox et Safari). Comme la propriété se dégrade simplement en un soulignement normal lorsqu'elle n'est pas prise en charge, aucun repli n'est nécessaire — les anciens navigateurs tracent simplement la ligne à travers les glyphes, ce qui reste parfaitement lisible.