Lignes de texte de largeur égale

Fonctionnalités Web : text-fit text-wrap: balance text-box

Les blocs de texte de style affiche, où chaque ligne est mise à l'échelle pour couvrir toute la largeur du conteneur, peuvent créer des titres visuellement saisissants. Avec text-fit, le navigateur redimensionne chaque ligne lors de la mise en page, de sorte qu'elle reste correcte lors du redimensionnement, des modifications de texte et du chargement des polices.

Pour une seule ligne remplissant son conteneur (par exemple, un titre ou une citation), appliquez text-fit directement à cet élément. Ce guide traite des blocs multilignes.

Implémentation de base

Pour les lignes forcées :

  • Encapsulez chaque ligne dans un <span> avec display: block.
  • Appliquez white-space: nowrap à chaque ligne forcée <span>.

Consignes d'implémentation :

  • Utilisez text-fit: grow per-line-all <percentage> sur le titre lui-même.
  • Utilisez per-line-all, pas per-line. per-line ignore la dernière ligne et toute ligne se terminant par un saut forcé. Par conséquent, avec un bloc par ligne, il ne met rien à l'échelle.
  • grow ne peut pas être combiné avec shrink. Définissez le font-size de base sur un maximum ou un minimum, selon ce qui constitue la meilleure solution de remplacement ou ce qui est le plus facile à calculer, puis définissez text-fit sur shrink ou grow en conséquence. Si vous n'avez pas de raison d'utiliser shrink, privilégiez grow et définissez font-size sur une valeur minimale, car cela est plus sûr dans la plupart des cas.
  • Limitez toujours la croissance ou la réduction en utilisant le pourcentage (par exemple, 300%) comme garde-fou.
  • Le conteneur doit avoir une taille inline définie. text-fit ne modifie jamais la taille intrinsèque. Il n'a donc aucun effet sur les largeurs fit-content/max-content ni sur les éléments Flex/Grid dimensionnés en fonction du contenu.
  • Réduisez l'interligne au-dessus de la première ligne et en dessous de la dernière ligne : consultez Alignement précis du texte.
  • Définissez une valeur faible pour line-height (1 ou moins), sinon les espaces entre les lignes de différentes tailles de police deviennent trop importants.
  • IMPORTANT : Notez que la valeur font-size calculée n'est pas modifiée. Par conséquent, l'espacement em n'est pas mis à l'échelle.
  • Pour éviter les orphelins accidentels trop accentués, appliquez text-wrap: balance ou text-wrap: pretty s'il y a des lignes libres.

Espacement

Si toutes les lignes sont forcées, vous pouvez mieux contrôler l'espacement :

  • Appliquez text-box: trim-both cap alphabetic à chaque bloc de ligne pour que sa zone épouse ses propres glyphes. Il effectue l'ajustement à l'aide des métriques mises à l'échelle. Pour en savoir plus, consultez Alignement précis du texte.
  • Espacez les lignes à l'aide de Flexbox ou de Grid + gap sur l'en-tête, et non de line-height. Les espaces sont alors uniformes au lieu d'augmenter avec la taille de police de chaque ligne.

Si certaines lignes sont vides, n'utilisez pas text-box : cela ne supprime que la première et la dernière ligne. Les lignes extérieures épousent donc les glyphes, tandis que les espaces intérieurs conservent leur interligne. Laissez line-height régir tous les espacements.

Interface

  • Les blocs de texte sont plus esthétiques lorsque la taille de la police varie considérablement d'une ligne à l'autre. Évitez de créer des lockups à partir de textes dont les lignes sont de longueur uniforme, car cela donnerait des tailles de police qui ne sont ni identiques, ni suffisamment différentes, ce qui va à l'encontre du principe de conception du contraste. Pour ce faire, forcez les lignes courtes : placez les mots à mettre en avant dans un bloc et laissez le reste s'ajuster, c'est-à-dire un bloc mixte. Cela est particulièrement important lorsque vous l'associez à text-wrap: balance.
  • Il est préférable de combiner cette option avec text-transform: uppercase lorsqu'elle est utilisée avec des scripts occidentaux, car les ascendeurs et les descendeurs ont tendance à créer un espace piégé et/ou à chevaucher les lignes adjacentes, ce qui donne un résultat moins esthétique.
  • Lorsque vous forcez des lignes courtes, choisissez des mots qui, s'ils sont mis en valeur, améliorent le message.
  • Limitation : l'augmentation de la taille du texte augmente également son poids visuel, et ses traits sont perçus comme plus épais. Il n'existe actuellement aucun moyen de compenser cela, par exemple en réduisant font-weight pour un texte plus grand, car il n'y a pas d'unité à utiliser dans un calcul, car la mise à l'échelle n'affecte pas les unités relatives à la police comme em.

Stratégies de remplacement

Pour text-box

text-box n'a pas besoin d'une création de remplacement distincte : conservez également le petit line-height sur les lockups fixes. Il s'agit d'une opération sans effet sous text-box, qui maintient les espaces étroits là où elle n'est pas prise en charge, au détriment des espaces qui s'adaptent à la taille de police de chaque ligne.

Pour text-wrap: balance

Pour text-fit

Les lignes forcées ont une solution de remplacement courte et fidèle : mesurez chaque ligne à sa taille de base et mettez-la à l'échelle en fonction du ratio par rapport au conteneur, avec la même limite.

@supports not (text-fit: grow) {
  .lockup > span {
    /* Shrink-wrap each line so its width is the text width */
    width: fit-content;
    /* --text-fit-scale is measured by the script; the cap mirrors the text-fit percentage */
    font-size: min(var(--text-fit-scale, 1) * 1em, 300%);
  }
}

if (!CSS.supports('text-fit', 'grow per-line-all')) {
  const fit = lockup => {
    const lines = [...lockup.querySelectorAll(':scope > span')];
    // Unscale first: on a refit, offsetWidth would otherwise include the previous scale
    for (const line of lines) line.style.removeProperty('--text-fit-scale');
    // MANDATORY: all reads, then all writes. Interleaving them (e.g. reading
    // lockup.clientWidth inside the write loop) forces one reflow per line.
    const scales = lines.map(line => lockup.clientWidth / line.offsetWidth);
    lines.forEach((line, i) => line.style.setProperty('--text-fit-scale', scales[i]));
  };
  // Refit on resize and font load
  for (const lockup of document.querySelectorAll('.lockup')) {
    new ResizeObserver(() => fit(lockup)).observe(lockup);
  }
}

Les lignes libres n'ont pas de solution de remplacement fidèle (les sauts de ligne sont inconnus jusqu'à la mise en page) : amélioration progressive vers un titre équilibré avec une taille de base fluide telle que clamp(2rem, 1rem + 5cqi, 5rem). Dans un logo mixte, le script ci-dessus s'adapte toujours aux lignes forcées. Un bloc d'habillage mesure la largeur du conteneur, de sorte qu'il conserve l'échelle 1 et n'obtient que la taille de base fluide.

Si l'ajustement du texte est essentiel, envisagez d'utiliser une bibliothèque JS (par exemple, fitty), chargée de manière conditionnelle uniquement si text-fit n'est pas compatible.