Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

text-decoration - Propriété CSS

text-decoration

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

Description rapide
Choisit le soulignement, le surlignement ou la rayure du texte.
Statut
Standard
Valeurs prédéfinies
none | underline | overline | line-through | blink | spelling-error | grammar-error
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 (propagation suivant un autre mécanisme).
Type d'animation
Voir les propriétés individuelles.
Module W3C
Module CSS - Décoration du texte
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: Ancienne norme, obsolète

Description.

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é

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

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 souligne, l'image ci-contre La décoration n'impacte pas les images n'est pas soulignée.

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

É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 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

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 :
    - Positionner l'élément en absolu ou en fixé (propriété position).
    - Le définir 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 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.

Animation de la propriété text-decoration.

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

Animation de text-decoration

Prise en charge par les navigateurs (compatibilité).

Dans le tableau de compatibilité ci-dessous, la première colonne correspond à l'ancienne syntaxe, équivalente aujourd'hui à text-decoration-line. La deuxième colonne concerne la syntaxe actuelle, qui permet de définir à la fois, le type de décoration, l'épaisseur du trait son type et sa couleur.

Colonne 1
Support par les navigateurs de l'ancienne syntaxe de text-decoration, équivalente aujourd'hui à text-decoration-line.
Colonne 2
Support de la nouvelle syntaxe : text-decoration comme propriété résumée permettant de définir tous les paramètres de la décoration en une seule écriture.
1
text-decoration
(old syntax)
2
text-decoration
(new syntax)
Estimation de la prise en charge en pourcentage du parc actuel.
95%
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que text-decoration.

Les spécifications CSS éditées par le W3C sont organisées en modules. text-decoration fait partie du Module CSS - Décoration du texte (CSS Text Decoration Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit la couleur du trait de décoration.
Type de décoration : souligné, barré, etc.
Propriété raccourcie définissant certaines particularités relatives aux décorations.
Définit comment les décorations héritées des éléments parents doivent être appliquées.
Définit si les lignes de décoration (essentiellement le souligné) s'interrompent au niveau des jambages.
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.
Définit si les décoration du ou des éléments parents doivent être appliquées à cet élément.
Définit si les lignes de décoration (soulignement, rayure...) concernent les espaces.
Type de trait pour la décoration : plein, pointillé, etc.
Définit l'épaisseur des traits de décoration (souligné, barré, surligné).
Mise en exergue du texte.
Définit la couleur des caractères de mise en exergue.
Position des caractères de mise en exergue.
Définit si les mises en exergue doivent s'interrompre sur les espaces, les signes de ponctuation, etc.
Style de mise en exergue.
Définit tous les paramètres d'une ombre appliquée au texte.
Définit la position du trait de soulignement, par rapport à la position de base.
Définit l'emplacement des traits de soulignement.