CSS text-box-trim

Récupérez l'espace au-dessus et en dessous de votre contenu textuel pour obtenir un équilibre visuel.

Adam Argyle

Publié le 14 janvier 2025

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

Browser Support

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

Manuscrit :

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

Abréviation :

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, ce qui contribue à la taille de l'élément. Cette contribution chaotique à l'espace n'est pas facile à mesurer et était jusqu'à présent impossible à contrôler.

La police le sait, le CSS le sait aussi !

https://codepen.io/web-dot-dev/pen/xbKjRxL

L'espace au-dessus et en dessous d'une police est dû à la mise en page du texte sur le Web, appelée "demi-interligne". Matthias Ott a abordé ce sujet de manière experte dans un article intitulé The Thing With Leading In CSS. Lorsque la composition était effectuée à la main, des morceaux de plomb métallique étaient utilisés pour séparer les lignes de texte. Le Web, inspiré de la ligne de base, divise cette partie en deux et répartit 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 indiquer une demi-interligne.
Source

Cette histoire est pertinente, car text-box nous donne un nom pour chaque moitié : "au-dessus" et "en-dessous". et la possibilité de le couper.

text-box est également l'objet d'un précédent art, dont vous vous souvenez peut-être : l'article passionnant d'Ethan Wang intitulé Leading-Trim: The Future Of Digital Typesetting (Avant-garde : l'avenir de la mise en page numérique), dans lequel leading-trim (ancien nom de text-box) a été présenté pour la première fois.

Un titre est affiché avec un espace excessif au-dessus et en dessous, qui semble avoir été coupé avec des ciseaux et supprimé.

Vous pouvez commencer à couper du texte à partir de Figma et de ses commandes de "coupe verticale" pour les concepteurs. Cet article X explique où se trouve cette option de recadrage vertical et comment elle est utile pour les boutons.

Source

Quelle que soit la façon dont vous êtes arrivé ici, ce petit contrôle de la typographie peut faire toute la différence.

Présentation des fonctionnalités et de la syntaxe

Voici, à mon avis, les deux commandes les plus courantes que vous devrez utiliser 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 valeur la plus courante pour cette fonctionnalité est cap alphabetic. Les démonstrations suivantes l'utilisent plusieurs fois. Toutefois, l'exemple précédent montre également ex alphabetic, car il est utile pour l'équilibre optique à sa manière.

Playground Explorer

La démonstration suivante vous permet d'explorer la syntaxe et d'afficher les résultats à l'aide de menus déroulants. Vous pouvez modifier les polices, les valeurs de dépassement et de sous-dépassement, et suivre les visuels et les libellés codés par couleur.

Capture d&#39;écran de la démonstration de l&#39;explorateur de syntaxe. Affiche la police et un menu déroulant permettant de choisir une autre police. Aperçu de la syntaxe avec la syntaxe alphabétique text-box: trim-both cap mise en surbrillance et affichée. Enfin, trois autres menus déroulants vous permettent de choisir des valeurs de recadrage.

À essayer:

  1. Inspection visuelle du fonctionnement de text-box-trim dans les variantes de texte à une ou plusieurs lignes.
  2. Pointez sur une variante pour afficher les valeurs de recadrage utilisées pour obtenir cet effet.
  3. Modifier la police
  4. Couper uniquement un côté d'une zone de texte
  5. Vérifiez la syntaxe au fur et à mesure.
https://codepen.io/web-dot-dev/pen/RNbyooE

Que puis-je créer avec elle ou quels problèmes peut-elle résoudre ?

Cette fonctionnalité de recadrage permet de trouver des solutions de centrage et d'alignement beaucoup plus simples. Vous pouvez même vous rapprocher d'une mise en page correcte, en utilisant un élément tel que gap entre les contenus.

Une comparaison est affichée entre deux groupes de contenus. Le premier groupe utilise une demi-espace, le second une espace réduite. Le résultat est que le deuxième groupe est plus compact.
https://codepen.io/web-dot-dev/pen/RNbyoKE

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. Cependant, le résultat peut prêter à confusion, car il comporte souvent un espace supplémentaire en haut et en bas.

Pour contourner ce problème, les développeurs réduisent souvent explicitement la 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, nous devons essayer des combinaisons de valeurs jusqu'à ce que les éléments soient centrés optiquement. Cela peut sembler bien sur un écran et un système d'exploitation donnés, mais pas sur un autre.

text-box permet de supprimer la demi-espace avant du texte, ce qui rend les valeurs de marge égales telles que 10px utiles:

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 pixels et une demi-interligne. Le second montre le même élément avec text-box: trim-both cap alphabetic. Le deuxième bouton est donc centré optiquement.
https://codepen.io/web-dot-dev/pen/NPKMbgq

Voici quelques éléments <button> qui montrent comment le rognage de l'espace avec text-box permet de donner à padding: 10px une apparence égale de tous les côtés dans un élément interactif pratique. Notez que la police de remplacement peut produire des espaces de demi-interligne très différents.

Trois groupes de boutons s&#39;affichent. Le premier groupe affiche une police sans serif standard. Le deuxième groupe affiche une police fantaisiste ou amusante. Le troisième groupe présente le même effet, mais avec une police manuscrite. L&#39;objectif est de montrer que chaque police a un espace de demi-interligne différent, mais que les valeurs de taille de police sont les mêmes et peuvent normaliser l&#39;espace.
https://codepen.io/web-dot-dev/pen/mybLOMg

Voici des éléments <span>, souvent utilisés pour afficher des catégories ou des badges. Autre cas où la meilleure solution consiste à utiliser une marge égale des deux côtés, mais jusqu'à text-box, nous avons dû contourner ce problème.

Les balises sont affichées côte à côte. Le premier groupe utilise une demi-espace, le second une espace réduite. Le deuxième groupe est donc plus serré et centré optiquement.
https://codepen.io/web-dot-dev/pen/mybLOMg

Alignement plus facile

L'espace supplémentaire, incontrôlable, de demi-interligne au-dessus (over) et en dessous (under) d'une zone de texte rend également l'alignement difficile. Les exemples suivants montrent quand la demi-interligne peut rendre l'alignement difficile et comment couper les côtés du bloc d'une zone de texte peut améliorer l'alignement.

Ici, une image est placée à côté du texte. L'image s'agrandit jusqu'à la hauteur dont le texte a besoin, mais sans text-box, l'image est toujours un peu plus haute. Avec text-box, l'image peut s'aligner parfaitement sur le contenu textuel.

https://codepen.io/web-dot-dev/pen/yyBjVpg

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 observez comment la mise en page reste alignée.

https://codepen.io/web-dot-dev/pen/dPbeOJQ

Poursuivre l'étude

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