Formatage du texte

La taille

Pour modifier la taille du texte, on utilise la propriété CSS font-size. Mais comment indiquer la taille du texte ? C'est là que les choses se corsent car plusieurs techniques vous sont proposées:

• Indiquer une taille absolue: en pixels, en centimètres ou millimètres.
  Cette méthode est très précise mais il est conseillé de ne l'utiliser que si c'est absolument nécessaire, car on risque d'indiquer une taille trop petite pour certains lecteurs.


• Indiquer une taille relative: en pourcentage, « em » ou « ex ».
  Cette technique a l'avantage d'être plus souple. Elle s'adapte plus facilement aux préférences de taille des visiteurs.

Haut

Une taille absolue

Pour indiquer une taille absolue, on utilise généralement les pixels. Pour avoir un texte de 16 pixels de hauteur, vous devez donc écrire:

                            1   font-size: 16px;
                        

Les lettres auront une taille de 16 pixels, comme le montre la figure suivante.

Voici un exemple d'utilisation (placez ce code dans votre fichier .css):

                            1   p
2   {
3       font-size: 14px; /* Paragraphes de 14 pixels */
4   }
5   
6   h1
7   {
8       font-size: 40px; /* Titres de 40 pixels */
9   }
                        

Et le résultat est visible à la figure suivante.

À savoir!! Si vous le souhaitez, vous pouvez également définir des tailles en centimètres ou millimètres. Remplacez « px » par « cm » ou « mm ». Ces unités sont cependant moins bien adaptées aux écrans.

Haut

Une valeur relative

C'est la méthode recommandée car le texte s'adapte alors plus facilement aux préférences de tous les visiteurs.

Il y a plusieurs moyens d'indiquer une valeur relative. Vous pouvez par exemple écrire la taille avec des mots en anglais comme ceux-ci:

• xx-small: minuscule;
• x-small: très petit;
• small: petit;
• medium: moyen;
• large: grand;
• x-large: très grand;
• xx-large: euh… gigantesque.

Vous pouvez tester l'utilisation de ces valeurs dans votre code CSS:

                            1   p
2   {
3       font-size: small;
4   }
5   
6   h1
7   {
8       font-size: large;
9   }
                        

Bon, cette technique a un défaut: il n'y a que sept tailles disponibles (car il n'y a que sept noms). Heureusement, il existe d'autres moyens.
Ma technique préférée consiste à indiquer la taille en « em ».

• Si vous écrivez 1em, le texte a une taille normale.
• Si vous voulez grossir le texte, vous pouvez inscrire une valeur supérieure à 1, comme 1.3em.
• Si vous voulez réduire le texte, inscrivez une valeur inférieure à 1, comme 0.8em.

Attention!! Pour les nombres décimaux, il faut mettre un point et non une virgule. Vous devez donc écrire « 1.4em » et non pas « 1,4em »!

Exemple:

                            1   p
2   {
3       font-size: 0.8em;
4   }
5   
6   h1
7   {
8       font-size: 1.3em;
9   }
                        

D'autres unités sont disponibles. Vous pouvez essayer le « ex » (qui fonctionne sur le même principe que le em mais qui est plus petit de base) et le pourcentage (80%, 130%…).

Haut

La police

Ah… La police… On touche un point sensible.

En effet, il se pose un problème : pour qu'une police s'affiche correctement, il faut que tous les internautes l'aient.
Si un internaute n'a pas la même police que vous, son navigateur prendra une police par défaut (une police standard) qui n'aura peut-être rien à voir avec ce à quoi vous vous attendiez.

La bonne nouvelle, c'est que depuis CSS 3, il est possible de faire télécharger automatiquement une police au navigateur. Je vous expliquerai dans un second temps comment faire cela.

Haut

Modifier la police utilisée

La propriété CSS qui permet d'indiquer la police à utiliser est font-family. Vous devez écrire le nom de la police comme ceci:

                            1   balise
2   {
3       font-family: police;
4   }
                        

Seulement, pour éviter les problèmes si l'internaute n'a pas la même police que vous, on précise en général plusieurs noms de police, séparés par des virgules:

                            1   balise
2   {
3       font-family: police1, police2, police3, police4;
4   }
                        

Le navigateur essaiera d'abord d'utiliser la police1. S'il ne l'a pas, il essaiera la police2. S'il ne l'a pas, il passera à la police3, et ainsi de suite.
En général, on indique en tout dernier serif, ce qui correspond à une police par défaut (qui ne s'applique que si aucune autre police n'a été trouvée).

