Deux propriétés CSS pour la boîte de texte de la coupe blanche espace

Les propriétés

et text-box-trim du text-box-edge CSS permettent aux développeurs de contrôler avec précision la quantité d'espaces vides au-dessus de la première ligne de texte et au-dessous de la dernière ligne de texte dans la zone de texte. Ces blancs rendront la hauteur verticale de la zone de texte supérieure à la hauteur de son contenu.

Ce blanc est appelé menant (espacement des lignes), et il apparaît au-dessus et en dessous de toutes les lignes de texte (en fait deux espaces et demi de ligne) pour améliorer la lisibilité du texte. Mais nous voulons juste qu'il apparaisse entre les lignes de texte, non? Nous ne voulons pas qu'il apparaisse sur les bords supérieur et inférieur de la zone de texte car il affecte nos marges, nos commandes, nos lacunes et nos autres espacés.

Par exemple, si nous implémentons une marge de 50px, mais l'espacement des lignes augmente de 37px, il y aura un total de 87 pix d'espace au total. Ensuite, nous devons ajuster la marge à 13px pour faire l'espace 50px en pratique.

En tant que gars du système de conception, j'essaie de garder autant de cohérence que possible et d'utiliser le moins de marqueurs possible, ce qui me permet d'utiliser le sélecteur de frère adjacent () pour créer une règle commune comme celle-ci:

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

Cette méthode est toujours gênante car vous devez toujours faire les calculs (bien que moins calculaires). Cependant, en utilisant les propriétés text-box-trim et text-box-edge, 50px définis dans CSS signifie visuellement 50px:

Avertissement: text-box-trim et text-box-edge ne sont accessibles que via les drapeaux de fonction de Chrome 128 et Safari 16.4, ainsi que l'aperçu de la technologie Safari sans indicateurs de fonctionnalité. Voir Caniuse pour les dernières informations de support du navigateur.

Commencez par text-box-trim

est une propriété CSS qui active la coupe de la zone de texte. Il n'a aucun autre objectif en soi, mais il nous donne des options pour démarrer, mettre fin, démarrer et fin ou fin: text-box-trim

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

Remarque: Dans les anciens navigateurs Web, vous devrez peut-être utiliser une valeur plus ancienne au lieu d'une nouvelle valeur start/end/both. Dans les anciens navigateurs Web, vous devrez peut-être utiliser trim-start/trim-end/trim-both. Malheureusement, il n'y a pas de référence pour cela, il vous suffit donc de voir ce qui fonctionne. top/bottom/both

Maintenant, où voulez-vous tailler?

Vous voudrez peut-être savoir ce que je veux dire. Considérez qu'une lettre typographique a plusieurs pics.

