CSS text-box-trim

Adam Argyle

Publié le 14 janvier 2025

À partir de Chrome 133, text-box permet aux développeurs et aux concepteurs de personnaliser l'espace au-dessus et en dessous du texte.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

Source

Longhand :

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading + alphabetic | text;

Shorthand :

text-box: trim-both cap alphabetic;

Cette propriété vous permet de contrôler l'espace au-dessus et en dessous du texte, par exemple <h1>, <button> et <p>. Chaque police produit une quantité différente de cet espace directionnel de bloc, qui contribue à la taille de l'élément. Cette contribution chaotique de l'espace n'est pas facile à mesurer et était impossible à contrôler jusqu'à présent.

La police le sait, et le CSS le sait aussi.

Essayer sur CodePen

L'espace au-dessus et en dessous d'une police existe en raison de la façon dont le Web met en page le texte, ce qu'on appelle la "demi-interligne". Ce sujet est abordé en détail dans l'article The Thing With Leading In CSS de Matthias Ott. Essentiellement, lorsque la composition typographique était effectuée à la main, des morceaux de plomb étaient utilisés pour séparer les lignes de texte. Sur le Web, inspiré par la première ligne, le split divise la première ligne en deux parties et distribue une partie au-dessus et une partie en dessous du contenu.

Un titre est affiché avec une barre rose vif au-dessus et en dessous du texte pour illustrer l'interligne. Source

Cet historique est utile, car text-box nous donne les noms de chaque moitié : "au-dessus" et "en dessous". et de le supprimer.

Il existe également un antécédent pour text-box. Vous vous souvenez peut-être de l'article passionnant d'Ethan Wang intitulé Leading-Trim: The Future Of Digital Typesetting, dans lequel leading-trim (l'ancien nom de text-box) a été présenté pour la première fois.

Un titre avec un espace excessif au-dessus et en dessous semble être coupé aux ciseaux et supprimé.

Votre point d'entrée dans l'écrêtement du texte peut être Figma et ses commandes "vertical trim" pour les concepteurs. Ce post X montre où se trouve cette option de marge verticale et comment elle peut être utile pour les boutons.

Source

Quelle que soit la façon dont vous êtes arrivé ici, cette petite commande de typographie peut faire une grande différence.

Fonctionnalité et syntaxe

Voici, selon moi, les deux one-liners les plus courants dont vous aurez besoin lorsque vous travaillerez avec text-box :

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

La plupart du temps, vous utiliserez cette fonctionnalité pour définir les deux valeurs sur cap alphabetic. Les démonstrations suivantes l'utilisent à plusieurs reprises. Toutefois, l'exemple précédent montre également ex alphabetic, car il est utile pour l'équilibre optique à sa manière.

Bac à sable de l'explorateur

Explorez la syntaxe dans notre bac à sable et consultez les résultats à l'aide des menus déroulants. Vous pouvez modifier les polices, les valeurs de marge supérieure et inférieure, et suivre les visuels et les libellés codés par couleur.

Aperçu de la syntaxe avec zone de texte : syntaxe alphabétique de la limite des deux côtés mise en évidence et affichée. Trois autres menus déroulants vous permettent de choisir les valeurs de coupe.

À essayer :

  1. Inspecter visuellement le fonctionnement de text-box-trim dans les variantes de texte sur une seule ligne et sur plusieurs lignes.
  2. Pointez sur une variante pour voir les valeurs de marge utilisées pour obtenir cet effet.
  3. Modifier la police
  4. Rognage d'un seul côté d'une zone de texte.
  5. Vérifiez la syntaxe pendant que vous jouez.
Essayer sur CodePen

Que puis-je créer et quels problèmes cela résout-il ?

Cette fonctionnalité de découpage permet de trouver des solutions beaucoup plus simples pour centrer et aligner les éléments. Vous pouvez même vous rapprocher d'un interligne correct, où quelque chose comme gap peut être utilisé entre les contenus.

Comparaison entre deux groupes de contenus.
Le premier groupe a une demi-interligne, le second a une interligne réduite. Le résultat est que le deuxième groupe est plus resserré. Essayer sur CodePen

Centrage plus facile

Pour les composants plus petits, plus intégrés et intrinsèques au contenu, padding: 10px est un style raisonnable à spécifier pour un élément afin d'obtenir un espacement égal de tous les côtés. Toutefois, le résultat peut dérouter les utilisateurs, car il comporte souvent des espaces supplémentaires en haut et en bas.

Pour contourner ce problème, les développeurs ajoutent souvent explicitement moins de marge intérieure en haut et en bas (bloc) pour compenser les effets de la demi-interligne.

button {
  padding-block: 5px;
  padding-inline: 10px;
}

À ce stade, il ne nous reste plus qu'à essayer des combinaisons de valeurs jusqu'à ce que les éléments soient optiquement centrés. Il peut s'afficher correctement sur un écran et un système d'exploitation, mais pas sur un autre.

text-box nous permet de supprimer l'espace de demi-interligne du texte, ce qui rend utiles les valeurs de marge intérieure égales telles que 10px :

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
Deux exemples sont présentés.
Le premier montre un élément avec une marge intérieure de 10 px et une demi-interligne. La deuxième montre le même élément avec text-box: trim-both cap alphabetic. Le résultat est que le deuxième bouton est centré optiquement. Essayer sur CodePen

Voici quelques éléments <button> qui montrent comment la suppression des espaces avec text-box permet à padding: 10px d'apparaître de manière égale sur tous les côtés dans un élément interactif pratique. Notez que la police alternative peut produire un interligne très différent.

Trois groupes de boutons. La première utilise une police sans serif standard, la deuxième une police fantaisie ou amusante, et la troisième le même effet avec une police manuscrite.
Chaque police a un espace de demi-interligne différent, mais les valeurs de marge sont les mêmes et peuvent normaliser l'espace. Essayer sur CodePen

Voici des éléments <span>, souvent utilisés pour afficher des catégories ou des badges. Il s'agit d'un autre cas où une marge intérieure de même taille de chaque côté devrait être la meilleure solution, mais nous avons dû trouver une autre solution jusqu'à text-box.

Les balises sont affichées côte à côte pour être comparées. Le premier groupe a une demi-interligne, le second a une interligne réduite.
Le deuxième groupe de tags est plus compact et optiquement centré, grâce à l'interligne réduit.

Alignement plus facile

L'espace insécable supplémentaire et incontrôlable au-dessus (over) et en dessous (under) d'une zone de texte rend également l'alignement difficile. Les exemples suivants montrent quand l'interligne fractionné peut rendre l'alignement difficile et comment le fait de rogner les côtés du bloc d'une zone de texte peut créer de meilleurs alignements.

Ici, une image est placée à côté d'un texte. L'image s'agrandit jusqu'à la hauteur nécessaire pour le texte. Sans text-box, l'image est toujours un peu plus haute. Avec text-box, l'image peut s'aligner parfaitement sur le contenu textuel.

Essayer sur CodePen

Notez que l'espace vide se trouve au-dessus de la première ligne de texte mise en forme et en dessous de la dernière ligne de texte mise en forme dans les scénarios avec retour à la ligne.

Dans l'exemple suivant, notez comment la fonctionnalité s'adapte logiquement à une modification de writing-mode. Essayez de modifier le texte et voyez comment la mise en page reste alignée.

Essayer sur CodePen

Continuer à étudier

Vous souhaitez en savoir plus ? La liste de liens suivante propose différentes quantités d'informations supplémentaires et de cas d'utilisation.