À savoir!! Il existe aussi une autre police par défaut appelée sans-serif. La différence entre les deux est la présence de petites pattes de liaison en bas des lettres, que la police sans-serif n'a pas. Oui, c'est subtil.

Oui, mais quelles sont les polices les plus courantes qu'on a le « droit » d'utiliser, me direz-vous ?
Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs:

• Arial;
• Arial Black;
• Comic Sans MS;
• Courier New;
• Georgia;
• Impact;
• Times New Roman;
• Trebuchet MS;
• Verdana.

La figure suivante vous montre à quoi ressemblent ces polices.

Ainsi, si j'écris:

                            1   p
2   {
3       font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
4   }
                        

… cela signifie : « Mets la police Impact ou, si elle n'y est pas, Arial Black, ou sinon Arial, ou sinon Verdana, ou si rien n'a marché, mets une police standard (sans-serif) ».

En général, il est bien d'indiquer un choix de trois ou quatre polices (+ serif ou sans-serif) afin de s'assurer qu'au moins l'une d'entre elles aura été trouvée sur l'ordinateur du visiteur.

Attention!! Si le nom de la police comporte des espaces, je conseille de l'entourer de guillemets, comme je l'ai fait pour « Arial Black ».

Haut

Utiliser une police personnalisée avec @font-face

Aujourd'hui, avec CSS 3, il existe un moyen d'utiliser n'importe quelle police sur son site. Cela fonctionne bien avec la plupart des navigateurs.

Mais attention, il y a des défauts (ce serait trop beau sinon):

• Il faudra que le navigateur de vos visiteurs télécharge automatiquement le fichier de la police, dont le poids peut atteindre, voire dépasser 1 Mo…


• La plupart des polices sont soumises au droit d'auteur, il n'est donc pas légal de les utiliser sur son site.
  Heureusement, il existe des sites comme fontsquirrel.com et dafont.com qui proposent en téléchargement un certain nombre de polices libres de droits.
  Je recommande en particulier fontsquirrel.com car il permet de télécharger des packs prêts à l'emploi pour CSS 3.


• Il existe plusieurs formats de fichiers de polices et ceux-ci ne fonctionnent pas sur tous les navigateurs.

Voici les différents formats de fichiers de polices qui existent et qu'il faut connaître:

• .ttf: TrueType Font.
  Fonctionne sur IE9 et tous les autres navigateurs.


• .eot: Embedded OpenType.
  Fonctionne sur Internet Explorer uniquement, toutes versions. Ce format est propriétaire, produit par Microsoft.


• .otf: OpenType Font.
  Ne fonctionne pas sur Internet Explorer.


• .svg: SVG Font.
  Le seul format reconnu sur les iPhones et iPads pour le moment.


• .woff: Web Open Font Format.
  Nouveau format conçu pour le Web, qui fonctionne sur IE9 et tous les autres navigateurs.

En CSS, pour définir une nouvelle police, vous devez la déclarer comme ceci:

1 @font-face 2 { 3 font-family: 'MaSuperPolice'; 4 src: url('MaSuperPolice.eot'); 5 }

Le fichier de police (ici MaSuperPolice.eot) doit ici être situé dans le même dossier que le fichier CSS (ou dans un sous-dossier, si vous utilisez un chemin relatif).

Je croyais qu'il y avait plusieurs formats de police ?

Oui, d'ailleurs les .eot ne fonctionnent que sur Internet Explorer. L'idéal est de proposer plusieurs formats pour la police : le navigateur téléchargera celui qu'il sait lire. Voici comment indiquer plusieurs formats:

1 @font-face 2 { 3 font-family: 'MaSuperPolice'; 4 src: url('MaSuperPolice.eot') format('eot'), 5 url('MaSuperPolice.woff') format('woff'), 6 url('MaSuperPolice.ttf') format('truetype'), 7 url('MaSuperPolice.svg') format('svg'); 8 }

Pour tester le fonctionnement, je vous propose de télécharger une police sur Font Squirrel, par exemple CAC Champagne.
Cliquez sur « Webfont Kit », cela vous permettra de télécharger un kit prêt à l'emploi avec tous les formats pour cette police. N'oubliez pas de cocher toutes les cases (WOFF, TTF, EOT et SVG).

Attention!! Pour trouver les polices qui vous permettent de télécharger un "pack CSS" comme je le décris ici, activez le filtre "Webfont" dans le menu Font Filter.

Votre fichier CSS ressemblera au final à ceci:

1 @font-face 2 { /* Définition d'une nouvelle police nommée CAC Champagne */ 3 font-family: 'cac_champagneregular'; 4 src: url('cac_champagne-webfont.eot'); 5 src: url('cac_champagne-webfont.eot?#iefix') format('embedded-opentype'), 6 url('cac_champagne-webfont.eot.woff') format('woff'), 7 url('cac_champagne-webfont.eot.ttf') format('truetype'), 8 url('cac_champagne-webfont.eot.svg#cac_champagneregular') format('svg'); 9 } 10 11 h1 /* Utilisation de la police qu'on vient de définir sur les titres */ 12 { 13 font-family: 'cac_champagneregular', Arial, serif; 14 }

La première (grosse) section @font-face permet de définir un nouveau nom de police qui pourra être utilisé dans le fichier CSS.
Ensuite, nous utilisons ce nom de police avec la propriété font-family, que nous connaissons, pour modifier l'apparence des titres <h1>. Vous pouvez voir le résultat à la figure suivante.

À savoir!! Vous noterez quelques bizarreries dans le CSS généré par le site Font Squirrel. Le but est de pallier certains bugs sur Internet Explorer car les anciennes versions ne comprennent pas quand on définit plusieurs formats. Cela explique donc la présence d'un ?#iefix dans le code.

Haut

Italique, gras, souligné…

Il existe en CSS une série de propriétés classiques de mise en forme du texte. Nous allons découvrir ici comment afficher le texte en gras, italique, souligné… et au passage nous verrons qu'il est même possible d'aller jusqu'à le faire clignoter !

Haut

Mettre en italique

Attends un peu là ! Je croyais que la balise <em> permettait de mettre un texte en italique ?!

Je n'ai jamais dit cela.
Retournez voir les chapitres précédents si vous avez des doutes, mais je n'ai jamais dit que la balise <em> était faite pour mettre le texte en italique (de même que je n'ai jamais dit que <strong> était faite pour mettre en gras).

<em>, mettez-vous bien cela dans la tête, est faite pour insister sur des mots. Cela veut dire que les mots qu'elle entoure sont assez importants.
Pour représenter cette importance, la plupart des navigateurs choisissent d'afficher le texte en italique, mais ce n'est pas une obligation.

Le CSS lui, permet de dire réellement : « Je veux que ce texte soit en italique ». Rien ne vous empêche, par exemple, de décider que tous vos titres seront en italique.

Concrètement, en CSS, pour mettre en italique, on utilise font-style qui peut prendre trois valeurs:

• italic: le texte sera mis en italique.
• oblique: le texte sera passé en oblique (les lettres sont penchées, le résultat est légèrement différent de l'italique proprement dit).
• normal: le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique. Par exemple, si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez écrire:

1 em 2 { 3 font-style: normal; 4 }

Ainsi, dans l'exemple suivant, je me sers de font-style pour mettre en italique tous mes titres <h2> :

1 h2 2 { 3 font-style: italic; 4 }

Haut

Mettre en gras

Et si nous passions à la mise en gras ?
Alors, là encore, n'oubliez pas que ce n'est pas <strong> qui permet de mettre en gras (son rôle est d'indiquer que le texte est important, donc le navigateur l'affiche généralement en gras).
La mise en gras en CSS peut par exemple s'appliquer aux titres, à certains paragraphes entiers, etc. C'est à vous de voir.

La propriété CSS pour mettre en gras est font-weight et prend les valeurs suivantes:

• bold: le texte sera en gras;
• normal: le texte sera écrit normalement (par défaut).

Voici par exemple comment écrire les titres en gras:

1 h1 2 { 3 font-weight: bold; 4 }

Haut

Soulignement et autres décorations

La propriété CSS associée porte bien son nom: text-decoration.
Elle permet, entre autres, de souligner le texte, mais pas seulement.
Voici les différentes valeurs qu'elle peut prendre:

• underline: souligné.
• line-through: barré.
• overline: ligne au-dessus.
• blink: clignotant. Ne fonctionne pas sur tous les navigateurs (Internet Explorer et Google Chrome, notamment).
• none: normal (par défaut).

Ce CSS va vous permettre de tester les effets de text-decoration:

1 h1 2 { 3 text-decoration: blink; 4 } 5 6 .souligne 7 { 8 text-decoration: underline; 9 } 10 11 .barre 12 { 13 text-decoration: line-through; 14 } 15 16 .ligne_dessus 17 { 18 text-decoration: overline; 19 }

Et le résultat est visible à la figure suivante.

Haut

L'alignement

Le langage CSS nous permet de faire tous les alignements connus : à gauche, centré, à droite et justifié.

C'est tout simple. On utilise la propriété text-align et on indique l'alignement désiré:

• left: le texte sera aligné à gauche (c'est le réglage par défaut).


• center: le texte sera centré.


• right: le texte sera aligné à droite.


• justify: le texte sera « justifié ».
  Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont toujours justifiés.

Regardez les différents alignements sur cet exemple:

1 h1 2 { 3 text-align: center; 4 } 5 6 p 7 { 8 text-align: justify; 9 } 10 11 .signature 12 { 13 text-align: right; 14 }

Le résultat est visible à la figure suivante.

Attention!! Vous ne pouvez pas modifier l'alignement du texte d'une balise inline (comme span, a, em, strong…).
L'alignement ne fonctionne que sur des balises de type block (p, div, h1, h2, …) et c'est un peu logique, quand on y pense : on ne peut pas modifier l'alignement de quelques mots au milieu d'un paragraphe !
C'est donc en général le paragraphe entier qu'il vous faudra aligner.

Haut

Les flottants

Le CSS nous permet de faire flotter un élément autour du texte. On dit aussi qu'on fait un « habillage ».

Pour que vous voyiez bien de quoi on parle, la figure suivante vous montre ce que nous allons apprendre à faire.

J'imagine que, maintenant, la question qui vous brûle les lèvres est : « Mais quelle est donc la propriété magique qui fait flotter ? ».
La réponse est… float (« flottant » en anglais).
Cette propriété peut prendre deux valeurs très simples:

• left: l'élément flottera à gauche.
• right: l'élément flottera à droite.

L'utilisation des flottants est très simple:

1. Vous appliquez un float à une balise.
2. Puis vous continuez à écrire du texte à la suite normalement.

À savoir!! On peut aussi bien utiliser la propriété float sur des balises block que sur des balises inline.
Il est courant de faire flotter une image pour qu'elle soit habillée par du texte, comme dans l'exemple précédent.

Haut

Faire flotter une image

Nous allons apprendre ici à faire flotter une image.
Voici le code HTML que nous devons taper dans un premier temps:

1 <p><img src="flash.gif" class="imageflottante" alt="Image flottante" /> Ceci est un texte normal de paragraphe, écrit à la suite de l'image et qui l'habillera car l'image est flottante.</p>

Attention!! Vous devez placer l'élément flottant en premier dans le code HTML. Si vous placez l'image après le paragraphe, l'effet ne fonctionnera pas.

Voici le seul bout de code CSS qu'on ait besoin de taper, qui permet de faire flotter l'image à gauche:

1 .imageflottante 2 { 3 float: left; 4 }

Amusez-vous aussi à faire flotter l'image à droite, c'est tout bête : il suffit d'indiquer la valeur right et le tour est joué!

Haut

Stopper un flottant

Quand vous mettez en place un flottant, le texte autour l'habille.
Mais comment faire si vous voulez qu'au bout d'un moment le texte continue en dessous du flottant ? On pourrait enchaîner plusieurs <br /> à la suite mais cela ne serait ni élégant ni très propre…

En gros, on aimerait pouvoir obtenir le même résultat qu'à la figure suivante.

Il existe en fait une propriété CSS qui permet de dire : « Stop, ce texte doit être en-dessous du flottant et non plus à côté ».
C'est la propriété clear, qui peut prendre ces trois valeurs:

• left: le texte se poursuit en-dessous après un float: left;
• right: le texte se poursuit en-dessous après un float: right;
• both: le texte se poursuit en-dessous, que ce soit après un float: left; ou après un float: right;.

Pour simplifier, on va utiliser tout le temps le clear: both, qui marche après un flottant à gauche et après un flottant à droite (cela fonctionne donc à tous les coups).
Pour illustrer son fonctionnement, on va prendre ce code HTML:

1 <p><img src="flash.gif" class="imageflottante" alt="Image flottante" /></p> 2 <p>Ce texte est écrit à côté de l'image flottante.</p> 3 <p class="dessous">Ce texte est écrit sous l'image flottante.</p>

Et ce code CSS:

1 .imageflottante 2 { 3 float: left; 4 } 5 6 .dessous 7 { 8 clear: both; 9 }

Et voilà le travail.

On applique un clear: both; au paragraphe que l'on veut voir continuer sous l'image flottante et le tour est joué !

Haut