CSS-Eigenschaft „text-box-trim“

Nehmen Sie den Abstand über und unter dem Textinhalt zurück, um optisches Gleichgewicht zu schaffen.

Adam Argyle

Veröffentlicht: 14. Januar 2025

Ab Chrome 133 können Entwickler und Designer mit text-box den Abstand über und unter Text anpassen.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

Langschrift:

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading;
line-fit-edge: alphabetic | text;

Kurzschreibweise:

text-box: trim-both cap alphabetic;

Mit dieser Property können Sie den Abstand über und unter Text steuern, z. B. <h1>, <button> und <p>. Jede Schriftart erzeugt eine unterschiedliche Menge dieses Block-Richtungsraums, was zur Größe des Elements beiträgt. Dieser chaotische Raumbeitrag lässt sich nicht leicht messen und war bisher nicht zu kontrollieren.

Die Schrift weiß es, jetzt weiß es auch CSS!

https://codepen.io/web-dot-dev/pen/xbKjRxL

Der Abstand über und unter einer Schriftart ist auf die Textausrichtung im Web zurückzuführen und wird als „Halb-Leitung“ bezeichnet. Dies wird in einem Beitrag von Matthias Ott mit dem Titel The Thing With Leading In CSS (Das Problem mit Leading in CSS) ausführlich behandelt. Bei der manuellen Typografie wurden Metallstücke aus Blei verwendet, um Textzeilen voneinander zu trennen. Im Web wird dieser Abstand, inspiriert vom Satzabstand, in zwei Hälften geteilt und ein Teil über und ein Teil unter den Inhalt verteilt.

Eine Überschrift mit einer rosafarbenen Leiste über und unter dem Text, um eine halbe Schriftzeile zu zeigen.
Quelle

Dieser Verlauf ist aussagekräftig, da text-box Namen für jede Hälfte liefert: „über“ und „unter“. Außerdem können Sie sie zuschneiden.

Es gibt auch Vorläufer von text-box. Vielleicht erinnern Sie sich an den spannenden Beitrag von Ethan Wang mit dem Titel Leading-Trim: The Future Of Digital Typesetting, in dem leading-trim (der vorherige Name von text-box) zum ersten Mal vorgestellt wurde.

Eine Überschrift wird mit überschüssigem Raum darüber und darunter angezeigt, der anscheinend mit einer Schere herausgeschnitten wurde.

Ein Einstiegspunkt in das Text-Trimming kann Figma und seine Steuerelemente für die vertikale Bildbeschneidung für Designer sein. In diesem X-Beitrag wird gezeigt, wo sich diese Option für vertikale Ränder befindet und wie sie für Schaltflächen hilfreich ist.

Quelle

Unabhängig davon, wie Sie hierher gelangt sind, kann diese kleine typografische Einstellung einen großen Unterschied machen.

Funktion und Syntax

Hier sind meiner Meinung nach die beiden häufigsten Kurzbefehle, die Sie bei der Arbeit mit text-box benötigen:

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

Am häufigsten wird diese Funktion verwendet, um beide Videos auf cap alphabetic zu kürzen. In den folgenden Demos wird dies häufig verwendet. Im vorherigen Beispiel ist jedoch auch ex alphabetic zu sehen, da es auf seine eigene Weise für das optische Gleichgewicht nützlich ist.

Explorer-Playground

In der folgenden Demo können Sie sich mit der Syntax vertraut machen und die Ergebnisse in Drop-down-Menüs ansehen. Sie können Schriftarten ändern, Werte für den oberen und unteren Grenzwert festlegen und die farbcodierten Visualisierungen und Labels verfolgen.

Screenshot der Demo des Syntax-Explorers Die Schriftart und ein Drop-down-Menü, über das eine andere Schriftart ausgewählt werden kann. Eine Syntaxvorschau mit dem Textfeld „trim-both cap alphabetic“ (beide Enden abschneiden, Großbuchstaben beibehalten), die hervorgehoben und angezeigt wird. Schließlich gibt es noch drei weitere Drop-down-Menüs, in denen Sie Zuschneidewerte auswählen können.

Versuche Folgendes:

  1. Visuelle Prüfung, wie text-box-trim bei einzeiligen und mehrzeiligen Textvarianten funktioniert
  2. Wenn Sie den Mauszeiger auf eine Variante bewegen, werden die Trimmwerte angezeigt, mit denen dieser Effekt erzielt wurde.
  3. Schriftart ändern
  4. Sie können nur eine Seite eines Textfelds zuschneiden.
  5. Sehen Sie sich die Syntax während des Spiels an.
https://codepen.io/web-dot-dev/pen/RNbyooE

Was kann ich damit erstellen oder welche Probleme löst es?

