CSS-Eigenschaft „text-box-trim“

Adam Argyle

Veröffentlicht am 14. Januar 2025

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

Langform:

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

Kurzform:

text-box: trim-both cap alphabetic;

Mit dieser Property können Sie den Abstand über und unter Text steuern, z. B. bei <h1>, <button> und <p>. Jede Schriftart erzeugt einen anderen Abstand in Blockrichtung, der zur Größe des Elements beiträgt. Dieser chaotische Beitrag zum Abstand lässt sich nicht einfach messen und war bisher nicht steuerbar.

Die Schriftart weiß es, jetzt weiß es auch CSS.

Der Abstand über und unter einer Schriftart entsteht durch die Art und Weise, wie Text im Web angeordnet wird. Das wird als „Halbzeilenabstand“ bezeichnet. Matthias Ott hat in einem Beitrag mit dem Titel The Thing With Leading In CSS ausführlich darüber geschrieben. Beim manuellen Setzen von Text wurden Metallstücke verwendet, um Textzeilen zu trennen. Im Web wird der Zeilenabstand in zwei Teile aufgeteilt und jeweils ein Teil über und unter dem Inhalt platziert.

Diese Geschichte ist wichtig, weil text-box uns Namen für jede Hälfte gibt: „over“ und „under“. Außerdem können wir den Abstand entfernen.

Es gibt auch einen Stand der Technik für text-box. Vielleicht erinnern Sie sich noch an den Beitrag von Ethan Wang mit dem Titel Leading-Trim: The Future Of Digital Typesetting, in dem leading-trim (der frühere Name von text-box) zum ersten Mal vorgestellt wurde.

Der Einstieg in das Kürzen von Text kann über Figma und die Steuerelemente für den vertikalen Abstand für Designer erfolgen. In diesem X-Beitrag wird gezeigt, wo sich diese Option für den vertikalen Abstand befindet und wie sie für Schaltflächen hilfreich ist.

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

Funktion und Syntax

Hier sind meiner Meinung nach die beiden häufigsten Einzeiler, 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;
}

Das Kürzen beider Seiten auf cap alphabetic ist die häufigste Verwendung dieser Funktion. In den folgenden Demos wird dies mehrmals verwendet. Im vorherigen Beispiel wird jedoch auch ex alphabetic verwendet, da es auf einzigartige Weise für das optische Gleichgewicht nützlich ist.

Explorer-Playground

Erkunden Sie die Syntax in unserem Playground, und sehen Sie sich die Ergebnisse in Drop-down-Menüs an. Sie können Schriftarten und Werte für das Kürzen über und unter dem Text ändern und die farblich gekennzeichneten Grafiken und Labels verfolgen.

Mögliche Aktionen:

1. Visuelle Überprüfung der Funktionsweise von text-box-trim bei einzeiligem und mehrzeiligem Text.
2. Bewegen Sie den Mauszeiger auf eine Variante, um die Werte für das Kürzen zu sehen, die verwendet wurden, um diesen Effekt zu erzielen.
3. Ändern Sie die Schriftart.
4. Kürzen Sie nur eine Seite eines Textfelds.
5. Überprüfen Sie die Syntax während der Wiedergabe.

Was kann ich erstellen und welche Probleme werden dadurch gelöst?

Aus dieser Kürzungsmöglichkeit ergeben sich einige viel einfachere Lösungen für die Zentrierung und Ausrichtung. Sie können sogar einen korrekten Zeilenabstand erzielen, bei dem zwischen den Inhalten ein Abstand wie gap verwendet werden kann.

Einfachere Zentrierung

Bei kleineren, inline- und inhaltsbezogenen Komponenten ist padding: 10px ein angemessener Stil, um für ein Element einen gleichen Abstand auf allen Seiten festzulegen. Das Ergebnis kann jedoch verwirrend sein, da oben und unten oft zusätzlicher Abstand vorhanden ist.

Um dieses Problem zu umgehen, legen Entwickler oft explizit einen geringeren Abstand oben und unten (Block) fest, um die Auswirkungen des Halbzeilenabstands auszugleichen.

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

An diesem Punkt müssen wir Wertkombinationen ausprobieren, bis die Elemente optisch zentriert sind. Das sieht auf einem Bildschirm und Betriebssystem möglicherweise gut aus, auf einem anderen jedoch nicht.

Mit text-box können wir den Halbzeilenabstand aus dem Text entfernen, sodass gleiche Abstände wie 10px nützlich sind:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}

Hier sind einige <button> Elemente, die zeigen, wie durch das Kürzen des Abstands mit text-box der Abstand von padding: 10px auf allen Seiten in einem praktischen interaktiven Element gleich aussieht. Beachten Sie, wie die alternative Schriftart einen ganz anderen Halbzeilenabstand erzeugen kann.

Hier sind <span>-Elemente, die häufig verwendet werden, um Kategorien oder Badges anzuzeigen. Auch hier sollte ein gleichseitiger Abstand die beste Lösung sein, aber bis text-box mussten wir uns damit behelfen.

Einfachere Ausrichtung

Der zusätzliche, unkontrollierbare Halbzeilenabstand über (over) und unter (under) einem Textfeld erschwert auch die Ausrichtung. In den folgenden Beispielen wird gezeigt, wann der Halbzeilenabstand die Ausrichtung erschweren kann und wie das Kürzen der Blockseiten eines Textfelds zu einer besseren Ausrichtung führen kann.

Hier wird ein Bild neben Text platziert. Das Bild wird auf die Höhe des Textes vergrößert. Ohne text-box ist das Bild immer etwas höher. Mit text-box kann das Bild perfekt an den Textinhalt ausgerichtet werden.

Beachten Sie, dass bei Zeilenumbruch der Leerraum über der ersten formatierten Textzeile und unter der letzten formatierten Textzeile liegt.

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

Weiterlernen

Möchten Sie mehr erfahren? In der folgenden Liste mit Links finden Sie verschiedene Mengen an zusätzlichen Informationen und Anwendungsfällen.

• Codepen-Sammlung aller Demos.
• Umfangreiche Recherchen und Demos von Jan Nicklas.
• Zwei CSS-Properties zum Kürzen von Leerraum in Textfeldern auf CSS Tricks.
• CSS-Inline-Layout an Texträndern.
• Nicht zu verwechseln mit size-adjust oder ascent-override
• CSS-Grundlinie: Das Gute, das Schlechte und das Hässliche.
• Auf viele HTML-Elemente angewendet: CodePen.
• Blogbeitrag von Safari.
• Warum ich als Designer von „text-box-trim“ begeistert bin.