Spécifications CSS


16 Le texte

Les propriétés définies ci-dessous influencent la représentation visuelle des caractères, des caractères blancs, des mots et des paragraphes.

16.1 L'alinéa : la propriété 'text-indent'

'text-indent'
Valeur :  <longueur> | <pourcentage> | inherit
Initiale :  0
S'applique à :  à ceux des éléments de type bloc
Héritée :  oui
Pourcentage :  se rapporte à la largeur du bloc conteneur
Médias :  visuel

Cette propriété spécifie un alinéa pour la première ligne du texte dans un bloc. Plus précisément, celui de la première boîte de la première rangée dans la première boîte de ligne de ce bloc. Cette boîte est indentée à partir du bord gauche (ou droit, pour une mise en page de droite à gauche) de la boîte de ligne. Les agents utilisateurs devraient représenter cette indentation comme un espace vide.

Le significations des valeurs sont :

<longueur>
L'alinéa a une longueur fixe ;
<pourcentage>
L'alinéa correspond à un pourcentage de la largeur du bloc conteneur.

La valeur de la propriété 'text-indent' peut être négative, mais ceci dépend des limites de la mise en œuvre. Si cette valeur est négative, la valeur de la propriété 'overflow' peut avoir une influence sur la visibilité du texte.

Exemple(s) :

Cet exemple produit un alinéa de '3em' :

  P { text-indent: 3em }

16.2 L'alignement : la propriété 'text-align'

'text-align'
Valeur :  left | right | center | justify | <chaîne> | inherit
Initiale :  selon l'agent utilisateur et selon le sens d'écriture
S'applique à :  ceux des éléments de type bloc
Héritée :  oui
Pourcentage :  sans objet
Médias :  visuel

Cette propriété décrit l'alignement d'un contenu en-ligne dans un élément de type bloc. Les significations des valeurs sont :

left, right, center et justify
Respectivement, l'alignement à gauche, à droite, centré et double justifié d'un texte ;
<chaîne>
Spécifie une chaîne sur laquelle les cellules d'une table vont s'aligner (voir le passage sur l'alignement horizontal dans une colonne pour le détail et pour un exemple). Cette valeur ne s'applique qu'aux cellules d'une table. Appliquée à un autre élément, celle-ci sera considérée comme étant 'left' ou 'right', en fonction de la valeur de la propriété 'direction', respectivement 'ltr' ou 'rtl'.

Un pavé de texte consiste en un empilement de boîtes de ligne. Pour les valeurs 'left', 'right' et 'center', cette propriété indique la façon dont les boîtes en-ligne, dans chacune des boîtes de ligne, s'alignent par rapport aux côtés gauche et droit de ces boîtes de ligne ; l'alignement n'est pas effectué par rapport à la zone de visualisation. Pour la valeur 'justify', l'agent utilisateur peut, en plus des ajustements de position, étirer les boîtes de ligne. Voir également les propriétés 'letter-spacing' et 'word-spacing').

Exemple(s) :

Dans cet exemple, noter que tous les éléments de type bloc dans élément DIV avec la classe 'center' auront leur contenu centré, la propriété 'text-align' étant héritée :

DIV.center { text-align: center }

Remarque : L'algorithme de justification effectif dépend de l'agent utilisateur et de l'écriture.

Les agents utilisateurs conformes peuvent interpréter la valeur 'justify' comme étant 'left', ou 'right', selon que le sens d'écriture de l'élément est de gauche à droite, ou de droite à gauche.

16.3 La décoration

16.3.1 Trait en-dessous, trait au-dessus, rayure et clignotement: la propriété 'text-decoration'

'text-decoration'
Valeur :  none | [ underline || overline || line-through || blink ] | inherit
Initiale :  none
S'applique à :  tous les éléments
Héritée :  non (voir les explications)
Pourcentage :  sans objet
Médias :  visuel

