Text-underline-offset - Astuces CSS

La text-underline-offsetpropriété en CSS définit la distance entre les soulignements de texte et leur position initiale.

.text ( text-underline-offset: 0.5em; )

Une fois que vous avez appliqué un soulignement pour un élément à l'aide text-decorationde la valeur de soulignement , vous pouvez dire à quelle distance cette ligne doit être de votre texte à l'aide de la text-underline-offsetpropriété.

Valeurs

• auto: (Par défaut) Le navigateur spécifiera un décalage approprié pour les soulignements.
• : Toute longueur valide avec une unité spécifiée (y compris les valeurs négatives). Cela remplace toute information dans la police et la valeur par défaut du navigateur.
• percentage: Spécifie le décalage des traits de soulignement en pourcentage de 1em dans la police de l'élément.
• initial: Le paramètre par défaut de la propriété, qui est auto.
• inherit: Adopte la valeur de décalage de soulignement du parent.
• unset: Supprime le décalage actuel de l'élément.

Démo

Dans la démonstration suivante, vous pouvez modifier la valeur de text-underline-offsetpour voir comment cela affecte la décoration du texte de l'élément:

Remarques

• text-underline-offset ne fait pas partie de la sténographie de text-decoration.
• Cela ne fonctionne pas sur d'autres text-decorationlignes, telles que line-throughou overline.
• Les valeurs négatives sont acceptées, ce qui décale le soulignement vers l'intérieur.

C'est constant pour les descendants

Une fois que vous avez défini une décoration pour un élément, tous ses enfants auront également cette décoration. Imaginons maintenant que vous souhaitiez modifier le décalage du soulignement pour l'un des enfants:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-underline-offset: 1.5em; /* Doesn't work */ )

Cela ne fonctionne pas car vous ne pouvez pas remplacer un décalage d'un soulignement spécifié par des éléments ancêtres. Pour que cela fonctionne, vous devez définir une spécificité de soulignement pour l'élément lui-même:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-decoration: underline; text-underline-offset: 1.5em; /* It works! */ )

L'utilisation d'em est recommandée

L'avantage d'utiliser une valeur relative comme em est que le décalage sera mis à l'échelle avec le changement de font-sizevaleur. D'un autre côté, si vous utilisez une unité de longueur fixe (par exemple des pixels), le décalage ne s'ajustera pas aux changements et il se peut que ce ne soit pas la distance que vous aimeriez avoir pour votre texte:

Le pourcentage et la cascade

Pour cette propriété, une longueur héritera d'une valeur fixe et ne sera pas mise à l'échelle avec la police. D'un autre côté, un pourcentage héritera en tant que valeur relative et, par conséquent, sera mis à l'échelle avec les modifications de la police à mesure qu'il hérite.

La démo suivante montre la comparaison entre l'utilisation de em et des valeurs de pourcentage dans le cas de l'héritage et, comme vous pouvez le voir, sur le côté gauche (dans lequel nous utilisons em) la valeur héritée est une longueur fixe. Vous pouvez vérifier la valeur calculée dans vos DevTools. Cela signifie qu'il ne s'adapte pas au changement de police. Sur le côté droit, cependant, les textes héritent d'une valeur relative (dans ce cas 100%); donc l'offset s'échelonne avec le changement de police:

Modes d'écriture et position de soulignement du texte

Le fait d'avoir un mode d'écriture verticale a un effet sur la position du soulignement. Cela changera la direction du décalage appliqué sur l'élément. Jouez avec les valeurs de la démo suivante:

En rapport

• text-decoration
• text-underline-position
• text-decoration-thickness

Plus d'information

Module de décoration de texte CSS niveau 4 (brouillon de l'éditeur)

Prise en charge du navigateur

Au moment d'écrire ces lignes, Firefox est le seul navigateur avec le support complet. Safari ne prend pas en charge les valeurs de pourcentage.

text-underline-offset

C'EST À DIRE	Bord	Firefox	Chrome	Safari	Opéra
Non	Non	70+	Non	12.1+	Tout

Chrome Android	Android Firefox	Navigateur Android	Safari sur iOS	Opera Mini
Non	Non	Non	12.2+	Oui

text-underline-offset: pourcentage

C'EST À DIRE	Bord	Firefox	Chrome	Safari	Opéra
Non	Non	74+	Non	Non	Non

Chrome Android	Android Firefox	Navigateur Android	Safari sur iOS	Opera Mini
Non	Non	Non	Non	Oui