Récupérez de l'espace au-dessus et en dessous de votre contenu textuel pour obtenir un équilibre visuel.
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.
Manuscrit :
text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading + 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 , et . 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 de l'espace n'est pas facile à mesurer et était jusqu'à présent impossible à contrôler.
La police le sait, le CSS le sait maintenant !
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". Ce point est abordé de manière experte dans un article de Matthias Ott 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.
Cet historique est pertinent, car text-box nous donne un nom pour chaque moitié : "over" (au-dessus) et "under" (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 composition numérique), dans lequel leading-trim (ancien nom de text-box) a été présenté pour la première fois.
Vous pouvez commencer à couper du texte à l'aide 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.
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;
}
L'utilisation la plus courante de cette fonctionnalité consiste à couper les deux à 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.
Explorateur
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 recadrage et de recadrage excessif, et suivre les visuels et les libellés codés par couleur.
Essayez les solutions suivantes:
- Inspection visuelle du fonctionnement de
text-box-trimpour les variantes de texte à une ou plusieurs lignes. - Pointez sur une variante pour voir les valeurs de taille utilisées pour obtenir cet effet.
- Modifier la police.
- Couper uniquement un côté d'une zone de texte
- Vérifiez la syntaxe au fur et à mesure que vous jouez.
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 appropriée, 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 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 être acceptable sur un écran et un système d'exploitation, 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;
}
Voici quelques éléments 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.
Voici des éléments , souvent utilisés pour afficher des catégories ou des badges. Autre cas où la meilleure solution devrait être une marge égale des deux côtés, mais jusqu'à text-box, nous avons dû contourner ce problème.
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.
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.
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.
- https://codepen.io/collection/zxQBaL : collection Codepen de toutes les démonstrations ci-dessus
- https://github.com/jantimon/text-box-trim-examples : excellents recherches et démonstrations par Jan Nicklas
- https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
- https://drafts.csswg.org/css-inline-3/#text-edges
- À ne pas confondre avec
size-adjustouascent-overridehttps://web.dev/articles/css-size-adjust - https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/
- https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
- appliqué à de nombreux éléments HTML https://codepen.io/nileshprajapati/pen/RweKdmw
- Article de blog sur Safari : https://webkit.org/blog/16301/webkit-features-in-safari-18-2/
- https://piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/