Les pages d'accueil marketing associent toujours un type d'affichage surdimensionné à des étiquettes de sourcils serrées, et les concepteurs continuent de lutter contre le remplissage invisible au-dessus des hauteurs des majuscules et en dessous des lignes de base qui provient des métriques de police, et non de vos cadres de mise en page automatique Figma. Dans 2026, text-box-trim et text-box-edge donnent aux auteurs HTML statiques un moyen basé sur des normes d'aligner les zones de ligne sur les bords typographiques afin que les piles de titres, de pilules et de rangées d'icônes s'alignent sans marges négatives fragiles. Cet article explique le découpage en majuscule par rapport au découpage des deux côtés, comment combiner le découpage avec flex et grille pour les lignes d'icônes et de texte, comment bloquer les fonctionnalités avec @supports, comment Safari et WebKit diffèrent de Chromium dans les cas extrêmes et dans la manière dont les examens d'accessibilité doivent traiter les zones de ligne tronquées. Associez ce travail à Équilibre du retour à la ligne CSS et joli pour les titres et Sous-grille CSS sur HTML marketing statique Ainsi, la rupture de ligne et l'alignement des pistes de grille restent cohérents une fois que le découpage supprime l'interligne supplémentaire.
L’aspect économique de la vérification est important : la reproduction de lignes de base de sous-pixels sur de vrais GPU Apple vaut mieux que de deviner à partir de captures d’écran Linux CI. MacHTML listes cloud Mac-mini locations à proximité 16,9 $ par jour, qui est l'ancrage budgétaire que nous utilisons lors de la planification de l'approbation hebdomadaire de Safari ci-dessous.
Métriques de police, zones de ligne et pourquoi le découpage existe
La disposition des lignes CSS enveloppe traditionnellement les glyphes dans un rectangle dont la taille de bloc inclut l'espace ascendant et descendant que le concepteur de caractères a réservé aux lettres hautes et aux virgules profondes, même lorsque votre titre est entièrement en majuscules. Le marketing produit souhaite que le haut d'un H majuscule affleure le recadrage vidéo du héros, mais le navigateur alloue toujours un espace supplémentaire au-dessus de la hauteur des majuscules, car le cadre de délimitation de la police est plus grand que les majuscules elles-mêmes. Les auteurs compensent par line-height: 0.9, négatif margin-top, ou des transformations qui confondent les contours du focus. Les propriétés de découpage exposent un contrat plus propre : vous déclarez quel bord typographique doit définir la limite de la zone de ligne pour les interactions de mise en page, et le moteur supprime le jeu que les métriques ont inséré pour les glyphes non liés.
Les exportations HTML statiques à partir d'Eleventy, Hugo ou de modèles générés manuellement incluent rarement des jetons de conception d'exécution ; tout est livré sous forme de fichiers CSS simples versionnés derrière des URL à long cache. Cela signifie que les règles de découpage doivent se dégrader de manière prévisible lorsqu'un navigateur ne prend pas en charge, et que vous ne pouvez pas compter sur les indicateurs de fonctionnalités JavaScript pour corriger la production. Comprendre la taille comme mise en page un ajustement plutôt qu'une transformation de texte vous évite des problèmes avec les lecteurs d'écran, les pipelines d'impression PDF et les futurs agents utilisateurs qui pourraient affiner les tableaux de métriques.
Une autre motivation réside dans les piles multilingues : les pages de marketing latines intègrent souvent des sous-titres japonais ou des indications de prix. Les caractères idéographiques utilisent des interlignes par défaut différentes des majuscules latines, donc un seul line-height le multiplicateur harmonise rarement les deux. text-box-edge: ideographic vous donne un ancrage cohérent lorsqu'il est associé au découpage, tout en laissant le corps du texte conserver des valeurs par défaut confortables.
text-box-trim : hauteur du majuscule, coupe-les deux et début ou fin uniquement
Le text-box-trim La propriété sélectionne les côtés de la zone de ligne qui se rétrécissent vers le bord typographique choisi. Un titre dont seul le haut doit être aligné avec l'image utilise souvent une garniture côté capuchon, tandis que les étiquettes empilées à l'intérieur des pilules peuvent nécessiter trim-both les mathématiques du remplissage vertical restent donc symétriques. Les garnitures de début ou de fin uniquement sont utiles lorsque l'élément précédent gère déjà un côté, comme une ligne de séparation qui doit épouser la hauteur du capuchon sans supprimer deux fois l'espace en bas.
.hero-kicker {
text-box-trim: cap;
text-box-edge: cap alphabetic;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}Lorsque vous appliquez un découpage à des composants interactifs, n'oubliez pas que les anneaux de mise au point s'étendent en dehors de la zone de bordure : le découpage de la zone de texte ne supprime pas la nécessité d'un remplissage adéquat sur la cible de mise au point elle-même. Gardez au moins 3px de séparation entre la zone de glyphe découpée et le bord extérieur du contour de focus, de sorte que les contrôles d'apparence de focus WCAG 2.2 réussissent toujours selon les paramètres de focus par défaut de macOS.
Le découpage interagit également avec overflow: clip sur les cartes parents : si vous coupez de manière agressive pendant que le parent coupe les descendants, les descendants de la ligne de base sur les scripts mixtes peuvent être coupés de manière inattendue. Testez avec des chaînes vietnamiennes et polonaises même lorsque votre langue principale est l'anglais, car les combinaisons ascendantes et descendantes mettent l'accent différemment sur les tableaux de métriques.
text-box-edge : majuscules, zones alphabétiques, de texte et idéographiques
text-box-edge nomme la boîte de référence utilisée lors du découpage. cap alphabetic est le titre par défaut pour les sites de marketing latins, car il aligne les lettres majuscules sur la hauteur des majuscules tout en ancrant le bas à la ligne de base alphabétique, ce à quoi s'attendent la plupart des polices d'icônes lorsque vous associez des symboles matériels à des étiquettes. Passer à text utilise la em-box et donne un espacement plus conservateur lorsque vous mélangez toutes les majuscules avec la casse de la phrase dans la même colonne.
@supports (text-box-trim: both) {
.price-row {
text-box-trim: both;
text-box-edge: cap alphabetic;
}
}Pour les sous-titres japonais, pensez text-box-edge: ideographic ideographic lorsque les directives de votre marque nécessitent un alignement carré avec les majuscules latines adjacentes ; capturez des captures d'écran avant et après, car certaines polices variables décalent subtilement les bords idéographiques selon les épaisseurs. Les bundles Hangul coréens bénéficient de la même discipline, en particulier lorsque les polices Web se subdivisent de manière agressive et réhydratent différentes hauteurs de glyphes entre normal et gras.
Icône plus alignement du texte sans nombres magiques
Les systèmes de conception expédient généralement l'iconographie sous forme de polices SVG carrées ou d'icônes dont viewBox est égal à 24px mais dont le centre optique diffère de la hauteur latine de la calotte. Au lieu de pousser les icônes avec translateY(-2px), enveloppez l'étiquette dans un espace compatible avec le découpage et alignez la rangée flexible avec align-items: center tout en laissant le découpage égaliser les métriques du texte. La hauteur de ligne suit ensuite la zone de ligne coupée, et non le remplissage ascendant complet de la police.
.nav-pill {
display: inline-flex;
align-items: center;
gap: 10px;
}
.nav-pill .label {
text-box-trim: cap;
text-box-edge: cap alphabetic;
}Lorsque les icônes se trouvent à côté des descriptions multilignes, coupez uniquement le titre sur une seule ligne ; le découpage de blocs multilignes peut produire des sommets de paragraphe inégaux, car chaque ligne est coupée indépendamment. Dans ces cas-là, utilisez le rognage sur la première ligne uniquement via une étendue dédiée et laissez le corps du texte non rogné avec un rognage conventionnel. line-height: 1.6 pour plus de lisibilité.
Modèles HTML de marketing statique et discipline des bundles
Les hôtes statiques encouragent les petits bundles CSS : concaténer les utilitaires, supprimer les couches inutilisées et gzip. Les déclarations de découpage sont petites, mais elles incitent les auteurs à dupliquer les règles de titre par section. Préférez un seul components/typography.css couche qui définit .type-display, .type-eyebrow, et .type-nav cours consommés sur plusieurs pages. Documentez quelles combinaisons de classes doivent être réduites afin que les entrepreneurs ne réintroduisent pas de marges ad hoc.
Versionnez votre CSS avec des noms de fichiers avec empreintes digitales et conservez une entrée du journal des modifications chaque fois que les bords de coupe changent, car les suites de régression visuelle traitent les changements de métriques comme des échecs, même lorsque les spécifications de conception « semblent plus correctes » après la modification. Associez les différences CSS avec une courte note dans votre modèle de demande d'extraction rappelant aux réviseurs de réexécuter les instantanés de pixels Safari à 100% et 125% Mise à l'échelle de l'interface utilisateur.
Amélioration progressive avec @supports
Expédier des solutions de secours en couches : lorsque le découpage n'est pas disponible, conservez la mise en page acceptable avec l'optimisation line-height et explicite padding-block. Testez la solution de secours dans Firefox ESR et les anciens Safari, pas seulement dans Evergreen Chromium.
.hero-kicker {
line-height: 1.05;
padding-top: 2px;
}
@supports (text-box-trim: cap) {
.hero-kicker {
line-height: 1;
padding-top: 0;
text-box-trim: cap;
text-box-edge: cap alphabetic;
}
}Garde-corps : n'imbriquez jamais de garnitures conflictuelles entre un élément flexible parent et un élément en ligne enfant, sauf si vous comprenez comment l'héritage est mappé à travers des boîtes en ligne anonymes. Si le contrôle qualité signale un espace supplémentaire « aléatoire », inspectez les styles calculés pour déceler l'héritage. ::first-line règles qui ont modifié la hauteur de la ligne.
Notes sur le contrôle qualité de Safari et WebKit
WebKit implémente un découpage plus proche des API de texte des autres plates-formes, mais vous devez toujours valider par rapport à Safari Technology Preview lorsque votre fenêtre de publication traverse une mise à niveau macOS. Faites attention aux polices variables où les animations d'axe changent les métriques à mi-transition : le découpage est recalculé après chaque image de style, donc une animation de poids de 400 à 700 peut déplacer les masques vidéo adjacents, sauf si vous désactivez les animations ou gelez les paramètres de variation de police pendant la transition.
Les vérifications matérielles sur Apple Silicon doivent inclure des écrans externes avec différentes densités de pixels ; des facteurs d'échelle non entiers exposent parfois des différences d'arrondi d'un demi-pixel entre les titres tronqués et l'art des héros bitmap. Capturez des instantanés WebKit avec --disable-font-subpixel-positioning uniquement pendant le diagnostic, pas en production, pour voir si le positionnement des sous-pixels a provoqué la dérive.
Accessibilité : TalkBack, VoiceOver et zoom
Le découpage ajuste la géométrie de la boîte, et non le contenu de la chaîne, de sorte que les lecteurs d'écran continuent d'annoncer les mêmes mots. Le risque est visuel : les utilisateurs qui agrandissent la page s'appuient sur un espacement prévisible entre les lignes. Évitez de couper les blocs de corps de texte au-delà des étiquettes occasionnelles d'une seule ligne, et ne coupez jamais en dessous des tailles qui ne respectent pas votre politique de police minimale lisible (de nombreuses équipes traitent 14px comme minimum marketing pour les étiquettes interactives).
Respect prefers-reduced-motion lors du découpage de paires avec des transitions : les modifications métriques pendant les fondus d'opacité peuvent toujours scintiller. Gardez les transitions sous 220 ms pour les micro-interactions afin que les utilisateurs sensibles au système vestibulaire ne soient pas exposés à une dérive lente.
Matrice : quand couper quel élément
| Élément | Garniture recommandée | Raisonnement |
|---|---|---|
| Kicker tout en majuscules au-dessus de H1 | casquette + casquette alphabétique | Supprime l'espace ascendant excédentaire ; s'aligne sur les médias héros. |
| Entier de tarification et glyphe de devise | coupez les deux avec précaution | Maintient les chiffres tabulaires centrés à l’intérieur des pilules. |
| Corps de copie multiligne | aucun | Préserve une conduite confortable pour une longue lecture. |
| Étiquette de ligne d'icône | capuchon | Centre les icônes sur la hauteur du plafond sans hacks de traduction. |
Liste de contrôle de sortie numérotée
- Définissez trois niveaux de titres avec des classes de découpage et documentez les hacks de marge interdits.
- Exécutez Safari sur macOS à une mise à l'échelle de 100 % et 125 % avec les chaînes de paramètres régionaux les plus longues chargées.
- Vérifiez que les contours du focus restent entièrement visibles autour des boutons et des liens découpés.
- Comparez les captures d'écran @supports off et on pour l'acceptation de la solution de secours de Firefox.
- Test de résistance mixte latin et japonais dans une seule colonne pour déterminer la dérive de la ligne de base.
- Réexécutez l'accessibilité de Lighthouse et CLS après avoir ajusté les modifications ; surveillez le changement de mise en page depuis l'échange de polices Web.
- Archivez les différences de pixels dans votre outil d'assurance qualité de conception avec des étiquettes liées à la validation de SHA à des fins d'audit.
- Planifiez une session cloud Mac hebdomadaire afin que les sous-traitants distants partagent le même profil d'affichage.
FAQ
Le découpage remplace-t-il entièrement la hauteur de ligne ?
Non. Le rognage supprime le jeu métrique ; line-height contrôle toujours les multiples lorsque vous le définissez explicitement. La plupart des équipes utilisent line-height: 1 sur les kickers coupés et les valeurs plus grandes sur le corps du texte.
Les moteurs PDF honoreront-ils le découpage ?
Les pipelines d’impression varient. Testez l'exportation de fichiers PDF depuis Safari, impression vers PDF avant que le marketing n'approuve les mentions légales réduites.
Puis-je découper l’intérieur des boutons avec des dégradés ?
Oui, mais vérifier le contraste après le découpage modifie le centre vertical perçu du texte de l'étiquette à l'intérieur des remplissages dégradés.
L'envoi d'un peaufinage typographique sur du HTML statique consiste moins à mémoriser chaque mot-clé périphérique qu'à répéter sur du vrai matériel Safari avec des polices de production et une mise à l'échelle. UN Mac-mini loué à MacHTML pour environ 16,9 $ par jour offre à votre équipe une machine partagée pour les instantanés de pixels, les révisions d'alignement des icônes et les passes de régression hebdomadaires sans occuper un ordinateur portable utilisé pour le développement quotidien.
Rehearse trimmed typography on cloud Mac mini
Open your static marketing bundle on Apple Silicon Safari, capture baseline diffs for text-box-trim, and sign off before you merge typography tokens.