Alignement précis du texte

Le problème

Les navigateurs ajoutent automatiquement un espace blanc supplémentaire au-dessus et en dessous des caractères de texte pour s'adapter à la hauteur de ligne et aux métriques spécifiques à la police, telles que les jambages ascendants et descendants. Cet "espace fantôme" empêche d'obtenir un alignement vertical parfait au pixel près à l'aide du CSS standard.

Voici quelques problèmes courants :

• Icônes mal alignées : le texte apparaît visuellement plus bas ou plus haut qu'une icône adjacente, même lorsque vous utilisez align-items: center.
• Marge intérieure inexacte : un bouton avec padding: 12px semble visuellement avoir plus d'espace en haut ou en bas en raison de l'interlignage interne de la police.
• Alignement : vous ne pouvez pas aligner exactement le haut d'une lettre majuscule avec le haut d'un conteneur ou d'une image adjacente sans utiliser de marges négatives "magic number".

La solution

Les propriétés text-box-trim et text-box-edge (raccourci text-box) vous permettent de réduire cet interligne interne en fonction de métriques de police spécifiques. En ajustant la zone de texte à la hauteur de la capitale (haut des lettres majuscules) et à la ligne de base alphabétique (bas de la plupart des lettres), vous pouvez vous assurer que le cadre de délimitation de l'élément correspond à son contenu visuel.

Stratégie d'implémentation

1. OBLIGATOIRE : appliquez text-box-trim: trim-both (ou le raccourci text-box) à l'élément contenant le texte.
2. OBLIGATOIRE : spécifiez les métriques à utiliser pour l'élagage avec text-box-edge. Pour la plupart des alignements d'UI, utilisez cap alphabetic.
3. À FAIRE : utilisez cette option pour obtenir un centrage vertical visuel dans les conteneurs flex ou grid.
4. À FAIRE : utilisez-le pour vous assurer que vos valeurs CSS padding correspondent à l'écart visuel entre le texte et le bord du conteneur.
5. NE L'UTILISEZ PAS sur les corps de texte longs, où l'interligne traditionnel est nécessaire pour la lisibilité. Elle est particulièrement adaptée aux titres, aux boutons et aux libellés d'UI.

Guide d'implémentation

Cas d'utilisation 1 : Supprimer l'interligne interne pour les badges

Les différentes polices ont des espacements intégrés différents au-dessus et en dessous du texte. Cela peut poser des problèmes pour faire correspondre une conception ou pour centrer visuellement le texte dans un badge. Pour que la marge intérieure d'un conteneur épouse exactement le texte, utilisez text-box: trim-both cap alphabetic. Cela est particulièrement utile pour les composants d'interface utilisateur denses tels que les badges ou les tags. Cela permet au remplissage de commencer juste au bord du texte de tous les côtés.

.badge {
  padding: 10px;
  background: hotpink;
  border-radius: 10px;
  /* 
    Trims the top to the cap-height and 
    the bottom to the alphabetic baseline.
  */
  text-box: trim-both cap alphabetic;
}

Cas d'utilisation 2 : centrer le texte avec des icônes

Lorsque vous utilisez Flexbox pour aligner du texte et des icônes, l'"espace fantôme" donne souvent l'impression que le texte est légèrement décentré. En ajustant la zone, vous vous assurez que le moteur de mise en page utilise la hauteur réelle de la lettre visible pour l'alignement.

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
/* 
  text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
  /* 
    The flex container now centers against the 
    visible letters, not the invisible font box.
  */
  text-box: trim-both cap alphabetic;
}

Cas d'utilisation 3 : Aligner le texte sur les bords supérieurs

Pour aligner parfaitement un titre avec le haut d'une image ou d'un élément décoratif adjacent, utilisez trim-start cap alphabetic. Même si la fin ne sera pas coupée, le bord de fin doit être défini.

.hero {
  display: flex;
  align-items: flex-start;
}

h1 {
  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
  text-box: trim-start cap alphabetic;
}

Bonnes pratiques

• À FAIRE : Utilisez la notation abrégée text-box pour plus de concision : text-box: <trim-direction> <edges>.
• À FAIRE : Spécifiez toujours les deux bords, même si un seul bord est coupé (sauf si vous utilisez le bord text par défaut).
• À FAIRE : Combinez avec line-height pour un espacement contrôlé. La suppression de l'interligne supprime l'espace avant la première et la dernière ligne de texte, mais line-height affecte toujours la distance entre les lignes dans un texte multiligne.
• NE PAS appliquer à chaque élément. Utilisez-le uniquement lorsque l'alignement de précision est requis.

Stratégies de remplacement

text-box est une amélioration progressive. Dans les navigateurs qui ne sont pas compatibles, le texte s'affiche simplement avec son interligne par défaut. Votre mise en page restera fonctionnelle, mais sera légèrement moins précise. Aucun code de remplacement spécial n'est requis, car les propriétés sont ignorées de manière sécurisée par les anciens navigateurs.

Autres points à prendre en compte

1. Métriques des polices : les différentes polices ont des métriques internes différentes. cap alphabetic est une valeur par défaut fiable, mais certaines polices ou certains cas d'utilisation peuvent nécessiter ex (hauteur d'œil) pour un meilleur alignement des minuscules.
2. Texte multiligne : l'ajustement s'applique à la première et à la dernière ligne du bloc. Les lignes internes ne sont pas concernées.