Cette propriété décrit les décorations qui sont ajoutées au texte d'un élément. Quand la propriété est appliquée à un élément de type bloc, elle agit sur tous les descendants de type en-ligne de celui-ci. Quand elle est appliquée à un élément de type en-ligne, ou agit sur celui-ci, cette propriété influence toutes les boîtes générées par cet élément. Quand les éléments sont vides ou sans contenu textuel (ex. l'élément IMG en HTML), les agents utilisateurs doivent ignorer cette propriété.

Les significations des valeurs sont :

none
Aucune décoration ;
underline
Chaque ligne de texte est soulignée ;
overline
Chaque ligne de texte reçoit un trait au-dessus ;
line-through
Chaque ligne de texte est rayée en son milieu ;
blink
Le texte clignote (une alternance entre visible et invisible). Les agents utilisateurs conformes ne sont pas tenus de reconnaître cette valeur.

La couleur, ou les couleurs, requises pour la décoration de texte devraient être déterminées par la valeur de la propriété 'color'.

Cette propriété n'est pas héritée, cependant les boîtes qui descendent d'une boîte de bloc donnée devraient recevoir la même décoration que celle-ci (ex. toutes devraient être soulignées). La couleur de la décoration devrait être conservée, même si la valeur de la propriété 'color' des éléments descendants était différente.

Exemple(s) :

Dans cet exemple en HTML, le contenu de texte de chacun des éléments A, ceux-ci étant des liens, seront soulignés :

A[href] { text-decoration: underline }

16.3.2 Les ombrages de texte : la propriété 'text-shadow'

'text-shadow'
Valeur :  none | [<couleur> || <longueur> <longueur> <longueur>? ,]* [<couleur> || <longueur> <longueur> <longueur>?] | inherit
Initiale :  none
S'applique à :  tous les éléments
Héritée :  non (voir les explications)
Pourcentage :  sans objet
Médias :  visuel

Cette propriété accepte une liste de valeurs, séparés par une virgule, représentant des effets d'ombrage à appliquer au texte d'un élément. Ces effets s'appliquent dans l'ordre spécifié et peuvent ainsi se recouvrir, mais ceux-ci ne recouvriront jamais le texte lui-même. Les effets d'ombrage ne modifient pas la taille d'une boîte, mais peuvent s'étendre au-delà des limites de celle-ci. Les effets d'ombrages se situent au même niveau dans l'empilement que l'élément en question.

Chaque effet doit spécifier un décalage de l'ombrage, et peut, en option, spécifier une zone de flou et la couleur de l'ombrage.

Le décalage de l'ombrage est donné par deux valeurs de <longueur> qui en précisent la distance par rapport au texte. La première spécifie la distance horizontale à la droite du texte, une valeur négative place l'ombrage à la gauche de celui-ci. La seconde spécifie la distance verticale en-dessous du texte, une valeur négative place l'ombrage au-dessus de celui-ci.

En option, on peut spécifier, après les valeurs de décalage de l'ombrage, celle du rayon du flou. C'est une longueur qui indique les limites de cet effet de flou. L'algorithme exact pour le calcul de cet effet n'est pas spécifié.

En option également, on peut spécifier, avant ou après les valeurs de décalage de l'ombrage, celle de la couleur de l'ombrage. Cette valeur de couleur servira de fondement pour l'effet d'ombrage. Si aucune couleur n'est indiquée, c'est la valeur de la propriété 'color' qui est considérée à sa place.

On peut employer les ombrages de texte avec les pseudo-éléments  :first-letter et :first-line.

Exemple(s) :

L'exemple ci-dessous produira un ombrage à droite et en dessous du texte de l'élément. Aucune couleur ni rayon de flou ayant été spécifiés, l'ombrage prendra la couleur de l'élément en question et n'aura pas d'effet de flou :

H1 { text-shadow: 0.2em 0.2em }

Celui-ci produira un ombrage à droite et en-dessous du texte de l'élément. Cet ombrage aura un rayon de flou de 5px et de couleur rouge :

H2 { text-shadow: 3px 3px 5px red }

