Propriétés CSS de formatage et de mise en forme du texte

Enfin ! On est arrivé au bout des chapitres consacrés au formatage de texte. Ouf ça m'a coûté à peu près une semaine de rédaction. Trêve de bavardage, passons au vif du sujet. Dans le présent chapitre on va attaquer les propriétés CSS de formatage de texte : text-decoration, text-transform, font-variant, text-shadow et font-stretch.

• text-decoration

• text-transform

• font-variant

• text-shadow

• font-stretch

text-decoration

La propriété CSS text-decoration permet d'apporter quelques enrichissements au texte (soulignements, clignotements etc.). Elle reconnait cinq notations :

• underline : souligné. Notez que ça constitue la valeur par défaut des liens ;
• overline : ligne au dessus ;
• line-through : barré ;
• blink : clignotant. (ne marche pas sous internet explorer 6 et 7 au même titre que la balise dépréciée <blink>) ;
• none : valeur par défaut. Pas de décoration du texte.

Notez que La couleur des barres d'enrichissement est puisée de la valeur de la propriété CSS color (couleur de la police).

Bien que la propriété CSS text-decoration ne soit pas héritable. Les enrichissements décoratifs appliqués à un élément seront automatiquement transmis aux éléments enfants. A titre d'exemple, si un paragraphe est souligné, les éléments enfants imbriqués dans le paragraphe (em, strong, span) le seront également.

Une des applications judicieuses de la constante none, permet d'enlever les soulignements qui marquent par défaut les liens :

a {
text-decoration: none; /* les liens apparaîtront
sans le trait de soulignement par défaut. */
}

A moins que vous utilisez la constante none. Vous avez la possibilité de spécifier plusieurs styles décoratifs au même texte en les séparent par des espaces. Exemple :

h1 {
text-decoration: underline overline; /* texte souligné et doté
d'une ligne supérieure */
}

text-transform

La propriété CSS text-transform est d'un usage relativement faible. Elle permet de contrôler la casse du texte, ainsi il vous est possible de changer dynamiquement la casse d'origine du code source au chargement de la page. Notez que par défaut les navigateurs sont tenus de restituer fidèlement la casse d'origine. La propriété CSS text-transform reconnait quatre valeurs :

• capitalize : mots commençant par des majuscules (capitalisation de la première lettre de chaque mot) ;
• uppercase : conversion de toutes les lettres en majuscules ;
• lowercase : conversion de toutes les lettres en minuscules ;
• none : elle correspond à la valeur par défaut. Le navigateur conserve la casse d'origine. Autrement dit le texte sera restitué tel qu'il apparaît dans le code XHTML, c'est-à-dire les majuscules et les minuscules introduites par le clavier vont pas subir un changement.

<span style="text-transform: none;">
PHRASE avec la valeur none.<span />

<span style="text-transform: lowercase;">
PHRASE avec la valeur lowercase.</span>

<span style="text-transform: uppercase;">
PHRASE avec la valeur uppercase.</span>

<span style="text-transform: capitalize;">
PHRASE avec la valeur capitalize.</span>

• dans le premier cas : pas de changement de casse. Le texte va garder la casse d'origine c'est-à-dire celle introduite dans le code XHTML ;
• deuxième situation : toute la casse va se transformer en minuscule. Remarquez que le mot "PHRASE" a changé de casse ;
• troisième cas : tout le paragraphe sera resitué en majuscule abstraction faite de la casse appliquée dans le code source ;
• dernier cas : tous les mots du paragraphe vont commencer par des majuscules. Ceci dit que cette valeur va cibler uniquement les premières lettres, les autres vont conserver la casse d'origine.

Notez que cette propriété est destinée aux langues latines et romaines (espagnole, français, anglais, italien etc.). Ainsi cette propriété n'aura aucun effet sur les langues qui ne reconnaissent pas une double casse (minuscule/majuscule) comme l'arabe.

L'une des astuces que j'ai inventée tout seul comme un grand, et j'en suis d'ailleurs infiniment fier Consiste à appliquer le pseudo-element first-letter combiné à la propriété CSS text-transform avec la valeur capitalize aux en-têtes et paragraphes, pour mettre automatiquement la première lettre des éléments précités en majuscule.

Conventionnellement chaque paragraphe et titre doit débuter par une majuscule. L'astuce précitée va remplir un rôle de précaution. On sait jamais, car il y a de grandes chances à ce que vous oubliez d'entamer vos titres et paragraphes par des majuscules

font-variant

Hey ! Mais On a déjà traité cette propriété Oui je sais, mais je veux juste en reparler, car la situation l'exige. Bon, à titre de rappel, cette propriété permet aussi d'agir sur la casse. Elle accepte deux valeurs :

• small-caps : texte en petites capitales (texte écrit en des majuscules de taille petite) ;
• normal : le texte sera écrit normalement (valeur par défaut).

text-shadow

La propriété CSS text-shadow permet d'ajouter des effets d'ombre au texte. Shadow signifie en français ombre. La propriété de style text-shadow peut recevoir quatre valeurs :

