text-decoration-inset

Exemple interactif

text-decoration-inset: 20px;

text-decoration-inset: -0.5em;

text-decoration-inset: 20px 1em;

text-decoration-inset: -0.5rem -1.5rem;

text-decoration-inset: -2ex 10vw;

<section id="default-example">
  <p id="example-element">Karmadrome</p>
</section>

#example-element {
  font: 2.5em sans-serif;
  text-decoration: underline 0.3em limegreen;
}

Syntaxe

/* Le mot-clé auto */
text-decoration-inset: auto;

/* Une valeur de type <length> */
text-decoration-inset: 20px;
text-decoration-inset: -2rem;

/* Deux valeurs de type <length> */
text-decoration-inset: 20px 1em;
text-decoration-inset: -0.5rem -1.5rem;
text-decoration-inset: -2ex 1vw;

/* Valeurs globales */
text-decoration-inset: inherit;
text-decoration-inset: initial;
text-decoration-inset: revert;
text-decoration-inset: revert-layer;
text-decoration-inset: unset;

Valeurs

Une ou deux valeurs <length>, ou le mot-clé auto.

<length>

Définit la quantité de décalage de la décoration de texte. Les valeurs positives insèrent la décoration de texte (la rendent plus courte) tandis que les valeurs négatives la font ressortir (la rendent plus longue). Si une seule valeur est définie, elle s'applique aux points de départ et de fin de la décoration de texte. Si deux valeurs sont définies, la première s'applique au point de départ de la décoration de texte et la seconde au point de fin.

auto

Le navigateur choisit une quantité de décalage pour le début et la fin afin de s'assurer que, si deux boîtes de texte décorées apparaissent côte à côte, un espace est créé entre leurs décorations de texte afin qu'elles ne semblent pas avoir une seule décoration de texte.

Description

Par défaut, la décoration de texte d'un élément, telle que définie par la propriété raccourcie text-decoration et les propriétés longues associées, a la même taille que le texte rendu.

La propriété text-decoration-inset permet d'ajuster les points de début et/ou de fin de la décoration de texte d'un conteneur de texte. Cela est utile pour créer des effets où vous souhaitez que la décoration de texte soit en retrait ou en saillie par rapport au texte lui-même, ou décalée en position. Voir Cas d'utilisation simple pour un exemple de chaque.

Une seule valeur <length> définit le retrait (si positif) ou la saillie (si négatif) aux positions de début et de fin de la décoration de texte. Pour définir séparément les positions de début et de fin, vous pouvez utiliser deux valeurs <length> — la première s'applique à la position de début de la décoration de texte et la seconde à la fin.

La propriété text-decoration-inset peut aussi prendre le mot-clé auto. Cela fait en sorte que le navigateur décale les points de début et de fin de la décoration de texte pour garantir que, si deux boîtes de texte décorées apparaissent côte à côte, elles ne semblent pas avoir une seule décoration de texte. La valeur auto est particulièrement importante lors du rendu du texte chinois, où le soulignement est utilisé pour ponctuer les noms propres ^(angl.), et les noms propres adjacents doivent avoir des soulignements séparés. Voir Effet de la valeur auto pour un exemple.

La valeur auto n'a pas le même effet que la valeur initiale 0. Définir text-decoration-inset à 0 fait qu'il n'y a pas d'espace entre les décorations.

La propriété text-decoration-inset n'est pas héritée et n'est pas une propriété constitutive de la propriété raccourcie text-decoration.

Définition formelle

Syntaxe formelle

text-decoration-inset = 
  <length>{1,2}  |
  auto           

Exemples

Cas d'utilisation simple

Dans cet exemple, nous montrons les cas d'utilisation de saillie, de retrait et de « décalage ».

HTML

Nous définissons une liste non ordonnée avec trois éléments de liste, chacun avec un id distinct.

<ul>
  <li id="one">Décoration en saillie</li>
  <li id="two">Décoration en retrait</li>
  <li id="three">Décoration décalée</li>
</ul>

CSS

Nous donnons à chaque élément de liste une text-decoration et une valeur différente de text-decoration-inset :

• Le premier a un soulignement épais vert citron, qui est en saillie de 10px de chaque côté.
• Le second a une ligne médiane blanche de moyenne épaisseur, qui est en retrait de 0.5em de chaque côté.
• Le troisième a un soulignement fin ondulé bleu, qui est décalé vers la droite de 1em.

li {
  font-family: sans-serif;
  font-size: 2em;
  margin-bottom: 20px;
}

@supports not (text-decoration-inset: auto) {
  body::before {
    content: "Votre navigateur ne prend pas en charge la propriété text-decoration-inset.";
    background-color: wheat;
    display: block;
    padding: 10px 0;
    width: 100%;
    text-align: center;
  }
}

#one {
  text-decoration: underline 0.3em limegreen;
  text-decoration-inset: -10px;
}

#two {
  text-decoration: line-through 5px white;
  text-decoration-inset: 0.5em;
}

#three {
  text-decoration: underline wavy 2px blue;
  text-decoration-inset: 1em -1em;
}

Résultat

Ceci s'affiche ainsi :

Effet de la valeur auto

Cet exemple montre l'effet de la valeur text-decoration-inset: auto.

HTML

Nous définissons deux groupes d'éléments HTML <u> côte à côte :

<p lang="zh" id="one"><u>石井</u><u>艾俐俐</u></p>

<p lang="zh" id="two"><u>石井</u><u>艾俐俐</u></p>

CSS

Chaque élément <u> a une couleur red et une épaisseur de 3px appliquées à son soulignement. Le premier groupe d'éléments <u> a une valeur text-decoration-inset de auto, tandis que le second groupe a explicitement la valeur initiale text-decoration-inset de 0, à des fins de comparaison :

u {
  font-family: sans-serif;
  font-size: 2em;
}

@supports not (text-decoration-inset: auto) {
  body::before {
    content: "Votre navigateur ne prend pas en charge la propriété text-decoration-inset.";
    background-color: wheat;
    display: block;
    padding: 10px 0;
    width: 100%;
    text-align: center;
  }
}

u {
  text-decoration-color: red;
  text-decoration-thickness: 3px;
}

#one u {
  text-decoration-inset: auto;
}

#two u {
  text-decoration-inset: 0;
}

Résultat

Ceci s'affiche ainsi :

Notez comment la valeur auto décale subtilement la décoration de texte des deux côtés, créant un espace entre les soulignements des deux éléments (aucun espace n'est ajouté entre les deux éléments eux-mêmes). La valeur 0 n'ajoute aucun espace.

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété text-decoration
• Le module de décoration de texte CSS