Dans l'exemple suivant, on spécifie une liste d'effets d'ombrage. Le premier ombrage apparaîtra à droite et en-dessous du texte, avec une couleur rouge et sans effet de flou. Le deuxième va recouvrir le premier effet d'ombrage et apparaîtra à gauche et en-dessous du texte, avec une couleur jaune et un effet de flou. Le troisième sera placé à droite et au-dessus du texte. Aucune couleur n'étant spécifiée pour celui-ci, c'est la valeur de la propriété 'color' de l'élément en question qui sera utilisée :

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

Exemple(s) :

Considérons cette règle :

SPAN.glow { 
    background: white; 
    color: white;
    text-shadow: black 0px 0px 5px;
}

Ici, on a utilisé les propriétés 'background' et 'color' avec la même valeur, ainsi que la propriété 'text-shadow' pour créer un effet "éclipse solaire" :

Effet d'éclipse solaire.   [D]

Remarque : Cette propriété n'est pas définie en CSS1. Certains effets d'ombrage (tel que celui du dernier exemple) peuvent rendre le texte invisible pour les agents utilisateurs ne reconnaissant que CSS1.

16.4 L'interlettrage et l'espace-mot : les propriétés 'letter-spacing' et 'word-spacing'

'letter-spacing'
Valeur :  normal | <longueur> | inherit
Initiale :  normal
S'applique à :  tous les éléments
Héritée :  oui
Pourcentage :  sans objet
Médias :  visuel

Cette propriété précise le comportement de l'espacement entre les caractères du texte. Les significations des valeurs sont :

normal
C'est l'espacement normal pour la police en question. Cette valeur permet à l'agent utilisateur la modification de l'interlettrage pour la justification d'un texte ;
<longueur>
Cette valeur indique la quantité d'espacement qui s'ajoute à l'interlettrage par défaut. Celle-ci peut être négative, son interprétation dans les limites de l'implémentation. Pour un texte à justifier, les agents utilisateurs peuvent ne plus pouvoir augmenter ou diminuer l'interlettrage.

Les algorithmes d'interlettrage dépendent des agents utilisateurs. La justification peut aussi avoir une influence sur l'interlettrage (voir la propriété 'text-align').

Exemple(s) :

Dans cet exemple, l'interlettrage des éléments BLOCKQUOTE est augmenté de '0.1em' :

BLOCKQUOTE { letter-spacing: 0.1em }

Dans celui-ci, l'agent utilisateur ne peut pas en modifier l'interlettrage :

BLOCKQUOTE { letter-spacing: 0cm }   /* Pareil à '0' */

Quand l'interlettrage résultant entre deux caractères est différent de celui par défaut, les agents utilisateurs ne devraient pas utiliser de ligatures.

Les agents utilisateurs conformes peuvent interpréter la valeur de la propriété 'letter-spacing' comme étant 'normal'.

'word-spacing'
Valeur :  normal | <longueur> | inherit
Initiale :  normal
S'applique à :  tous les éléments
Héritée :  oui
Pourcentage :  sans objet
Médias :  visuel

Cette propriété précise le comportement de l'espacement entre des mots. Les significations des valeurs sont :

normal
L'espace-mot normal, tel que défini par la police en question et/ou l'agent utilisateur ;
<longueur>
Cette valeur indique la quantité d'espacement qui s'ajoute à l'espace-mot par défaut. Les valeurs peuvent être négatives, leur interprétation dans les limites de l'implémentation.

Les algorithmes d'espace-mot dépendent de l'agent utilisateur. La justification peut aussi avoir une influence sur l'espacement entre les mots (voir la propriété 'text-align').

Exemple(s) :

Dans cet exemple, l'espace-mot entre chacun des mots des éléments H1 est augmenté de '1em' :

H1 { word-spacing: 1em }

Les agents utilisateurs conformes peuvent interpréter la valeur de la propriété 'word-spacing' comme étant 'normal'.

