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.

Version longue :

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

Version courte :

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 d'espace chaotique n'est pas facile à mesurer et était impossible à contrôler jusqu'à présent.

La police le sait, et maintenant le CSS aussi.

L'espace au-dessus et en dessous d'une police existe en raison de la façon dont le Web dispose le texte, appelé "demi-interligne". Ce sujet est abordé de manière experte dans un article de Matthias Ott intitulé The Thing With Leading In CSS. Essentiellement, lorsque la composition était effectuée à la main, des morceaux de plomb étaient utilisés pour séparer les lignes de texte. Le Web, inspiré par l'interligne, divise le plomb en deux et distribue un morceau au-dessus et un morceau en dessous du contenu.

Cette histoire est importante, car text-box nous donne des noms pour chaque moitié : over et under. De plus, il est possible de les supprimer.

Il existe également un état antérieur à 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 (le nom que text-box avait auparavant) a été introduit pour la première fois.

Votre point d'entrée dans la suppression de texte peut provenir de Figma et de ses commandes "vertical trim" pour les concepteurs. Ce post X montre où se trouve cette option de suppression verticale et comment elle est utile pour les boutons.

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 commandes les plus courantes 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 suppression des deux éléments sur cap alphabetic sera l'utilisation la plus courante de cette fonctionnalité. 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.

Bac à sable de l'explorateur

Explorez la syntaxe dans notre bac à sable, et consultez les résultats à l'aide de menus déroulants. Vous pouvez modifier les polices, les valeurs de suppression au-dessus et en dessous, et suivre les visuels et les libellés codés par couleur.

À essayer :

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

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

Cette fonctionnalité de suppression permet de trouver des solutions de centrage et d'alignement beaucoup plus simples. Vous pouvez même vous rapprocher d'un interligne approprié, où un élément tel que gap peut être utilisé entre les contenus.

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 sur tous les côtés. Toutefois, le résultat peut dérouter les utilisateurs, car il comporte souvent un espace supplémentaire 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 du 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 centrés optiquement. Cela peut être correct 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;
}

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

Voici des éléments <span>, souvent utilisés pour afficher des catégories ou des badges. Un autre cas où une marge intérieure égale sur tous les côtés devrait être la meilleure solution, mais jusqu'à text-box, nous avons dû la contourner.

Alignement plus facile

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

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

Notez que l'espace blanc 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 du writing-mode. Essayez de modifier le texte et voyez comment la mise en page reste alignée.

Poursuivre l'étude

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

• Collection Codepen de toutes les démonstrations.
• Excellentes recherches et démonstrations de Jan Nicklas.
• Deux propriétés CSS pour supprimer l'espace blanc des zones de texte sur CSS Tricks.
• Mise en page CSS en ligne sur les bords du texte.
• À ne pas être confondu avec size-adjust ou ascent-override
• Ligne de base CSS : le bon, le mauvais et le laid.
• Appliqué à de nombreux éléments HTML : CodePen.
• Article de blog de Safari.
• Pourquoi je suis enthousiaste à propos de text-box-trim en tant que concepteur.