Le langage CSS/Texte
Si vous êtes pressé consultez en priorité :
Dans ce chapitre nous détaillons les différentes propriétés CSS relatives au traitement des caractères : police, taille, variante, espacement des lignes, etc.
Le balayage des standards du W3C est accompagné de conseils pour bien exploiter le potentiel de traitement des caractères en CSS en évitant les écueils courants des navigateurs et des plates-formes.
Alors que les Internautes sont nombreux à parcourir très rapidement les pages web, l'objectif est d'obtenir un texte lisible et, surtout, agréable à lire afin de retenir le lecteur plus que sur les autres sites...
Les caractères.
codice_1 : taille des caractères.
La propriété codice_1 permet de modifier la taille des caractères.
On peut utiliser une unité de distance ou un mot clef se référant à une taille prédéfinie dans le navigateur web ou modifiant une taille héritée d'un élément parent.
Les unités utilisables sont répertoriées dans le chapitre Valeurs et unités, les mot-clefs sont listés plus bas.
Par exemple ces styles :
avec le code HTML suivant :
<p id="t1">Paragraphe avec style #t1</p>
<p id="t2">Paragraphe avec style #t2</p>
<p id="t3">Paragraphe avec style #t3</p>
produisent ceci :
Paragraphe avec style #t1
Paragraphe avec style #t2
Paragraphe avec style #t3
On peut aussi utiliser des mot-clefs décrivant la taille de la police :
Dans le premier cas la taille est relative à celle spécifiée pour un parent et dans le second cas la taille correspond à une valeur prédéfinie dans le navigateur.
Exemple, ces styles :
produisent ceci lorsqu'on imbrique le "p" dans le "div" :
<div>
 Texte hors du paragraphe
 <p>Texte dans le paragraphe<p>