16.5 La capitalisation : la propriété 'text-transform'

'text-transform'
Valeur :  capitalize | uppercase | lowercase | none | inherit
Initiale :  none
S'applique à :  tous les éléments
Héritée :  oui
Pourcentage :  sans objet
Médias :  visuel

Cette propriété détermine les effets de capitalisation du texte d'un élément. Les significations des valeurs sont :

capitalize
La première lettre de chaque mot est en majuscule ;
uppercase
Les lettres de chacun des mots sont en majuscules ;
lowercase
Les lettres de chacun des mots sont en minuscules ;
none
Aucun effet de capitalisation.

Dans chaque cas, la transformation effective dépend de l'écriture de la langue en question. Voir RFC 2070 ([RFC2070]) pour la détermination de la langue utilisée dans un élément.

Les agents utilisateurs conformes peuvent interpréter la valeur de la propriété 'text-transform' comme étant 'none', pour les caractères n'appartenant pas au répertoire Latin-1 et pour les éléments dans certaines langues, langues pour lesquelles la transformation serait différente de celle spécifiée dans les tables de conversion de ISO 10646 ([ISO10646]).

Exemple(s) :

Dans cet exemple, l'ensemble du texte des éléments H1 est transformé en capitales :

H1 { text-transform: uppercase }

16.6 Les caractères blancs : la propriété 'white-space'

'white-space'
Valeur :  normal | pre | nowrap | inherit
Initiale :  normal
S'applique à :  éléments de type bloc tous les éléments
Héritée :  oui
Pourcentage :  sans objet
Médias :  visuel

Cette propriété détermine la gestion des caractères blancs dans un élément.

normal
Cette valeur enjoint aux agents utilisateurs de fusionner les séquences de caractères blancs et d'effectuer des retours à la ligne de manière appropriée pour remplir les boîtes de ligne. Dans un contenu généré, les survenues de la séquence de caractères "\A" peuvent produire d'autres retours à la ligne (ex. comme l'élément BR en HTML) ;
pre
Cette valeur interdit aux agents utilisateurs la fusion des séquences de caractères blancs. Les retours à la ligne n'interviennent qu'aux endroits des caractères "nouvelle ligne" de la source, ou aux survenues de la séquence "\A" dans un contenu généré ;
nowrap
Cette valeur provoque la fusion des caractères blancs comme pour 'normal' mais supprime les retours à la ligne d'un texte, sauf les retours à la ligne induits par la séquence "\A" dans un contenu généré (ex. comme l'élément BR en HTML).

Exemple(s) :

Les règles suivantes indiquent comment sont gérés les caractères blancs dans les éléments PRE et P, ainsi que pour l'attribut "nowrap" de HTML :

PRE        { white-space: pre }
P          { white-space: normal }
TD[nowrap] { white-space: nowrap }

Les agents utilisateurs conformes peuvent ignorer la propriété 'white-space' des feuilles de style de l'auteur et de l'utilisateur, mais pas dans la feuille de style par défaut où une valeur doit y être spécifiée.

Document créé le 13/08/2006, dernière modification le 26/10/2018
Source du document imprimé : https://www.gaudry.be/css-rf-text.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.

Notes

  1.  W3C : World Wide Web consortium

  2.  Avertissement Légal : Bien que repectant de trè près le document original, cette traduction n'est pas une version française agréée par le W3C

Table des matières Haut

Références

  1. Consulter le document html Langue du document :fr Spécifications CSS : http://www.yoyodesign.org, Le texte

Ces références et liens indiquent des documents consultés lors de la rédaction de cette page, ou qui peuvent apporter un complément d'information, mais les auteurs de ces sources ne peuvent être tenus responsables du contenu de cette page.
L'auteur de ce site est seul responsable de la manière dont sont présentés ici les différents concepts, et des libertés qui sont prises avec les ouvrages de référence. N'oubliez pas que vous devez croiser les informations de sources multiples afin de diminuer les risques d'erreurs.

Table des matières Haut