`Text-decoration` - Propriété CSS

text-decoration

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

Description rapide

Propriété résumée permettant de définir l'essentiel des paramètres de décoration de texte (couleur, type de trait...).

Statut

Standard

S'applique à

Tous les éléments.

Utilisable sur

HTML, SVG ⁽¹⁾

Valeurs prédéfinies

Pourcentages

Ne s'appliquent pas.

Valeur initiale

Voir les propriétés individuelles.

Héritée par défaut

Voir les propriétés individuelles. ⁽²⁾

Type d'animation

Voir les propriétés individuelles.

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)

CSS Text Decoration Module Level 3

Statut du document: CR (document candidat à la recommandation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Cascading Style Sheets specification - Version 1

Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

(1) text-decoration est utilisable sur un fichier SVG, sauf en ce qui concerne text-decoration-color (la couleur des décorations).

(2) Le mécanisme d'héritage est particulier. Voir à ce sujet mécanisme de propagation.

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

La propriété text-decoration définit les attributs typographiques de décoration, comme le souligné, le barré, etc.

Ces attributs peuvent être utilisés à des fins décoratives, mais aussi pour mettre une partie du texte en exergue, pour faire ressortir les modifications apportées au texte (suppression ou insertion), ou pour signaler les fautes d'orthographe, de grammaire, etc.

Exemple des principales décorations :

Texte souligné Texte surligné Texte barré Faute d'orthographe

text-decoration est une propriété résumée qui reprend les valeurs des propriétés suivantes :

text-decoration-line : type de décoration : souligné, barré, etc.
text-decoration-thickness : épaisseur de trait de décoration.
text-decoration-style : type de trait pour la décoration : plein, pointillé, etc.
text-decoration-color : couleur du trait de décoration.

Auxquelles il convient d'ajouter la propriété text-decoration-skip qui concerne aussi la décoration du texte mais qui ne fait pas partie des propriétés incluses dans text-decoration, ainsi que la propriété text-underline-position.

Le fait de ne pas spécifier une des valeurs force celle-ci à sa valeur initiale.

Le fait d'ajouter une décoration à un texte ne change pas l'interligne, ni la hauteur des lignes. Cela peut nuire à la lisibilité avec certains type de traits comme wavy ou double.

A quoi s'appliquent les décorations ?

Les décorations sont appliquées essentiellement aux textes, elles ne le sont pas aux images, ni aux champs de formulaire bien que ces éléments soient du type inline.
Exemple : Bien que le texte de cet élément soit souligné, l'image ci-contre La décoration n'impacte pas les images n'est pas soulignée.

Évolutions de la norme.

La possibilité de spécifier l'épaisseur du trait a été ajoutée dans le niveau 4 du module Texte décoration. Le niveau 3 ne prévoyait que 3 valeurs.

La norme CSS 2.2 donnait déjà une définition pour text-decoration mais la propriété n'était alors pas définie comme une propriété résumée : elle acceptait une seule valeur, correspondant à text-decoration-line.
Cette syntaxe avec une seule valeur est compatible avec la nouvelle norme CSS 3, mais n'oubliez pas que, comme pour toutes les propriétés raccourcies, les valeurs non présentes sont mises à leur valeur initiale :


	text-decoration:underline;

⇔


	text-decoration-line:underline;
	text-decoration-thickness:auto;
	text-decoration-style:solid;
	text-decoration-color:currentColor;

Autre évolution : la valeur blink n'est plus reconnue par aucun navigateur. Elle produisait un clignotement du texte. Un clignotement étant quelque chose de très différent d'un soulignement, il n'y a pas de raison que ce soit la même propriété qui gère ces deux fonctionnalités. De plus le clignotement est maintenant considéré comme intrusif.
Il est toujours possible de faire clignoter un contenu, mais en utilisant une animation sur la visibilité ou l'opacité de l'élément.

Quelques cas particuliers.

Voici quelques cas de figure complexes pour le positionnement des traits de décoration. Tous les navigateurs ne vont d'ailleurs pas les traiter de la même façon.

Décoration des ^exposants et _indices

Tailles de texte différentes

Influence de l'alignement vertical :

Baseline Bottom Middle Top Sub Super

Les décorations sur une structure ruby.

Les décorations appliquées à un container Ruby (balise ruby) ne sont propagées que au texte de base de la structure Ruby, c'est à dire la balise rb. Néanmoins il est possible d'ajouter une décoration à l'annotation d'une structure Ruby, en l'appliquant directement à la balise rt.

TexteAnnotation TexteAnnotation

Particularités concernant l'héritage de `text-decoration`.

Le mécanisme d'héritage de la propriété text-decoration est très particulier : le fait de définir une valeur pour la propriété text-decoration sur un élément enfant n'annule pas la valeur héritée du parent.

L'exemple ci-dessous fait le parallèle entre l'héritage de text-decoration et l'héritage classique comme sur la propriété color. Il est composé d'un bloc parent, qui contient 3 blocs, qui seront donc ses enfants. Une décoration et une couleur ont été appliquées au bloc parent. La couleur n'est là que à titre de comparaison, pour illustrer le mécanisme d'héritage classique.

Sur le premier enfant, rien de particulier n'a été défini. La couleur est héritée du parent, et la décoration semble elle aussi héritée, mais nous allons voir que ce n'est pas un héritage habituel.

Sur le deuxième enfant, de nouvelles valeurs ont été définies pour la couleur et pour la décoration. La nouvelle couleur remplace bien en effet la couleur qui était héritée du parent. Mais on voit que, pour la décoration, il y a eu un cumul de la nouvelle valeur avec la valeur héritée du parent.

Sur le troisième enfant, la couleur et la décoration ont été fixée à la valeur initial. La couleur en effet est bien revenue sur du noir. Mais la décoration du parent persiste a être appliquée.

Enfin, l'enfant numéro 4 s'en sort mieux en redéfinissant complètement la décoration. En fait il crée une nouvelle décoration par dessus celle qui provient du parent.

Parent

Enfant 1

Enfant 2

Enfant 3

Enfant 4

Alors comment annuler l'héritage d'une décoration ? Il semblerait que ce ne soit pas possible à l'heure actuelle. La nouvelle propriété text-decoration-skip-self devrait permettre cela, mais pour l'instant, les navigateurs ne la prennent pas en compte.
Il y a aussi quelques astuces, mais qui risquent de créer des problèmes sur la mise en page :
- Définir l'élément en absolute ou fixed (propriété position).
- Définir l'élément en inline-block (propriété display).

Propagation sur les éléments positionnés.

En plus de ce mécanisme d'héritage particulier, il faut préciser que les décorations ne sont pas propagées aux éléments positionnés (ceux dont la propriété position est fixée à absolute ou fixed), ni aux éléments dont la propriété display a été définie à inline-block ou inline-table.
Pour en savoir plus, reportez-vous à la description de ces deux propriétés : position, display.

Propagation sur les éléments du type `inline-...`.

D'autre part, comme on peut le voir sur l'exemple ci-dessous, la propagation des décorations aux éléments enfants dépend du type d'affichage de ces derniers. Les décorations ont propagées aux éléments enfants du type inline ou block, mais ne sont pas propagées aux éléments du type inline-block, inline-table, etc.

Parent

Inline

Inline-block

Parent

block

Exemples d'utilisation de la propriété `text-decoration`.

Un style de décoration fréquemment utilisé pour identifier les fautes d'orthographes ou de grammaire.
A ce sujet, vous pouvez consulter la page sur le sélecteur ::spelling-error, malheureusement encore trop peu pris en charge par les navigateurs.

Dans un document contractuel, on souhaite parfois annuler une clause, tout en la laissant visible.

Dans cet exemple, deux lignes de décoration ont été mises en place. Plusieurs lignes peuvent en effet être cumulés mais la syntaxe ne permet pas de différencier leur couleur ou leur style de trait.

Sauf à appliquer l'une des décorations sur un élément parent et la deuxième sur un élément enfant.

Exemple d'animation de `text-decoration`.

Reportez-vous aux propriétés individuelles pour d'autres exemples d'animation.

Animation de text-decoration

Compatibilité des navigateurs avec `text-decoration`.

Dans le tableau de compatibilité ci-dessous, la première colonne correspond à la propriété résumée text-decoration. Les colonnes suivantes concernent les propriétés détaillées introduites dans la version 4 de la spécification.

Colonne 1

Support de la décoration de texte incluant le type de trait, la couleur, les sauts, etc.

Colonne 2

Support par les navigateurs de l'ancienne syntaxe de text-decoration, équivalente aujourd'hui à text-decoration-line.

Colonne 3

Support de la propriété text-decoration-line
Nouvelle syntaxe, depuis le niveau 4 de la spécification, définissant le type de trait de décoration.

Colonne 4

Support de la propriété text-decoration-thickness pour gérer l'épaisseur des trais de décoration.

Colonne 5

Support de la propriété text-decoration-color pour gérer la couleur des traits de décoration.

Remarques :

(1) Support partiel à cause de la propriété text-decoration-skip qui n'est pas prise en charge ou partiellement prise en charge.

(2) Support partiel à cause des propriétés text-decoration-style et text-decoration-skip non prises en charge ou partiellement prises en charge.

Décoration
du texte

Propriété
text-decoration

Propriété
text-decoration-line

Propriété
text-decoration-thickness

Propriété
text-decoration-color

Estimation de la prise en charge globale.

87%

97%

96%

95%

96%

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

Histoire de la propriété `text-decoration`.

CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

Définition initiale de la propriété text-decoration, acceptant les valeurs none, underline, overline, line-through et blink.

17 Novembre 1995
Document de travail.
12 Novembre 1996
Proposé à la recommandation.
17 Décembre 1996
Recommandation.
13 Septembre 2018
Ancienne spécification, déclarée obsolète.
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

La valeur inherit est acceptée par la propriété text-decoration.

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Décoration du texte - Niveau 3

text-decoration devient une propriété résumée pour text-decoration-line, text-decoration-style et text-decoration-color.
Note : la valeur blink est déclarée obsolète au profit des possibilités offertes par les animations.

27 Janvier 1999
Document de travail.
01 Août 2013
Candidat à la recommandation.
Module CSS - Décoration du texte - Niveau 4

Ajout de la propriété line-decoration-thickness dans les propriétés gérées par text-decorateion.
Les valeurs spelling-error et grammar-error sont ajoutées pour les styles de ligne.

13 Mars 2018
Document de travail.

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

Les décorations de texte sont décrites dans le module CSS Text Decoration Module. La propriété text-decoration fait partie de ce module avec les suivantes :