Text-underline-offset - Propriété CSS

text-underline-offset

Résumé des caractéristiques de la propriété `text-underline-offset`

Description rapide

Définit la position du trait de soulignement, par rapport à la position de base.

Statut

Standard

S'applique à

Tout élément contenant du texte.

Utilisable sur

HTML, SVG

Valeurs prédéfinies

auto

Pourcentages

Calculés par rapport à la taille courante des caractères (1em).

Valeur initiale

auto

Héritée par défaut

Oui.

Type d'animation

Computed value : lors d'une animation, la propriété text-underline-offset passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Décoration du texte

Références (W3C)

CSS Text Decoration Module Level 4

Statut du document: WD (document de travail)

Syntaxe de `text-underline-offset` (schéma).

Schéma syntaxique de la propriété text-underline-offset.
Détails sur les valeurs.

Description des termes utilisés sur le schéma (les termes en gras sont prédéfinis) :

length est une valeur numérique suivie d'une des unités de dimension.
% est un pourcentage calculé par rapport à la hauteur des caractères.

Description de la propriété `text-underline-offset`.

La propriété CSS text-underline-offset définit la position du trait de soulignement du texte, par rapport à la position de base de ce trait. Cette dernière est définie par text-underline-position.

Cas particulier : text-underline-offset peut être ignorée dans le cas d'un soulignement ayant une signification particulière comme par exemple pour indiquer une faute d'orthographe ou de grammaire, autrement dit si la valeur de la propriété text-decoration est spelling-error ou grammar-error.

Pour davantage de détails, reportez-vous à la propriété text-decoration pour activer le soulignement du texte, et à la propriété text-underline-position pour définir la position de base du trait de soulignement.

Mécanisme d'héritage.

A cause du mécanisme de propagation particulier des décorations (dont le soulignement fait partie), text-underline-offset ne s'applique que au soulignement défini sur l'élément lui-même et sur ses enfants, mais pas au soulignement hérité d'un parent. Ce mécanisme est inhabituel en CSS et peut produire des résultats surprenants comme le montre l'exemple ci-dessous.

Le soulignement est défini sur le parent et se retrouve sur l'élément enfant. Néanmoins la propriété text-underline-offset appliquée sur l'élément enfant n'aura aucun effet, car le soulignement a été défini sur le parent.

Parent

Enfant

Dans ce deuxième exemple, le soulignement a été redéfini sur l'enfant, et en bleu pour le distinguer de celui du parent.
La propriété text-underline-offset appliquée sur l'élément enfant déplace uniquement le soulignement défini sur cet élément, et pas le soulignement obtenu du parent.

Parent

Enfant

Si text-underline-offset a une valeur exprimée dans une unité absolue (en pixels par exemple), la valeur sera héritée telle quelle, et ne s'adaptera donc pas à la taille des caractères de chacun des éléments enfants.
Les pourcentages sont par contre hérités en tant que valeurs relatives : la position du trait de soulignement est recalculée pour chacun des éléments en fonction de la taille des caractères.

L'élément parent définit la position du soulignement en pixels, juste à la limite des jambages. On voit que sur l'élément enfant, le trait n'est plus à la limite des jambages.

Parent : p q

Enfant : p q

L'élément parent définit la position du soulignement en pourcentages, également à la limite des jambages. Le trait reste à la limite des jambages quelque soit la taille des caractères.
⚠ Mozilla ne respecte pas cette règle.

Parent : p q

Enfant : p q

Valeurs pour `text-underline-offset`.

text-underline-offset: auto;

Le navigateur choisit le meilleur emplacement pour le trait de soulignement. Cependant, si la propriété text-underline-position a la valeur from-font, le navigateur devrait choisir 0 pour la valeur de text-underline-offset.
text-underline-offset: 10px;

Une valeur positive ou négative, suivie d'une unité de dimension (voir les unités de dimension). Les valeurs positives éloignent le trait de soulignement du texte. Les valeurs négatives le rapprochent, voire même font superposer le trait et le texte, ce dernier étant toujours en avant. Ce n'est donc pas une solution pour rayer un texte. Pour cela reportez-vous à la propriété text-decoration.

Si la valeur est exprimée en pourcentages, ceux-ci seront déterminés par rapport à la hauteur des caractères, c'est à dire par rapport à la valeur 1em
text-underline-offset: initial; (auto) text-underline-offset: inherit; text-underline-offset: revert; text-underline-offset: revertLayer; text-underline-offset: unset;

Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Possibilité d'animation de la propriété `text-underline-offset`.

Les possibilités d'animation sont assez limitées en ce qui concerne la propriété text-underline-offset, mais on peut cependant l'animer comme le montre l'exemple ci-dessous.

Exemple d'animation de text-underline-offset

Simulateur avec la propriété `text-underline-offset`.

Le simulateur vous permet de choisir une valeur pour text-underline-offset et pour text-underline-position. En effet ces deux propriétés travaillent ensemble pour fixer la position du trait de soulignement.

text-underline-offset :

auto

Texte souligné

Support de `text-underline-offset`.

Colonne 1

Prise en charge par les navigateurs de la propriété text-underline-offset qui permet de positionner le trait de soulignement de façon précise.

Colonne 2

Support par les navigateurs de la valeur de text-underline-offset exprimée en pourcentages.

Propriété
text-underline-offset

Valeur en
pourcentage

Estimation de la prise en charge globale.

94%

89%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Évolution de la propriété `text-underline-offset`.

Module CSS - Décoration du texte - Niveau 4

Première présentation de la propriété text-underline-offset.

13 Mars 2018
Document de travail.

Voir aussi, à propos des décorations de texte.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété text-underline-offset fait partie du module CSS Text Decoration Module. Les définitions suivantes sont également décrites dans ce module.