Text-decoration-thickness - Propriété CSS

text-decoration-thickness

Résumé des caractéristiques de la propriété text-decoration-thickness

Description rapide
Définit l'épaisseur des traits de décoration (souligné, barré, surligné).
Statut
Standard
Utilisable sur
HTML, SVG
Valeurs prédéfinies
auto | from-font
Pourcentages
Calculés par rapport à la valeur 1em (taille des caractères courante).
Valeur initiale
auto
Héritée par défaut
Non. sup>(1)
Type d'animation
Computed value : lors d'une animation, la propriété text-decoration-thickness passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Décoration du texte
Références (W3C)
Statut du document: WD (document de travail)

(1) Propagation suivant un autre mécanisme, différent de l'héritage classique.
Voir à ce sujet le paragraphe sur le mécanise de propagation.

Syntaxe de text-decoration-thickness (schéma).

Text-decoration-thickness property - Syntax diagramSyntax diagram of the text-decoration-thickness CSS property. See stylescss.free.fr for details. auto auto from-font from-font length / % length / %text-decoration-thickness:;text-decoration-thickness:;
Schéma syntaxique de la propriété text-decoration-thickness
Description des valeurs et exemples

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

Description des termes utilisés sur le schéma :

  • length est une valeur numérique, positive ou nulle, suivie d'une des unités de dimension.
  • % est un pourcentage calculé par rapport à la taille des caractères.

Description de la propriété text-decoration-thickness.

La propriété text-decoration-thickness définit l'épaisseur du trait de décoration du texte. Le trait de décoration pouvant être un soulignement, un surlignement ou une barre de rayure :

Souligné   Surligné   Barré

Pour ajouter une décoration à un texte, voyez la propriété résumée text-decoration.

Mécanisme de propagation.

Attention au mécanisme de propagation des décorations, différent du mécanisme d'héritage classique. text-decoration-thickness ne s'rapplique que aux décorations définies sur l'élément lui-même, et non pas sur celles qui sont définies sur un élément parent.
Sur l'exemple ci-dessous, le parent définit un soulignement en trait de 2 pixels d'épaisseur. Le fait de définir une autre épaisseur sur l'élément Enfant1 ne modifie pas l'épaisseur du soulignement récupéré du parent.

Le deuxième enfant redéfinit aussi bien text-decoration-line que text-decoration-thickness, et dans ce cas on a l'impression que le mécanisme d'héritage fonctionne, mais en fait un deuxième trait de soulignement a été ajouté par dessus celui du parent.

En résumé, une décoration doit être définie entièrement sur le même élément, il ne sera pas possible de la modifier sur un des éléments descendants. La nouvelle propriété text-decoration-skip permet d'assouplir ce fonctionnement.

Parent
Enfant 1
Enfant 2

Valeurs pour text-decoration-thickness.

  • text-decoration-thickness: auto;

    L'épaisseur des traits de décoration est choisie en fonction de la taille de la police.

  • text-decoration-thickness: from-font;

    Certaines polices de caractères Open Type comportent une indication sur l'épaisseur optimale des traits de décoration. Le navigateur utilise alors cette information, sinon from-font est équivalent à auto.

  • text-decoration-thickness: 2px;

    Une valeur positive, suivie d'une unité de dimension (voir les unités de dimension). La valeur 0 est acceptée mais traitée comme 1 pixel.

    S'il s'agit d'un pourcentage, il est calculé par rapport à la valeur 1em, c'est à dire par rapport à la taille des caractères. Si le calcul donne une valeur inférieure à 1 pixel, elle est arrondie à 1 pixel, de façon à ce que le trait soit toujours visible.
    Attention ! C'est la valeur en pourcentage qui est transmise aux éléments enfants, et non pas la valeur calculée comme c'est le cas avec d'autres propriétés. Il en résulte que l'épaisseur du trait de décoration est recalculée en fonction de la taille des caractères de chacun des éléments enfants. Voir l'exemple ci-dessous :

    Texte du bloc parent
    Texte du bloc enfant

Valeurs universelles :

text-decoration-thickness: initial (auto) text-decoration-thickness: inherit text-decoration-thickness: revert text-decoration-thickness: revertLayer text-decoration-thickness: unset

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

Possibilité d'animation de la propriété text-decoration-thickness.

L'exemple d'animation ci-dessous montre l'aspect d'un trait de rayure qui évolue entre 1% et 100%. Bien sûr au final, le texte est entièrement caché.

Démonstration

Simulateur avec la propriété text-decoration-thickness.

text-decoration-thickness :
Souligné   Surligné   Rayé

Support de text-decoration-thickness.

La plupart des navigateurs actuels traitent correctement la propriété text-decoration-thickness, y compris avec des valeurs exprimées en pourcentages, bien que la prise en charge de cette dernière soit un peu moins bonne.

Colonne 1
Support de la propriété text-decoration-thickness pour gérer l'épaisseur des trais de décoration.
Colonne 2
Acceptation des valeurs en pourcentages pour la propriété text-decoration-thickness.
1
Propriétés
text-decoration-thickness
2
Valeurs en
pourcentages
Estimation de la prise en charge globale.
95%
92%

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

Opéra

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

Safari

Safari sur IOS

Samsung Internet

KaiOS Browser

Opéra mini

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

Évolution de la propriété text-decoration-thickness.

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

Le module de spécification CSS Text Decoration Module regroupe les attributs de décoration de texte : ombrage, mise en emphase, barré, soulignement, etc. La propriété text-decoration-thickness est décrite dans ce module, ainsi que les propriétés suivantes :

Propriétés :

text-decoration
Propriété résumée permettant de définir l'essentiel des paramètres de décoration de texte (couleur, type de trait...).
text-decoration-color
Définit la couleur du trait de décoration (souligné, rayure...).
text-decoration-line
Définit le type de décoration : souligné, barré, etc.
⚠
text-decoration-skip
Propriété raccourcie définissant ce que les traits de décoration doivent sauter (espaces, jambage, etc.).
⚠
text-decoration-skip-box
Définit comment les décorations héritées des éléments parents doivent être appliquées.
⚠
text-decoration-skip-ink
Définit si les lignes de décoration (essentiellement le souligné) s'interrompent au niveau des jambages.
⚠
text-decoration-skip-inset
Définit comment les décorations de l'élément lui même (et non pas celles des éléments parents) doivent être appliquées.
⚠
text-decoration-skip-self
Définit si les décoration du ou des éléments parents doivent être appliquées à cet élément.
⚠
text-decoration-skip-spaces
Définit si les lignes de décoration (soulignement, rayure...) concernent les espaces.
text-decoration-style
Type de trait pour la décoration : plein, pointillé, etc.
text-emphasis
Propriété résumée qui définit tous les paramètres de la mise en exergue d'un texte.
text-emphasis-color
Définit la couleur des caractères de mise en exergue.
text-emphasis-position
Définit la position des caractères de mise en exergue.
⚠
text-emphasis-skip
Définit si les mises en exergue doivent s'interrompre sur les espaces, les signes de ponctuation, etc.
text-emphasis-style
Spécifie le style de mise en exergue.
text-shadow
Cette propriété résumée définit tous les paramètres de l'ombre appliquée au texte : couleur, décalage, etc.).
text-underline-offset
Définit la position du trait de soulignement, par rapport à la position de base.
text-underline-position
Définit l'emplacement des traits de soulignement.