Text-underline-position - Propriété CSS

Syntaxe de text-underline-position (schéma).

Description de la propriété text-underline-position.

text-underline-position définit l'emplacement des traits de soulignement. Est-ce qu'ils coupent les jambages ? Sont ils en dessous des jambages ? Etc.

D'autre part, text-underline-position définit la référence pour text-underline-offset, une autre propriété qui gère la positionnement au pixel près des traits de soulignement.

Pour savoir comment activer le soulignement, reportez-vous aux propriétés text-decoration et text-decoration-line.

Mécanisme d'héritage.

Conformément au mécanisme d'héritage particulier aux décorations, text-underline-position agit sur le soulignement défini sur l'élément lui-même et pas sur le soulignement défini sur un élément parent. Ce fonctionnement produit parfois des résultats surprenants comme dans l'exemple ci-après où le trait de soulignement apparaît deux fois.

⚠ Sur ce point précis, tous les navigateurs ne réagissent pas de la même façon. Sur Chrome par exemple, l'exemple ci-dessous n'est pas conforme à la description que nous donnons.

Reportez-vous à la page sur text-decoration pour des explications plus précises sur la propagation des décorations aux éléments enfants.

Valeurs pour text-underline-position.

• text-underline-position: auto;

  Le navigateur décide de l'emplacement des traits de soulignement. En général, ils se positionnent au plus proche de la ligne de base du texte.

  Texte souligné
  text-underline-position:auto;
• text-underline-position: from-font;

  Si la police de caractères utilisée comporte une indication sur l'emplacement des soulignement, utiliser cette information, sinon positionner le soulignement comme avec la valeur auto.

  Texte souligné
  text-underline-position:from-font;
• text-underline-position: under;

  Le soulignement est positionné en plus bas, en dessous des jambages.
  Note : certaines polices fantaisie peuvent avoir des jambages qui descendent très bas, et coupent malgré tout le trait de soulignement.

  Au sujet des interactions entre le trait de soulignement et les jambages, voyez aussi la propriété text-decoration-skip-ink.

  Texte souligné
  text-underline-position:under;
• text-underline-position: left; text-underline-position: right;

  Dans le cas des langues qui s'écrivent verticalement (langes CJK, hébreu, etc.), le trait de soulignement est placé à gauche ou à droite du texte. Ces valeurs sont équivalentes à auto pour les langues qui s'écrivent horizontalement.

  Ces valeurs sont cumulables avec from-font et under.

  Souligné

  text-underline-position:left;

  Souligné

  text-underline-position:right;
• text-underline-position: above; ⚠ Internet Explorer   text-underline-position: below; ⚠ Internet Explorer  

  Le navigateur Internet Explorer interprète la propriété text-underline-position un peu différemment. Ces deux valeurs en particulier, qui permettent de positionner le trait de soulignement au dessus ou en dessous du texte, sont en conflit avec le nom de la propriété (underline veut clairement dire "en dessous de la ligne" en anglais).

• text-underline-position: initial; (auto) text-underline-position: inherit; text-underline-position: revert; text-underline-position: revertLayer; text-underline-position: 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-position.

L'animation de la propriété text-underline-position présentée ci-dessous, explore toutes les valeurs de text-underline-position valides pour un texte écrit horizontalement.

Simulateur avec la propriété text-underline-position.

Le simulateur présente un échantillon en police Arial et dans une police Google nommée Water Brush. La différence sera sensible pour la valeur under : avec une police de caractères classique comme Arial, le soulignement se positionne en dessous des jambages, mais avec la police fantaisie Water Brush le soulignement coupe malgré tout les jambages.

Support de text-underline-position.

1

Propriété
text-underline-position

2

Valeur
from-font

3

Valeurs
left
right

Estimation de la prise en charge globale.

96%

94%

89%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Edge

Safari

Opéra

Safari sur IOS

Androïd Brower

Firefox pour Androïd

Chrome

Firefox

Chrome pour Androïd

KaiOS Browser

Opéra mini

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

Caniuse

Caniuse

Caniuse

Évolution de la propriété text-underline-position.

• Module CSS - Décoration du texte - Niveau 3

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

  27 Janvier 1999

  Document de travail.

  

  01 Août 2013

  Candidat à la recommandation.

  

  

• Module CSS - Décoration du texte - Niveau 4

  Ajout de la valeur from-font à la propriété text-underline-position.
  

  13 Mars 2018

  Document de travail.

  

  

  

Voir aussi, au sujet des décorations de texte.

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

Propriétés :