Diese Funktion ermöglicht einige viel einfachere Lösungen für die Zentrierung und Ausrichtung. Sie können sogar näher an die richtige Laufweite herankommen, indem Sie zwischen den Inhalten etwas wie gap verwenden.

Es wird ein Vergleich zwischen zwei Inhaltsgruppen angezeigt. Die erste Gruppe hat einen halben Satzabstand, die zweite einen beschnittenen Satzabstand. Das Ergebnis ist, dass die zweite Gruppe enger beieinander liegt.
https://codepen.io/web-dot-dev/pen/RNbyoKE

Einfachere Zentrierung

Für kleinere, mehr inline und zum Inhalt gehörende Komponenten ist padding: 10px ein angemessener Stil, um für ein Element einen gleichmäßigen Abstand auf allen Seiten anzugeben. Das Ergebnis kann jedoch verwirrend sein, da oben und unten oft zusätzlicher Platz vorhanden ist.

Um dies zu vermeiden, geben Entwickler häufig explizit weniger Abstand oben und unten (Block) an, um die Auswirkungen der halben Laufweite auszugleichen.

button {
  padding-block: 5px;
  padding-inline: 10px;
}

Jetzt müssen wir verschiedene Kombinationen ausprobieren, bis die Elemente optisch zentriert sind. Das kann auf einem Bildschirm und Betriebssystem gut aussehen, auf einem anderen aber nicht.

Mit text-box können wir den halben Leerraum vor dem Text kürzen. Daher sind gleichmäßige Werte für den Abstand wie 10px nützlich:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
Zwei Beispiele werden angezeigt. Das erste Bild zeigt ein Element mit einem Abstand von 10 Pixeln und einer halben Laufweite. Das zweite Bild zeigt dasselbe Element mit text-box: trim-both cap alphabetic. Die zweite Schaltfläche ist optisch zentriert.
https://codepen.io/web-dot-dev/pen/NPKMbgq

Hier sind einige <button>-Elemente, die zeigen, wie durch das Zuschneiden des Abstands mit text-box das padding: 10px in einem praktischen interaktiven Element an allen Seiten gleichmäßig aussieht. Beachten Sie, wie unterschiedlich der Abstand zwischen den Zeilen mit der alternativen Schriftart ist.

Es werden drei Gruppen von Schaltflächen angezeigt. Die erste Gruppe zeigt eine normale Sans-Serif-Schriftart. Die zweite Gruppe zeigt eine ausgefallene oder lustige Schriftart. Die dritte Gruppe zeigt denselben Effekt, aber mit einer Schreibschrift. Hier sehen Sie, dass jede Schrift einen anderen Abstand hat, die Trimmwerte aber gleich sind und den Abstand normalisieren können.
https://codepen.io/web-dot-dev/pen/mybLOMg

Hier sind <span>-Elemente, die häufig zum Darstellen von Kategorien oder Logos verwendet werden. Hier wäre wieder ein Fall, in dem gleichseitige Ränder die beste Lösung wären, aber bis text-box mussten wir uns mit einer anderen Lösung behelfen.

Die Tags werden nebeneinander verglichen. Die erste Gruppe hat einen halben Satzabstand, die zweite einen beschnittenen Satzabstand. Die zweite Gruppe ist dadurch enger beieinander und optisch zentriert.
https://codepen.io/web-dot-dev/pen/mybLOMg

Einfachere Ausrichtung

Auch der zusätzliche, nicht steuerbare Abstand von 0, 5 Zeilenhöhe über (over) und unter (under) einem Textfeld erschwert die Ausrichtung. Die folgenden Beispiele zeigen, wann eine halbe Schriftzeilenabstand die Ausrichtung erschweren kann und wie durch das Zuschneiden der Blockseiten eines Textfelds eine bessere Ausrichtung erzielt werden kann.

Hier wird ein Bild neben Text platziert. Das Bild wird so hoch wie nötig, aber ohne text-box ist es immer etwas höher. Mit text-box kann das Bild perfekt an den Textinhalt ausgerichtet werden.

https://codepen.io/web-dot-dev/pen/yyBjVpg

Beachten Sie, dass sich das Weißraumelement in Szenarien mit Zeilenumbruch über der ersten und unter der letzten formatierten Textzeile befindet.

Im folgenden Beispiel ist zu sehen, wie sich die Funktion logisch an eine Änderung von writing-mode anpasst. Ändern Sie den Text und achten Sie darauf, dass das Layout weiterhin ausgerichtet bleibt.

https://codepen.io/web-dot-dev/pen/dPbeOJQ

Test fortsetzen

Möchtest du mehr erfahren? Die folgende Liste von Links bietet verschiedene zusätzliche Informationen und Anwendungsfälle.