Il y a une hauteur X, qui marque le haut de la lettre "x" et d'autres caractères minuscules (sans compter l'extension ascendante ou supérieure), la hauteur majuscule, qui marque le haut des caractères majuscules (encore une fois, sans inclure l'extension ascendante ou supérieure), et la ligne de base de la lettre, qui marque le fond de la plupart des lettres (à l'exception de l'extension ascendante ou inférieure). Bien sûr, il y a aussi la hauteur de levage et la hauteur de baisse.

Vous pouvez couper le blanc entre la hauteur X, la hauteur de la capitale ou la hauteur ascendante et le bord "up" de la zone de texte (où commence le gribouillage supérieur), et le blanc entre la lettre de base ou la hauteur de gribouillage inférieure et le bord "inférieur" (si text-underline-position est réglé à under, puis où le sous-ligne commence).

Ne coupez rien

text-box-edge: leading signifie que tout l'espacement des lignes est inclus; C'est la même chose que text-box-trim: none ou omet complètement text-box-trim et text-box-edge. Vous pouvez également utiliser text-box-trim: trim-start pour limiter la coupe des bords inférieurs ou utiliser text-box-trim: trim-end pour limiter la coupe du bord supérieur. Oui, il existe de nombreuses façons de ne pas le faire du tout!

Les navigateurs Web plus récents se sont déviés du projet de travail de spécification CSSWG en supprimant la valeur leading et en le remplaçant par auto malgré l'avertissement "ne publiez pas (pas encore)" (* en haussant les épaules *).

Bien sûr, text-box-edge accepte deux valeurs (instructions sur le bord supérieur, puis des instructions sur le bord inférieur). Cependant, auto doit être utilisé séparément.

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

Je peux expliquer tous les scénarios auto qui fonctionnent, mais aucun d'eux n'est valide. Je pense que tout ce que nous voulons, c'est pouvoir régler le bord supérieur ou inférieur sur auto et régler l'autre bord sur autre chose, mais c'est exactement ce qu'il ne fait pas. C'est une question, mais nous creuserons bientôt plus profondément.

Coupez la partie supérieure de l'ascenseur et / ou la partie inférieure de la partie inférieure

text Si vous êtes utilisé comme première valeur, la partie ci-dessus sera réduite; (Je pense que vous voulez que ce soit auto, mais ce ne sera pas le cas.)

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

Il convient de noter que les mesures de portance et de hauteur inférieure proviennent de la police elle-même (ou non!), Donc text peut être très pointilleux. Par exemple, pour les polices ariales, la hauteur de la montée comprend les diacritiques, la hauteur de la chute comprend la goutte, et pour les polices de fravances, la hauteur de la chute comprend les diacritiques, je ne sais pas quelle est la hauteur de la montée. Donc, il y a une discussion sur le renommage text à from-font.

Trip uniquement au-dessus de la hauteur de capital

pour couper au-dessus de la hauteur de capital:

text-box-edge: auto; /* Works */
text-box-edge: ex auto; /* Doesn't work */
text-box-edge: auto alphabetic; /* Doesn't work */

N'oubliez pas, les valeurs non déclarées par défaut text, pas auto (comme indiqué ci-dessus). Donc, pour choisir de ne pas couper le bord inférieur, vous devez utiliser trim-start au lieu de trim-both:

text-box-edge: ex text; /* Valid */
text-box-edge: ex; /* Computed as `text-box-edge: ex text;` */
text-box-edge: text alphabetic; /* Valid */
text-box-edge: text text; /* Valid */
text-box-edge: text; /* Computed as `text-box-edge: text text;` */

Trimez la hauteur du boîtier supérieur et en dessous de la lettre de base de la lettre

pour couper la hauteur du boîtier supérieur et en dessous de la ligne de base de la lettre:

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

Soit dit en passant, l'option de hauteur de caps et de base du réglage de la garniture verticale de Figma fait exactement cela. Cependant, son mode de développement génère du code CSS avec des noms d'attribut obsolètes (leading-trim et text-edge) et des valeurs obsolètes (top et bottom).

Trip uniquement au-dessus de la hauteur x

pour couper uniquement au-dessus de la hauteur x:

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

Trip x hauteur au-dessus et en dessous de la lettre de base de la lettre

pour couper la hauteur X au-dessus et en dessous de la ligne de base de la lettre:

text-box-edge: auto; /* Works */
text-box-edge: ex auto; /* Doesn't work */
text-box-edge: auto alphabetic; /* Doesn't work */

Trime uniquement sous la ligne de base des lettres

Pour couper uniquement en dessous de la ligne de base de la lettre, le suivant est invalide (les choses se passent si bien, n'est-ce pas?):

text-box-edge: ex text; /* Valid */
text-box-edge: ex; /* Computed as `text-box-edge: ex text;` */
text-box-edge: text alphabetic; /* Valid */
text-box-edge: text text; /* Valid */
text-box-edge: text; /* Computed as `text-box-edge: text text;` */

En effet, la première valeur est toujours une valeur de bord supérieure requise, tandis que la deuxième valeur est une valeur de bord inférieure en option. Cela signifie que alphabetic n'est pas une valeur de bord supérieure valide, même si l'inclusion trim-end signifie que nous n'en fournirons pas. Outre les plaintes verbales, la syntaxe correcte vous permettra de déclarer toute valeur de bord supérieure, même si vous l'annulez réellement avec trim-end:

text-box-edge: cap; /* Computed as text-box-edge: cap text; */

Où est le hiéroglyphe?

Il est difficile de savoir comment ils seront taillés avant les coupes du navigateur Web, mais vous pouvez tout lire dans la spécification. En théorie, vous devez utiliser la valeur ideographic-ink pour la coupe et utiliser la valeur ideographic sans tailler, les deux ne sont actuellement pas pris en charge:

text-box-trim: trim-start; /* Not text-box-trim: trim-both; */
text-box-edge: cap; /* Not computed as text-box-edge: cap text; */

text-box, Abréviation Attribut

Si vous n'aimez pas la verbance de la coupe de la zone de texte, il y a un attribut abréviation text-box qui le rend moins important. Toutes les mêmes règles s'appliquent.

text-box-trim: trim-both;
text-box-edge: cap alphabetic;

la pensée finale

À première vue, text-box-trim et text-box-edge peut ne pas sembler intéressant, mais ils rendent les éléments d'espacement beaucoup plus simples.

Mais la proposition actuelle est-elle la meilleure façon de faire face à la coupe de la zone de texte? Personnellement, je ne pense pas. Je pense que text-box-trim-start et text-box-trim-end aurait plus de sens, text-box-trim est utilisé comme attribut d'abréviation, et text-box-edge n'est pas du tout utilisé, mais je suis prêt à accepter une approche simplifiée et / ou cohérente. Qu'en penses-tu?

Il y a d'autres préoccupations. Par exemple, devrait-il y avoir une option pour inclure des soulignements, des surfaces, des marques de ponctuation suspendues ou des marques diacritiques? Je dirais oui, surtout si vous utilisez text-underline-position: under ou particulièrement épais text-decoration-thickness car ils rendront l'espacement entre les éléments plus petit.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!