Präzise Textausrichtung

Das Problem

Browser fügen automatisch zusätzlichen Leerraum über und unter Textzeichen ein, um Zeilenhöhe und schriftartspezifische Messwerte wie Ober- und Unterlängen zu berücksichtigen. Dieser „Geisterbereich“ macht es unmöglich, mit Standard-CSS eine pixelgenaue vertikale Ausrichtung zu erreichen.

Häufige Probleme:

• Nicht ausgerichtete Symbole: Text wird visuell tiefer oder höher als ein benachbartes Symbol angezeigt, auch wenn align-items: center verwendet wird.
• Ungenaue Abstände: Eine Schaltfläche mit padding: 12px scheint aufgrund des internen Zeilenabstands der Schriftart oben oder unten mehr Platz zu haben.
• Bündige Ausrichtung: Sie können die Oberkante eines Großbuchstabens nicht genau an der Oberkante eines Containers oder eines angrenzenden Bildes ausrichten, ohne negative Ränder mit „magischen Zahlen“ zu verwenden.

Die Lösung

Mit den Attributen text-box-trim und text-box-edge (Kurzschreibweise text-box) können Sie diesen internen Zeilenabstand basierend auf bestimmten Schriftartmesswerten kürzen. Wenn Sie das Textfeld auf die Versalhöhe (Oberkante der Großbuchstaben) und die alphabetische Grundlinie (Unterkante der meisten Buchstaben) zuschneiden, entspricht der Begrenzungsrahmen des Elements dem visuellen Inhalt.

Implementierungsstrategie

1. ERFORDERLICH: Wende text-box-trim: trim-both (oder die Kurzschreibweise text-box) auf das Element an, das den Text enthält.
2. ERFORDERLICH: Geben Sie mit text-box-edge an, welche Messwerte für das Trimming verwendet werden sollen. Verwenden Sie für die meisten UI-Ausrichtungen cap alphabetic.
3. Verwenden Sie diese Option, um eine visuelle vertikale Zentrierung in Flex- oder Grid-Containern zu erreichen.
4. DO use it to ensure that your CSS padding values match the visual gap between the text and the container edge.
5. Verwenden Sie es NICHT für längere Fließtexte, bei denen ein herkömmlicher Zeilenabstand für die Lesbarkeit erforderlich ist. Sie eignet sich am besten für Überschriften, Schaltflächen und UI-Labels.

Implementierungsleitfaden

Anwendungsfall 1: Internen Zeilenabstand für Badges kürzen

Unterschiedliche Schriftarten haben unterschiedliche Abstände über und unter dem Text. Das kann es schwierig machen, ein Design umzusetzen oder Text in einem Badge visuell zu zentrieren. Wenn das Padding eines Containers genau am Text anliegen soll, verwenden Sie text-box: trim-both cap alphabetic. Das ist besonders nützlich für dichte UI-Komponenten wie Badges oder Tags. So beginnt der Abstand auf allen Seiten direkt am Textrand.

.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;
}

Anwendungsfall 2: Text mit Symbolen zentrieren

Wenn Sie Flexbox verwenden, um Text und Symbole auszurichten, sieht der Text aufgrund des „Ghost Space“ oft etwas dezentriert aus. Durch das Kürzen des Felds wird sichergestellt, dass die Layout-Engine die tatsächlich sichtbare Buchstabenhöhe für die Ausrichtung verwendet.

.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;
}

Anwendungsfall 3: Text bündig an den oberen Kanten ausrichten

Wenn Sie eine Überschrift perfekt am oberen Rand eines angrenzenden Bildes oder dekorativen Elements ausrichten möchten, verwenden Sie trim-start cap alphabetic. Auch wenn das Ende nicht gekürzt wird, muss die Endmarkierung definiert werden.

.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;
}

Best Practices

• VERWENDE die Kurzform text-box, um dich kurz zu fassen: text-box: <trim-direction> <edges>.
• Geben Sie IMMER beide Kanten an, auch wenn nur eine Kante gekürzt wird (es sei denn, Sie verwenden die Standardkante text).
• DO combine with line-height for controlled spacing. Beim Kürzen wird der Zeilenabstand vor der ersten und letzten Textzeile entfernt. line-height wirkt sich jedoch weiterhin auf den Abstand zwischen den Zeilen in mehrzeiligem Text aus.
• Wenden Sie sie NICHT auf jedes Element an. Verwenden Sie sie nur, wenn eine präzise Ausrichtung erforderlich ist.

Fallback-Strategien

text-box ist eine progressive Verbesserung. In Browsern, die diese Funktion nicht unterstützen, wird der Text einfach mit dem Standardzeilenabstand gerendert. Das Layout funktioniert weiterhin, ist aber etwas weniger präzise. Es ist kein spezieller Fallback-Code erforderlich, da die Properties von älteren Browsern ignoriert werden.

Weitere Überlegungen

1. Schriftmetriken: Verschiedene Schriftarten haben unterschiedliche interne Metriken. cap alphabetic ist eine zuverlässige Standardeinstellung, aber für einige Schriftarten oder Anwendungsfälle ist möglicherweise ex (x-Höhe) für eine bessere Ausrichtung von Kleinbuchstaben erforderlich.
2. Mehrzeiliger Text: Das Kürzen wird auf die erste und letzte Zeile des Blocks angewendet. Interne Leitungen sind nicht betroffen.