• une valeur pour la couleur des ombres : nom de couleur en anglais ; notation hexadécimale ; notation RGB. Si vous n'avez pas spécifié aucune couleur. Le navigateur utilisera celle de votre police (la propriété CSS color) pour les ombres. La valeur de la couleur peut être spécifiée avant ou après les trois autres valeurs.
• deux valeurs pour le décalage horizontal et vertical de l'ombre : la première spécifie la distance horizontale à droite du texte. La deuxième définit la distance verticale en-dessous du texte, ceci est valable lorsque les deux valeurs sont positives. Pour solliciter l'effet inverse, tapez des valeurs négatives. Dans ce cas la première indiquera la distance à gauche du texte et la deuxième la distance au-dessus du texte.
• Une mention facultative qui permet d'indiquer le rayon du flou (blur). Cette valeur doit être signalée immédiatement après les deux valeurs qui précisent le décalage, les trois valeurs étant séparées par des espaces. Exemple : 2px 2px 3px; la mention de couleur peut être insérée avant ou après les trois valeurs.

Exemple complet avec les quatre valeurs :

h1 {
text-shadow: 1px 1px 1.5px red; /* ou bien : red 1px 1px 1.5px;
ombre de couleur rouge et un flou de rayon 1.5 pixels décalé 
d'un pixel à droite du texte et d'un pixel en-dessous du texte */ 
}
p {
text-shadow: blue -1px 2px; /* rappelez-vous que la mention du rayon
du flou est facultative, par conséquent elle peut être omise. 
cette fois l'ombre sera décalé d'un pixel à gauche du texte 
et de deux pixels en-dessous du texte */ 
}

Si vous n'avez pas signalé les coordonnées de l'ombre, le navigateur va le placer en bas à droite (réglage par défaut). Sachez aussi que vous pouvez utiliser les trois valeurs avec d'autres unités de mesure autre que px à savoir : cm (centimètres), mm (millimètres), in (inches : pouces), pc (picas), pt (points) et em (cadratins).

Avant de terminer je tiens à vous signaler une dernière chose : text-shadow peut être combinée au deux pseudo-elements : first-letter et first-line. Ne paniquez pas on va consacrer tout un chapitre aux pseudo-elements. Exemples :

p:first-line { /* seulement la 1ère ligne de chaque paragraphe recevra ces styles */ 
font-size: 1.2em;
color: red;
text-shadow: red 0px 0px 5px;
} 

h1:first-letter {/* seulement la 1ère lettre de chaque titre h1 recevra ces styles */
font-size: 36px;
color: green;
text-shadow: red 0px 0px 5px;
}

Malheureusement cette propriété qui fait partie de la version CSS 2.0 n'est pas encore implémentée par les navigateurs actuels : Firefox, Internet Explorer 6 et 7, Mozilla, Netscape, Opera et K-Meleon. Par contre cette propriété opère bel et bien sous Safari 3.1.1. Voici des sorties visuelles avec ce navigateur :

J'aimerais bien mettre l'accent sur le dernier exemple. En fait si ça vous intéresse uniquement l'effet flou (blur). Vous pouvez mettre les deux valeurs de décalage à 0px, pour que l'ombre et le texte soient confondus. Enfin précisez un rayon de fondu, pour obtenir un effet très appréciable : un texte avec un contour flou.

font-stretch (l'étirement de police)

Tout d'abord un peu d'anglais "To stretch a muscle" veut dire en français étirer un muscle. Je parie que vous avez deviné à quoi sert cette propriété Elle permet de mentionner l'étroitesse (l'étirement) de la police ou si vous voulez contracter ou étendre la largeur horizontale de la police. Voici les valeurs reconnues par la propriété CSS font-stretch :

• wider : plus large, applique la valeur d'expansion supérieure, c'est-à-dire celle qui se trouve immédiatement après la valeur héritée ou la valeur qui correspond au réglage par défaut (cette propriété n'aura pas d'effet si la valeur héritée est déjà "ultra-expanded") ;
• narrawer : plus étroit, applique la valeur de contraction inférieure, c'est-à-dire celle qui se trouve immédiatement avant la valeur héritée ou la valeur qui correspond au réglage par défaut (cette propriété n'aura pas d'effet si la valeur héritée est déjà "ultra-condensed") ;
• condensed : condensé ;
• semi-condensed : à moitié condensé ;
• extra-condensed : très condensé ;
• ultra-condensed : diaboliquement condensé ;
• expanded : étendu ;
• semi-expanded : à moitié étendu ;
• extra-expanded : très étendu ;
• ultra-expanded : diaboliquement étendu ;
• normal : étirement normal (valeur par défaut).

Un petit exemple pour bien comprendre.

p {
font-stretch: wider;
}

La propriété CSS font-stretch n'est pas encore supportée par les navigateurs de la génération actuelle.

Voilà, c'est terminé avec le formatage du texte. Vous pouvez à présent créer de superbes effets avec tout le paquet de propriétés CSS que vous venez d'apprendre. Moi je vous ai filé la partie théorique, il ne vous reste plus qu'à faire exploser votre potentiel ainé en ce qui concerne le choix des couleurs et d'effet stylistes.

Dans le prochain chapitre on va apprendre à manipuler les sélecteurs de pseudo-classses pour les liens.