Mettre en forme du texte

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.

La mise en forme simple

Les polices de texte peuvent être modifiées et adaptées grâce à ces propriétés CSS :

• color : modifie la couleur de la police.
• font-family : modifie la police utilisée.
• font-size : modifie la taille de la fonte.
• font-style : permet de passer d'une police italique à une police normale.
• font-weight : permet de gérer la graisse d'une police.
• font-variant : permet de choisir des variantes de police.
• letter-spacing : permet d'ajuster l'interlettrage, quelles que soient les options de crénage (kerning) de la police originale.
• text-decoration : permet d'afficher une ligne décorative, au-dessus, en-dessous ou au milieu du texte.
• text-shadow : permet de définir une ou plusieurs ombres portées depuis le texte.
• text-transform : permet de choisir la capitalisation du texte.

CSS fournit également des unités dédiées aux polices et des outils pour le texte sélectionné :

• em : la taille calculée pour la police de l'élément, relative par rapport à la taille de la police de l'élément parent.
• rem : analogue à em mais toujours relative à la taille de la police pour l'élément racine.
• ::first-letter : permet de sélectionner la première lettre d'un élément de bloc.
• ::first-line : permet de sélectionner la première ligne d'un élément de bloc.
• ::selection : correspond au texte actuellement sélectionné par l'utilisateur.

Les propriétés les plus fréquemment utilisées peuvent être manipulées grâce à la propriété raccourcie font. Celle-ci se décompose (dans l'ordre) en : font-style, font-variant, font-weight, font-stretch, font-size, line-height, et 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 :

Paramètres avancées des polices d'écriture

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

• font-kerning : active ou désactive les options de crénage.
• font-feature-settings : active ou désactive les différentes fonctionnalités des polices OpenType.
• font-variant-alternates : permet de contrôler l'utilisation de glyphes alternatifs pour une fonte donnée.
• font-variant-caps : permet de contrôler l'utilisation de glyphes capitaux alternatifs.
• font-variant-east-asian : permet de contrôler l'utilisation de glyphes alternatifs pour les scripts d'Asie orientale comme le japonais ou le chinois.
• font-variant-ligatures : permet de contrôler les ligatures et formes contextuelles qui sont utilisées dans le texte.
• font-variant-numeric : permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, les fractions et les marqueurs ordinaux.
• font-variant-position : permet de contrôler l'utilisation de glyphes alternatifs de moindre taille pour les textes positionnés en indice ou en exposant par rapport à la ligne de base.
• font-size-adjust : permet d'ajuster la taille visuelle de la fonte sans modifier la taille intrinsèque de la fonte.
• font-stretch : permet de choisir des formes alternatives, plus ou moins étirées, d'une police donnée.
• text-decoration-color : définit la couleur utilisée lorsqu'une ligne est dessinée sur, sous ou à travers le texte.
• text-decoration-line : définit le type de ligne décorative qui peut être ajoutée à un élément.
• text-decoration-style : définit le style des lignes dessinées sur le texte.
• text-underline-position : définit la position du soulignement mis en place lorsque la propriété text-decoration-line vaut underline.
• text-rendering : essaie d'optimiser le rendu du texte.

Appliquer des fontes

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é 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;
}

Les polices par défaut

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.

Les polices adaptées au Web

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

Les polices personnalisées

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.

L'intégration d'une police personnalisée se fait en trois étapes :

1. Assurez-vous que la police soit disponible sur votre serveur web. Pour assurer une meilleure rétro-compatibilité, la police doit idéalement être disponible sous quatre format :
   • WOFF et WOFF2, supportés par les navigateurs modernes (WOFF2 remplacera WOFF)
   • EOT, supporté par Internet Explorer avant sa version 9
   • SVG, supporté par l'ancienne version de Safari pour iOS (il est peu probable que celle-ci soit encore utilisée)
   • OTF, supporté par les anciennes versions des navigateurs par défaut Android.
2. Utilisez la déclaration @font-face en utilisant les adresses des fichiers et les autres caractéristiques (comme le nom)
3. Utilisez le nom déclaré pour la police personnalisée dans la liste des valeurs fournies à la propriété font-family.

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 :
     https://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/ */
  src:url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot");
  src:url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot?#iefix") format('embedded-opentype'),
      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.3f642fa3ea74.woff2") format('woff2'),
      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.ac327c4db628.woff") format('woff'),
      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.cd7296352d15.ttf") format('truetype'),
      url("https://developer.cdn.mozilla.net/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 :

La disposition du texte

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.

• line-height : définit la hauteur d'une ligne de texte, quelle que soit la taille actuelle de la police utilisée.
• text-align : décrit la façon dont le texte est aligné par rapport à son bloc.
• text-indent : définit l'espace qu'on ajoute à gauche du texte avant de commencer la première ligne du texte.
• text-overflow : définit la façon dont le contenu qui « déborde » est affiché (ou non).
• white-space : définit la façon dont les blancs et les sauts de ligne sont gérés au sein de l'élément.
• word-break : définit si on ajoute ou non des césures au sein des mots pour passer à la ligne.
• word-spacing : ajuste la distance entre les mots (inter mot).

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

• direction : définit la direction du texte (cela dépend de la langue utilisée et généralement, on laissera cette tâche à HTML car cet aspect est fortement lié au contenu même).
• hyphens : active ou désactive l'ajout de trait d'union pour former les césures en fin de ligne.
• line-break : active ou désactive les sauts de lignes pour les langues asiatiques.
• text-align-last : définit la façon dont la dernière ligne d'un bloc (ou une ligne avant un saut à la ligne explicite) est alignée.
• text-orientation : définit l'orientation du texte sur une ligne.
• word-wrap : définit si le navigateur ajoute ou non des retours à la ligne automatiques pour éviter un débordement du texte.
• writing-mode : définit si les lignes du texte sont disposées horizontalement ou verticalement et la direction selon laquelle le bloc s'étend.

La suite

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.