La mise en forme du texte est au cœur de CSS. Celui-ci fournit de nombreuses propriétés permettant de modifier l'apparence du texte. En quelque sorte, CSS est le prolongement, sur le Web, de la typographie qui existe depuis plusieurs siècles.
La mise en forme du texte se décline sur deux composantes : la police et la disposition du texte. Ces deux éléments sont des bases, abordées parmi les premiers concepts qu'on voit en CSS. Toutefois, la mise en forme du texte est plus subtile qu'il n'y paraît. Dans cet article, nous détaillerons les différentes possibilités offertes par CSS. Libre à vous de choisir ce dont vous avez besoin ou ce sur quoi vous souhaitez expérimenter.
Les polices de texte peuvent être modifiées et adaptées grâce à ces propriétés CSS :
CSS fournit également des unités dédiées aux polices et des outils pour le texte sélectionné :
em mais toujours relative à la taille de la police pour l'élément racine.Les propriétés les plus fréquemment utilisées peuvent être manipulées grâce à la propriété raccourcie {{cssxref("font")}}. Celle-ci se décompose (dans l'ordre) en : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, et {{cssxref("font-family")}}. Parmi toutes ces propriétés, seules font-size et font-family sont obligatoires pour cette notation raccourcie.
Prenons un exemple pour illustrer ce point.
Voici le fragment de code HTML qu'on utilisera :
<p> He dressed himself "all in his best," and at last got out into the streets. The people were by this time pouring forth, as he had seen them with the Ghost of Christmas Present; and walking with his hands behind him, Scrooge regarded every one with a delighted smile. He looked so irresistibly pleasant, in a word, that three or four good-humoured fellows said, "Good morning, sir! A merry Christmas to you!" And Scrooge said often afterwards, that of all the blithe sounds he had ever heard, those were the blithest in his ears. </p> <p class="fancy"> He dressed himself "all in his best," and at last got out into the streets. The people were by this time pouring forth, as he had seen them with the Ghost of Christmas Present; and walking with his hands behind him, Scrooge regarded every one with a delighted smile. He looked so irresistibly pleasant, in a word, that three or four good-humoured fellows said, "Good morning, sir! A merry Christmas to you!" And Scrooge said often afterwards, that of all the blithe sounds he had ever heard, those were the blithest in his ears. </p>
Et voilà la feuille de style CSS qu'on appliquera :
/* Voici un disposition simple pour que
les paragraphes soient côte à côte. */
p {
box-sizing: border-box;
width : 50%;
padding : 1em;
float : left;
}
.fancy {
font: 0.85rem/150% Helvetica, Arial, sans-serif;
}
.fancy::first-line {
font-variant: small-caps;
}
.fancy::first-letter {
font-family: serif;
font-size : 3rem;
float : left;
background : blanchedalmond;
color : goldenrod;
border : 0.5rem solid gold;
padding : 1rem;
margin : 0 0.5rem 0 0;
}
Ces deux éléments permettront d'aboutir au résultat suivant :
{{EmbedLiveSample('La_mise_en_forme_simple', '100%', '320')}}
Note : Les styles de police vous permettent de faire de nombreuses choses. Toutefois, le Web reste un média principalement basé sur le texte et les polices ont donc leur importance. Nous vous encourageons donc à utiliser les mécanismes offerts par CSS pour améliorer la lisibilité du texte. Pour cela, vous pouvez consulter les différentes règles typographiques recommandées pour le Web.
CSS fournit des propriétés, encore plus avancées, dédiées aux polices d'écriture. Cependant, ces propriétés sont toujours expérimentales et parfois mal supportées par certains navigateurs ou spécifiques à certaines langues (généralement les langues non latines) :
text-decoration-line vaut underline.Il existe des milliers de polices, quelques unes sont très connues mais on peut s'y perdre rapidement. La typographie, l'art des polices ne sont pas nouveaux, cela dit, le Web apporte son lot de contraintes spécifiques et les fontes ne sont parfois pas aussi adaptées que sur le papier. Voyons ici comment gérer cela.
La propriété {{cssxref("font-family")}} vous permet de choisir la police de caractères que vous souhaitez appliquer à votre texte. Cette propriété fonctionne avec une valeur qui s'écrit sous la forme d'une liste de noms de polices, chacun séparé par des virgules. Le navigateur parcourera les polices de gauche à droite afin d'utiliser celle qui est disponible sur la machine.
body {
/* Si la police "Open Sans" est disponible, c'est
celle-ci qui serait utilisée pour mettre en forme
le texte. Sinon, ce sera la police Arial qui sera
utilisée et enfin, si Arial n'est pas disponible,
ce sera la police sans-serif disponible, par défaut
sur le système, qui sera utilisée. */
font-family: "Open Sans", Arial, sans-serif;
}
Tout d'abord, CSS définit cinq noms de polices génériques : serif, sans-serif, monospace, cursive, et fantasy. Celles-ci sont choisies par le navigateur selon le système d'exploitation utilisé (il est possible que les différents navigateurs choisissent des polices différentes). C'est en quelque sorte les polices de dernier recours à utiliser. Les polices désignées par serif, sans-serif et monospace devraient être assez prévisibles. En revanche, celles désignées par cursive et fantasy sont moins prévisibles et nous vous conseillons donc de les utiliser avec précaution.
Note : On ne peut jamais être sûr à 100% des polices disponibles sur un ordinateur, aussi, c'est une bonne pratique que de toujours ajouter une police générique en dernier dans la liste des valeurs pour la propriété font-family.
Les polices génériques sont convenables mais imprévisibles. La plupart du temps, on souhaite mieux contrôler la police qui sera utilisée pour afficher le contenu textuel. On a vu juste avant qu'il était impossible de déterminer à coup sûr les polices disponibles sur un système. Toutefois, on peut s'aider de statistiques pour parier sur différentes polices fréquemment utilisées. Parmi les différents systèmes d'exploitation courants (Windows, Mac, certaines distribution Linux grand public, Android, et iOS), il existe un ensemble de polices largement répandues. Ces polices sont parfois appelées « web fonts » car elles peuvent être utilisées sans trop de risque sur le Web.
Bien entendu, les systèmes d'exploitation évoluent et la liste des web fonts peut évoluer au cour du temps. Cependant, à l'heure où nous écrivons ces lignes, on peut considérer que les polices suivantes sont largement répandues (notamment grâce à l'initiative Core fonts for the Web de Microsoft à la fin des années 90) :
| Nom | Type générique | Notes |
|---|---|---|
| Arial | sans-serif | On considère généralement qu'il est préférable d'ajouter également Helvetica devant Arial. En effet, les polices sont presque identiques et bien qu'Arial soit plus répandue, Helvetica est plus appréciée (en termes de forme). |
| Courier New | monospace | Certains systèmes d'exploitation disposent d'une autre version (potentiellement plus ancienne), appelée Courier. C'est une bonne pratique d'utiliser les deux tout en favorisant Courier New dans l'ordre des priorités. |
| Georgia | serif | |
| Times New Roman | serif | Certains systèmes d'exploitation disposent d'une autre version (potentiellement plus ancienne), appelée Times. C'est une bonne pratique d'utiliser les deux tout en favorisant Times New Roman dans l'ordre des priorités. |
| Trebuchet MS | serif | Attention, celle-ci n'est pas fortement répandue sur les systèmes d'exploitation mobiles. |
| Verdana | sans-serif |
Note : Parmi les différentes ressources disponibles sur le sujet, cssfontstack.com maintient une liste des web fonts disponibles sur Windows et Mac OS. Cela peut vous aider à décider les polices à utiliser pour votre site.
Enfin, si vous souhaitez utiliser votre propre police sur votre site web, la meilleur façon reste d'intégrer cette police dans votre site web.
Attention : les polices sont sujettes au droit d'auteur (copyright) et vous devez donc vérifier, avant de les utiliser, que vous pouvez les intégrer sur votre site. Certains sites vous permettent d'en utiliser certaines gratuitement, comme Google Fonts. D'autres, vous permettent d'acheter le droit d'utiliser certaines polices comme, par exemple, fonts.com.
L'intégration d'une police personnalisée se fait en trois étapes :
Voici un exemple d'un telle mise en œuvre.
On utilisera ce fragment de code HTML :
<p> He dressed himself "all in his best," and at last got out into the streets. The people were by this time pouring forth, as he had seen them with the Ghost of Christmas Present; and walking with his hands behind him, Scrooge regarded every one with a delighted smile. He looked so irresistibly pleasant, in a word, that three or four good-humoured fellows said, "Good morning, sir! A merry Christmas to you!" And Scrooge said often afterwards, that of all the blithe sounds he had ever heard, those were the blithest in his ears. </p> <p class="fancy"> He dressed himself "all in his best," and at last got out into the streets. The people were by this time pouring forth, as he had seen them with the Ghost of Christmas Present; and walking with his hands behind him, Scrooge regarded every one with a delighted smile. He looked so irresistibly pleasant, in a word, that three or four good-humoured fellows said, "Good morning, sir! A merry Christmas to you!" And Scrooge said often afterwards, that of all the blithe sounds he had ever heard, those were the blithest in his ears. </p>
Et on appliquera cette feuille de style CSS :
/* Une disposition simple pour voir
les paragraphes côte à côte. */
p {
box-sizing: border-box;
width : 50%;
padding : 1em;
float : left;
}
@font-face {
/* Là on définit le nom pour la police
personnalisé, on l'utilisera dans la
liste */
font-family:"Open Sans";
/* Ici, on liste les fichiers de police,
la syntaxe est détaillée ici :
http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/ */
src:url("https://developer.mozilla.org/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot");
src:url("https://developer.mozilla.org/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot?#iefix") format('embedded-opentype'),
url("https://developer.mozilla.org/static/fonts/OpenSans-Regular-webfont.3f642fa3ea74.woff2") format('woff2'),
url("https://developer.mozilla.org/static/fonts/OpenSans-Regular-webfont.ac327c4db628.woff") format('woff'),
url("https://developer.mozilla.org/static/fonts/OpenSans-Regular-webfont.cd7296352d15.ttf") format('truetype'),
url("https://developer.mozilla.org/static/fonts/OpenSans-Regular-webfont.f641a7d4e80f.svg#OpenSansRegular") format('svg');
/* Ici, on définit la graisse et le style de la police */
font-weight:normal;
font-style:normal;
}
/* Enfin, il suffit simplement d'ajouter la
police personnalisée dans la liste des valeurs
pour font. */
.fancy {
font: 0.85rem/150% "Open Sans", Helvetica, Arial, sans-serif;
}
Le résultat obtenu sera :
{{EmbedLiveSample('Les_polices_personnalisées', '100%', '320')}}
La disposition du teexte concerne les aspects liés aux sauts de ligne et à la position du texte par rapport à la ligne de base ou par rapport à son contenant.
De la même façon qu'avec la mise en forme du texte, la disposition du texte est concernée par quelques propriétés expérimentales, assez peu supportées par certains navigateurs ou dédiées aux langues non latines. Celles-ci permettent de résoudre plusieurs problèmes d'ordre typographique et il est donc intéressant de les connaître (sans que cela doive devenir une source de préoccupation majeure).
Avec tous ces éléments, vous devriez avoir un bon aperçu des outils CSS qui vous permettent de mettre en forme du texte. Nous vous encourageons à tester ces différentes propriétés et à bidouiller avec ces différents concepts pour concrétiser ces notions. Une fois à l'aise avec ces notions, n'hésitez pas à continuer avec un autre sujet : créer de belles boîtes contenant du texte.