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'

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.

  P { text-indent: 3em }

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

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').

DIV.center { text-align: center }

16.3 La décoration

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

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.

A[href] { text-decoration: underline }

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

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.

H1 { text-shadow: 0.2em 0.2em }

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

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

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

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

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').

BLOCKQUOTE { letter-spacing: 0.1em }

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'.

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').

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'

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]).

H1 { text-transform: uppercase }

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

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).

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.

You are on the French version of the site, but your system indicates that you prefer to use the English language.
The entire site is not translated yet, but the menus and buttons on the interface are largely translated.

Would you like to reach the page in English?
Click here to continue in English: Consult the English version of this page

U bevindt zich op de Franse versie van de site, maar uw systeem geeft aan dat u liever de Nederlandse taal gebruikt.
De hele site is nog niet vertaald, maar de menu's en knoppen op de interface zijn grotendeels vertaald.

Wilt u de pagina in het Nederlands bereiken?
Klik hier om door te gaan in het Nederlands: Raadpleeg de Nederlandse versie van deze pagina

Sie befinden sich in der französischen Version der Website, Ihr System gibt jedoch an, dass Sie die deutsche Sprache bevorzugen.
Die gesamte Site ist noch nicht übersetzt, aber die Menüs und Schaltflächen auf der Benutzeroberfläche sind weitgehend übersetzt.

Möchten Sie die Seite auf Deutsch erreichen?
Klicken Sie hier, um fortzufahren: Konsultieren Sie die deutsche Version dieser Seite