Deux mots de CSS pour des titres qui tombent juste

Il y a un défaut que l’on voit sur presque tous les sites et que presque personne ne nomme : le titre sur deux lignes dont la seconde ne porte qu’un mot. Une ligne pleine, puis « travail » tout seul en dessous. En typographie de presse, cette faute a un nom et un correcteur la reprend. Sur le web, elle est restée vingt ans sans solution, parce que la coupure d’un titre dépend de la largeur de l’écran et qu’on ne peut donc pas la régler à la main.

Deux valeurs de la propriété text-wrap s’en chargent maintenant, et elles ne font pas la même chose.

balance, pour ce qui est court

h1, h2, h3, blockquote {
  text-wrap: balance;
}

Le navigateur essaie de répartir le texte en lignes de longueur voisine, au lieu de remplir la première jusqu’au bord et de laisser tomber le reste. Un titre de six mots sur deux lignes se coupe donc trois et trois, et non cinq et un.

L’important est ce que la déclaration ne fait pas. Équilibrer coûte plusieurs passes de mise en page, et la spécification autorise explicitement le navigateur à renoncer au-delà d’un petit nombre de lignes. En pratique, au-delà de quatre lignes, rien ne se passe. Ce n’est pas une limite gênante, c’est la garantie que la propriété ne peut pas ralentir un long texte : elle vise les titres, les chapeaux, les légendes, les citations, et rien d’autre.

Le support est acquis. Chrome l’a livrée le premier, Safari depuis la version 17.5, Firefox depuis la version 121. La table à jour est sur Can I Use. Un navigateur qui ne connaît pas la valeur coupe le titre comme avant : personne ne voit une page cassée, certains voient une page mieux composée.

pretty, pour ce qui est long

L’autre valeur traite un problème différent : le paragraphe qui se termine par une ligne d’un seul mot, ce que les typographes appellent une ligne orpheline.

p, li {
  text-wrap: pretty;
}

Le navigateur regarde plus loin devant lui avant de décider où couper, et arrange les dernières lignes pour qu’aucune ne reste ridicule. WebKit a détaillé le travail dans un article dédié, qui va plus loin que la seule orpheline : la valeur évite aussi les suites de traits d’union en bout de ligne et les lignes trop lâches.

Le support est plus récent. Chrome l’a livrée en 2023, Safari dans sa version 26. Firefox suit avec un décalage. Le principe est le même que pour balance : ce que le navigateur ne comprend pas, il l’ignore, et le texte reste lisible.

Ce que nous en faisons

balance sur tous les titres, les chapeaux et les citations. pretty sur les paragraphes de texte suivi.

Ces deux lignes remplacent une pratique que nous avons pratiquée comme tout le monde et qu’il faut avoir le courage d’appeler par son nom : l’espace insécable posée à la main entre les deux derniers mots d’un titre pour forcer la coupure. Ça marche, sur une largeur d’écran, celle sur laquelle on regardait en le faisant. Sur toutes les autres, ça déplace le problème d’un mot.

Un défaut de composition que l’on corrigeait à la main sur un écran, et qui se corrige maintenant sur tous. Nous n’écrivons pas ici sur les avancées qui font la une : nous écrivons sur celles qui retirent du travail. Pour voir ces réglages appliqués à des directions typographiques entières, la page style les montre en direct.