</div>
Texte hors du paragraphe
Texte dans le paragraphe
codice_13 : couleur des caractères.
La propriété codice_13 définit la couleur des caractères. Par défaut celle-ci est héritée du parent. Pour la changer, il faut utiliser une valeur de couleur selon les possibilités indiquées dans le chapitre Valeurs et unités.
Exemple :
Rend ces couleurs :
<em>Texte em</em> et <span>texte span</span>
Texte em et texte span
Gras, italique.
codice_15.
La propriété codice_15 permet de passer en texte italique ou de revenir en texte droit, lorsqu'on est déjà dans un passage en italique. Les différentes valeurs possibles sont les suivantes :
La police utilisée doit avoir une variante correspondant à chaque valeur de cette propriété. Aussi, comme bien souvent la variante "oblique" n'existe pas, on se contentera des deux premières valeurs.
Par exemple ceci :
donne :
<strong>Texte strong</strong> et <em>texte em</em>
Texte strong et texte em
NB: le style standard de "strong" est caractères gras et celui de "em" est caractères en italique.
codice_20.
La propriété codice_20 définit la "graisse" de la police. Les valeurs possibles sont :
À nouveau, seules les deux premières valeurs sont utiles car les navigateurs ne proposent aujourd'hui pas de graisse relative.
Par exemple ceci :
donne :
Texte strong et texte em
NB : le style standard de "strong" est caractères gras et celui de "em" est caractères en italique.
codice_26 : souligné, surligné, barré.
La propriété codice_26 permet d'ajouter un trait au texte. Les valeurs possibles sont :
Cette propriété est très utile pour styliser les liens qui sont par défaut soulignés dans les navigateurs. Il est en effet assez courant de nos jours ne plus les souligner mais de seulement les colorer.
Exemple :
Donne ceci :
Texte strong, texte em et texte span
Cette propriété permet en fait de rassembler quatre sous-propriétés :
Il est courant de souligner des erreurs par une vague rouge :
Souligné par une vague rouge
Majuscules et minuscules.
codice_47.
La propriété codice_47 permet de basculer les caractères en petites capitales d'imprimerie. Il faut pour cela lui donner la valeur codice_49, la valeur codice_17 permettant de revenir à des lettres minuscules. Par exemple ce code CSS :
appliqué au texte « Texte du paragraphe. Nouvelle phrase. » donne ceci :
Texte du paragraphe. Nouvelle phrase.
Cet effet peut être intéressant dans les titres ou dans les menus. Par contre sur un texte complet, il est rare d'utiliser des petites majuscules.
codice_51.
La propriété codice_51 contrôle la casse du texte.
Elle accepte les valeurs suivantes :
Par exemple ces styles CSS :
appliqués au texte « minuscules, MAJUSCULES dans ... » donnent ceci :
minuscules, MAJUSCULES dans strong (capitalize)
minuscules, MAJUSCULES dans em (uppercase)
codice_53
À nouveau ce genre d'effet ne trouve habituellement sa place que dans les titres ou les menus.
Le raccourci codice_54.
La propriété codice_54 est un raccourci pour spécifier plusieurs propriétés relatives à la police en une seule ligne dont certaines sont détaillées plus loin dans ce chapitre.
Cette propriété, bien que pratique, est néanmoins peu tolérante quand à l'ordre des propriétés spécifiées, lequel est le suivant :
Dans cette liste, codice_1 et codice_63 doivent obligatoirement être mentionnées.
Par ailleurs codice_1 et codice_60 doivent être accolés avec la barre oblique '/'. Il faut donc être rigoureux lorsqu'on utilise ce raccourci.
Le W3C donne les exemples suivants :
Attention : toute propriété parmi les 6 listées plus haut qui n'est pas mentionnée lors de l'utilisation de codice_54 est remise à sa valeur initiale.
Exemple :
Police de caractères.
Les grandes familles de polices.
Les polices de caractères sont classées selon 5 catégories calquées sur l'imprimerie :
Exemple (si le type de police n'existe pas dans votre navigateur, il sera remplacé par un autre type, classiquement un "sans-serif") :
Texte avec une police à empattement
Texte avec une police sans empattement
Texte avec une police à chasse fixe
Texte avec une police cursive
Texte avec une police fantaisie
On considère habituellement qu'un long texte doit être rédigé en utilisant un des deux premiers types. Le débat entre avec ou sans empattement est un sujet à part entière, certains considérant les premières comme plus lisibles. En pratique on trouve très couramment des polices à empattement dans les livres, avec donc une connotation de tradition. Les polices sans empattement sont plus récentes et sont donc empreintes d'une idée de modernisme. Aussi utilise-t-on souvent ces polices sur le web. Enfin les polices à chasse fixe servent souvent à afficher du code source, elles ont ainsi une connotation ordinateur, imprimante, etc.
codice_63 : choix de la police.
La propriété codice_63 définit la police de caractères. Elle accepte comme valeur un ou plusieurs nom(s) de polices ou de type de police ( police "générique"). Dans le cas de plusieurs noms, il faut les séparer par des virgules et les éventuels espaces additionnels ne comptent pas. Le navigateur affichera alors le texte avec la première police trouvée dans l'ordre de la liste. Pour cette raison, il est de peu d'utilité de mentionner à la fin de la liste des polices ayant moins de chance d'être installées sur la plate-forme de l'utilisateur. Enfin il n'est pas obligatoire d'encadrer les noms de guillemets (") ou d'apostrophes (') et le nom des polices est insensible à la casse.
Comme nous le verrons plus loin, il est impératif de "toujours mentionner" en dernier le nom d'une police "générique" pour que le navigateur ait une solution de rechange s'il ne trouve pas les polices demandées. La liste possible correspond aux types de police précédemment évoqués :
Par exemple ceci :
donne (le résultat dépend de la plate-forme utilisée) :
Texte strong (serif) et texte em (monospace)
Remarque : si par malheur le nom de la police à utiliser comportait un des mot-clef "inherit", "initial", "default" ou encore le nom d'un type de police ("serif", "sans-serif", etc.), il faudrait alors impérativement l'encadrer de guillemets (") ou d'apostrophes (') afin d'éviter toute confusion.
Police et taille de police.
Même à taille égale, par exemple 16 pixels, deux polices différentes peuvent ne pas sembler de même dimension. Ceci est lié à ce que les typographes appellent "la taille de l'x" (la lettre x). Pour faire simple, disons que ce n'est pas parce que les lettres les plus hautes occupent la même hauteur que les lettres les plus petites le font également.
Ainsi la police "verdana", très utilisée sur le web, est une police qui paraît généralement plus grosse que les autres à taille égale. C'est très certainement la raison pour laquelle elle est si souvent choisie : à taille égale, elle paraît plus lisible puisque plus grosse. L'inconvénient d'utiliser cette police est que, si elle n'est pas disponible sur la plate-forme utilisée, le navigateur se rabattra sur une autre vraisemblablement moins grosse en apparence. L'utilisateur aura donc une impression différente de la page, probablement moins bonne que souhaitée.
Pour éviter ce type de désagrément, la recommandation que l'on peut faire est d'utiliser comme valeur de la propriété codice_63 une liste de polices dont la taille de l'x est similaire. Pour appréhender cette dimension, il suffit d'aligner verticalement un même mot écrit avec différentes polices. La difficulté, on le verra au paragraphe suivant, est de trouver une liste de polices qui sera probablement disponible sur les 3 plates-formes majeures : Linux, Macintosh et Windows.
Les polices et les plates-formes.
Une des grosses difficultés du web est la diversité des plates-formes. Elle se manifeste bien sûr par la diversité des navigateurs web mais aussi par la diversité des polices de caractères installées. Aussi, si le nombre de polices disponibles sur un ordinateur est souvent très réduit et correspond aux polices par défaut du système et celles éventuellement installées par les applications comme les suites bureautiques, les polices installées d'une plate-forme à l'autre ne coïncident généralement pas non plus.
De ce fait, il n'est pas possible de se reposer sur la spécification d'une seule police et, comme il est difficile de trouver une police commune à toutes les plates-formes, il faut toujours accompagner la spécification d'une police d'un nom de police générique. Ceci ne vous empêche nullement de spécifier quelques polices un peu extravagantes en début de liste au cas où l'utilisateur les auraient, bien au contraire.
Si toutefois vous souhaitiez vraiment utiliser une police peu courante, une solution validée pour contourner le problème de l'installation de la police consiste à opérer le remplacement d'un texte par une image que vous aurez créée dans votre logiciel de dessin favori avec la police désirée. Bien sûr on ne peut pas imaginer faire ceci pour un long texte mais seulement pour des titres ou, à la limite, des menus.
Signalons pour être exhaustif qu'il y existe théoriquement des méthodes pour que le navigateur télécharge automatiquement une police manquante à partir d'un fichier de police. Toutefois ces méthodes sont très liées à la plate-forme utilisée et ne peuvent pas être exploitées avec une grande chance de succès. Le plus serein est donc d'accepter que les utilisateurs n'aient pas tous le même rendu des pages que vous créez, sinon utilisez des documents PDF !
Liste de polices probablement installées.
À compléter...
Ressources.
Code Style font sampler en langue anglaise présente des sondages ("survey") sur la disponibilité des polices sur les 3 plates-formes majeures : Linux, Macintosh et Windows.
Alignement et espacement.
Alignement du texte.
codice_70.
La propriété codice_70 définit l'alignement du contenu d'un élément, typiquement le texte dans un paragraphe. Les valeurs possibles sont :
Une figure valant mieux que de longues explications, l'effet de chaque valeur est le suivant :
On constate aisément dans cet exemple que le texte justifié peut ne pas toujours être une bonne solution lorsque la largeur du contenant n'est pas suffisante. Des espacements exagérés entre mots peuvent en effet apparaître, c'est un problème connu avec ce type d'alignement du texte. La solution serait d'introduire la césure des mots mais cela ne fait pas encore partie du standard CSS !
Remarque : Les spécifications du W3C indiquent que la propriété codice_70 ne concerne que les contenus de type "inline" (en ligne), c'est-à-dire destinés à être affichés les uns à la file des autres comme du texte, des liens, etc.
codice_73.
La propriété codice_73 définit le retrait de la première ligne de texte d'un élément. La valeur spécifiée est une valeur de distance. Par exemple le code suivant :
donne ceci :
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Espacement des caractères, des mots et des lignes.
codice_75.
La propriété codice_75 modifie l'espacement entre les lettres des mots. Cet espacement est nul par défaut, ce qui ne veut pas dire que les caractères se touchent, et peut prendre une valeur de distance quelconque. On l'utilisera notamment pour rendre plus lisibles des titres surchargés par la graisse ou les lettres capitales. Par exemple, le code CSS suivant :
donne ceci :
Texte strong
Texte span
L'effet produit sur un gros texte est loin d'être négligeable comme on peut le voir, il est donc regrettable que cette propriété soit si peu utilisée sur le web.
Remarque : le style par défaut de "strong" est caractères gras alors que "span" est du texte normal.
codice_77.
La propriété codice_77 contrôle l'espacement des mots. Cet espacement est nul par défaut, ce qui à nouveau ne signifie pas que les mots se touchent, et peut prendre une valeur de distance quelconque. Comme l'espacement de mots standard des navigateurs est très bien, il n'y a que peu de raisons d'utiliser cette propriété, si ce n'est pour créer des effets de typographie. Par exemple, le code CSS suivant :
donne ceci :
Texte strong
Texte span
À utiliser à bon escient...
codice_60.
La propriété codice_60 modifie l'espacement entre les lignes d'un texte. Cet espacement peut prendre une valeur de distance quelconque. L'espacement entre les lignes est un facteur important de lisibilité et d'agrément de lecture et, malheureusement, l'espacement par défaut des navigateurs est souvent trop étroit. L'œil reconnaît tout de suite un espacement qui convient et qui lui permet de suivre facilement la ligne en cours de lecture. Ainsi, bien que dans les exemples suivant il s'agisse de latin, il est clair qu'une valeur entre 1.5em et 2.0em rend le texte plus agréable à lire ! Signalons également qu'imposer une augmentation de l'interlignage peut parfois être le seul moyen d'éviter l'enchâssement des caractères typographiques dans le cas de titres particulièrement longs qui causent un retour à la ligne comme le montre le dernier exemple.
Espacement de 1.1em, de toute évidence pénible à lire :
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Espacement de 1.6em, très convenable :
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Espacement de 2.5em, exagéré :
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Bien évidement rien n'empêche d'utiliser des valeurs volontairement inhabituelles sur des textes courts afin de leur donner une importance. Évidemment il faut dans ce cas user de l'effet avec parcimonie sans quoi le lecteur risque de trouver les pages peu agréables.
Enfin voici ce qui se passe sur un long titre avec un espacement de ligne faible :
<h5> Titre avec un texte très long qui va sans doute déborder sur la ligne suivante et causer un affichage disgracieux sur la plupart des écrans</h5>
Colonnes.
La propriété codice_81 permet de définir le nombre de colonnes d'un bloc de texte. Par exemple (CSS intégré dans du HTML) :
<ul style="column-count: 4">
 <li> Premier élément ;</li>
 <li> deuxième élément ;</li>
 <li> troisième élément ;</li>
</ul>
Les propriétés suivantes définissent la mise en forme des colonnes :