{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "text-box-trim",
 "name": "Optisch exakte Textabstände mit text-box-trim / text-box-edge",
 "name_en": "Leading trim with text-box-trim / text-box-edge",
 "kurz": "Ein Token text-box: trim-both cap alphabetic schneidet den unsichtbaren Leerraum über der Versalhöhe und unter der Grundlinie ab: Abstände stimmen sichtbar, Labels sitzen mittig.",
 "kategorie": "Typo-Techniken",
 "kategorie_slug": "typo-techniken",
 "kategorie_nr": 15,
 "bau_chat": "C1",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 7,
 "stimmung": [
  "editorial",
  "präzise"
 ],
 "stimmung_roh": [
  "präzise",
  "editorial",
  "sachlich",
  "typografisch"
 ],
 "technik": [
  "css"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Jede Textzeile hat über der Versalhöhe und unter der Grundlinie unsichtbaren Leerraum: den halben Durchschuss plus die Reserve für Ober- und Unterlängen. text-box-trim schneidet diesen Raum an der ersten und letzten Zeile ab (trim-start, trim-end, trim-both). text-box-edge legt fest, wo geschnitten wird, etwa cap alphabetic (oben an der Versalhöhe, unten an der Grundlinie) oder ex alphabetic (oben an der x-Höhe). Kurzform: text-box: trim-both cap alphabetic. So entsprechen Abstände zwischen Text und Kante genau den Token-Werten, Buttons sind optisch zentriert und Raster sitzen auf der Versalhöhe. Browserstand laut caniuse (31.10.2026): Chrome 133+, Safari 18.2+, Firefox 154+.",
  "warum_es_wirkt": "Figma kennt Text-Box-Trim seit Jahren, der Browser bisher nicht. Mit text-box stimmen Abstände 1:1 mit dem Entwurf überein. Labels in Buttons und Pills sitzen mittig, große Headlines schließen bündig an Linien und Bildkanten an. Die Seite wirkt gesetzt statt ungefähr.",
  "wann_einsetzen": "Für Headlines, Buttons, Badges und Pills, Kartentitel, Wortmarken im Hero und Swiss-Raster mit sichtbaren Linien. In Design-Systemen als globales Token (z. B. --text-trim).",
  "wann_nicht": "Bei mehrzeiligem Text mit Hintergrund-Markierung, weil die Markierung beschnitten wird (dort text-box: normal setzen). Bei Schriften mit fehlerhaften Metriken nicht ungeprüft einsetzen.",
  "varianten": [
   "Globales Token: --global-style-text-box-trim: trim-both cap alphabetic (Piccalilli)",
   "In einer Feature-Query: @supports (text-box: trim-both cap alphabetic) (Linear)",
   "Nur Buttons: display: inline-flex mit text-box: trim-both cap alphabetic (Stripe)",
   "Labels: text-box: trim-both text alphabetic (WIRED)",
   "Nur das Ende trimmen: text-box-trim: trim-end für Kartentexte (Works in Progress)",
   "Ausnahme für Markierungen: text-box: normal auf Highlight-Spans (zachleat)"
  ],
  "umsetzung": "Global: h1, h2, h3, .btn span, .badge { text-box: trim-both cap alphabetic; }. Als Token: :root { --text-trim: trim-both cap alphabetic; } und in Komponenten text-box: var(--text-trim). Bei Bedarf in @supports kapseln, damit ältere Browser ihre bisherigen, ausgeglichenen Abstände behalten. text-box wirkt auf Blockcontainer und Inline-Boxen, bei Buttons daher auf das Label (span mit display: block) setzen. padding-block symmetrisch wählen (z. B. .75em), ein Ausgleich ist nicht mehr nötig. Für Schriften mit Kleinbuchstaben-Look text-box-edge: ex alphabetic testen. Markierungen bekommen text-box: normal. Bei Fließtext betrifft der Schnitt nur die erste und letzte Zeile, line-height bleibt unverändert.",
  "mobil": "Wirkt identisch. Besonders wertvoll bei kleinen Pills und Buttons, wo 2 bis 3 px Versatz sofort auffallen.",
  "reduzierte_bewegung": "Nicht relevant, die Technik bewegt nichts.",
  "barrierefreiheit": "Ändert weder Schriftgröße noch Zeilenabstand. Bei Zoom und Text-Spacing-Overrides (WCAG 1.4.12) prüfen, dass nichts abgeschnitten wird: kein overflow: hidden auf getrimmten Labels."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Häufigster Wert in Produktion: text-box: trim-both cap alphabetic (Linear, Stripe, Piccalilli, Set Studio, zachleat); Varianten trim-both text alphabetic (Wired), trim-end (Works in Progress). Browser: Chrome 133, Safari 18.2, Firefox 154 (caniuse css-text-box-trim)",
  "herkunft": "beobachtet",
  "quelle": "https://static.linear.app/web/_next/static/css/vfNSRYu7.css; https://piccalil.li/dist/global.css"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Linear",
   "url": "https://linear.app/",
   "auszeichnung": "",
   "beobachtung": "Homepage-Sektionstitel und Beschreibungen: @supports (text-box: trim-both cap alphabetic) { .b-30Va_title, .b-30Va_descriptionText { text-box: trim-both cap alphabetic } } (static.linear.app/web/_next/static/css/vfNSRYu7.css).",
   "art": "website"
  },
  {
   "seite": "Stripe",
   "url": "https://stripe.com/",
   "auszeichnung": "",
   "beobachtung": "Primär-Button im Design-System (hds): display:inline-flex; align-items:center; text-box: trim-both cap alphabetic; padding-block über Token (b.stripecdn.com/…/css/d0587afad5d01631.css).",
   "art": "website"
  },
  {
   "seite": "Piccalilli",
   "url": "https://piccalil.li/",
   "auszeichnung": "",
   "beobachtung": "Global-Token --global-style-text-box-trim: trim-both cap alphabetic, angewendet auf Hero-Headline, Meta, Buttons (button span), Werbebanner; Key-Points-Überschriften mit text-box: cap alphabetic (dist/global.css, _astro/*.css).",
   "art": "website"
  },
  {
   "seite": "Set Studio",
   "url": "https://set.studio/",
   "auszeichnung": "",
   "beobachtung": "Sektions-Headlines .intro-region__heading und .piccalilli-region__heading mit text-box: trim-both cap alphabetic (Inline-CSS).",
   "art": "website"
  },
  {
   "seite": "Zach Leatherman (zachleat.com)",
   "url": "https://www.zachleat.com/",
   "auszeichnung": "",
   "beobachtung": "h1–h6 und Headline-Klassen mit text-box: trim-both cap alphabetic; für Text-Highlights und Jahres-Subheads bewusst text-box: normal (Inline-CSS und static/defer.css).",
   "art": "website"
  },
  {
   "seite": "Works in Progress Magazine",
   "url": "https://worksinprogress.co/",
   "auszeichnung": "",
   "beobachtung": "Newsletter-Titel und Versal-Labels mit text-box-trim: trim-both, Benefit-Kartentexte mit text-box-trim: trim-end (_astro/Layout.45Qt3007.css).",
   "art": "website"
  },
  {
   "seite": "WIRED",
   "url": "https://www.wired.com/",
   "auszeichnung": "",
   "beobachtung": "Klickbare Label-Komponente (TextClickableLabel) mit text-box: trim-both text alphabetic (styled-components im HTML).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN – text-box-trim",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-box-trim"
  },
  {
   "titel": "caniuse – CSS text-box-trim",
   "url": "https://caniuse.com/css-text-box-trim"
  }
 ],
 "kombinierbar_mit": [
  "headline-laufweite-zeilenabstand",
  "blueprint-raster-sichtbar",
  "schrift-hero-viewportbreit",
  "button-zustaende",
  "fluide-typo-clamp-cqi"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/",
  "meta": "https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/demo"
 },
 "herkunft": {
  "quelldateien": [
   "patch-luecken-b.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Token text-box: trim-both cap alphabetic schneidet den unsichtbaren Leerraum über der Versalhöhe und unter der Grundlinie ab: Abstände stimmen sichtbar, Labels sitzen mittig.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "token": "--text-trim: trim-both cap alphabetic; angewendet als text-box: var(--text-trim) auf h1, h2, Lead, Wortmarke, Pille, button span",
   "varianten": "normal | trim-both cap alphabetic | trim-both text alphabetic | trim-end cap alphabetic",
   "raum": "32px (Linie → Versalhöhe h1, Grundlinie h1 → Bild, row-gap)",
   "knopf": "display:inline-flex; padding: .75em 1.25em (symmetrisch); font 500 15px/1.2; Label span display:block mit text-box",
   "pille": "display:inline-block; padding: 7px 10px; Geist Mono 500 11px/1.3, letter-spacing .14em, versal",
   "h1": "font-size clamp(2.5rem, 1.1rem + 5.4vw, 6rem); line-height 1.04; letter-spacing -.04em; weight 500",
   "lead": "17px / 1.5, max-width 38ch",
   "gemessen_1440px_normal": "Linie → Versalhöhe 46,3 px, Grundlinie → Bild 50,2 px, Flucht h2 zu h1 −8,1 px, Bildkante → Versalhöhe Lead 5,8 px, Knopf oben/unten 14,4/15,3 px",
   "gemessen_1440px_trim_cap": "32 / 32 / 0 / 0 px, Knopf oben = unten",
   "uebergang_nur_demo": "transform 900ms cubic-bezier(0.16, 1, 0.3, 1) (expo.out), FLIP von alter zu neuer Lage; text-box selbst ist nicht animierbar",
   "unterstuetzung": "@supports-Prüfung CSS.supports('text-box', 'trim-both cap alphabetic'); Chrome 133+, Safari 18.2+, Firefox 154+"
  },
  "ausloeser": "klick",
  "touch": "Gleich wie Desktop: Tippen auf den Umschalter wechselt den text-box-Wert, Hilfslinien und Messwerte aktualisieren sich. Auf 390 px einspaltig, Klammern für Linie → h1 und h1 → Bild bleiben sichtbar.",
  "reduziert": "Kein Gleiten: Elemente und Hilfslinien springen beim Umschalten sofort in die neue Lage. Die Vorführung wechselt die Werte weiterhin, nur ohne Bewegung.",
  "korrekturen": {
   "beschreibung": "Jede Textzeile hat über der Versalhöhe und unter der Grundlinie unsichtbaren Leerraum: den halben Durchschuss plus die Reserve für Ober- und Unterlängen. text-box-trim schneidet diesen Raum an der ersten und letzten Zeile ab (trim-start, trim-end, trim-both). text-box-edge legt fest, wo geschnitten wird, etwa cap alphabetic (oben an der Versalhöhe, unten an der Grundlinie) oder ex alphabetic (oben an der x-Höhe). Kurzform: text-box: trim-both cap alphabetic. So entsprechen Abstände zwischen Text und Kante genau den Token-Werten, Buttons sind optisch zentriert und Raster sitzen auf der Versalhöhe. Browserstand laut caniuse (31.10.2026): Chrome 133+, Safari 18.2+, Firefox 154+.",
   "warum_es_wirkt": "Figma kennt Text-Box-Trim seit Jahren, der Browser bisher nicht. Mit text-box stimmen Abstände 1:1 mit dem Entwurf überein. Labels in Buttons und Pills sitzen mittig, große Headlines schließen bündig an Linien und Bildkanten an. Die Seite wirkt gesetzt statt ungefähr.",
   "wann_einsetzen": "Für Headlines, Buttons, Badges und Pills, Kartentitel, Wortmarken im Hero und Swiss-Raster mit sichtbaren Linien. In Design-Systemen als globales Token (z. B. --text-trim).",
   "wann_nicht": "Bei mehrzeiligem Text mit Hintergrund-Markierung, weil die Markierung beschnitten wird (dort text-box: normal setzen). Bei Schriften mit fehlerhaften Metriken nicht ungeprüft einsetzen.",
   "varianten": [
    "Globales Token: --global-style-text-box-trim: trim-both cap alphabetic (Piccalilli)",
    "In einer Feature-Query: @supports (text-box: trim-both cap alphabetic) (Linear)",
    "Nur Buttons: display: inline-flex mit text-box: trim-both cap alphabetic (Stripe)",
    "Labels: text-box: trim-both text alphabetic (WIRED)",
    "Nur das Ende trimmen: text-box-trim: trim-end für Kartentexte (Works in Progress)",
    "Ausnahme für Markierungen: text-box: normal auf Highlight-Spans (zachleat)"
   ],
   "umsetzung": "Global: h1, h2, h3, .btn span, .badge { text-box: trim-both cap alphabetic; }. Als Token: :root { --text-trim: trim-both cap alphabetic; } und in Komponenten text-box: var(--text-trim). Bei Bedarf in @supports kapseln, damit ältere Browser ihre bisherigen, ausgeglichenen Abstände behalten. text-box wirkt auf Blockcontainer und Inline-Boxen, bei Buttons daher auf das Label (span mit display: block) setzen. padding-block symmetrisch wählen (z. B. .75em), ein Ausgleich ist nicht mehr nötig. Für Schriften mit Kleinbuchstaben-Look text-box-edge: ex alphabetic testen. Markierungen bekommen text-box: normal. Bei Fließtext betrifft der Schnitt nur die erste und letzte Zeile, line-height bleibt unverändert.",
   "mobil": "Wirkt identisch. Besonders wertvoll bei kleinen Pills und Buttons, wo 2 bis 3 px Versatz sofort auffallen.",
   "reduzierte_bewegung": "Nicht relevant, die Technik bewegt nichts.",
   "barrierefreiheit": "Ändert weder Schriftgröße noch Zeilenabstand. Bei Zoom und Text-Spacing-Overrides (WCAG 1.4.12) prüfen, dass nichts abgeschnitten wird: kein overflow: hidden auf getrimmten Labels."
  },
  "geprueft": "31.10.2026",
  "notiz": "Demo: Projektseite des erfundenen Büro Lotrecht mit sichtbarer Linie, Headline, Bild und Textspalte. Umschalter für normal und drei Trim-Varianten; Hilfslinien zeigen Inhaltsboxen, Versalhöhe, Bildkante und live gemessene Abstände (Soll 32 px bzw. 0 px). Das Gleiten zwischen den Zuständen ist nur Demo-Hilfe (FLIP), text-box selbst ist nicht animierbar. Vorführung wechselt im Takt zwischen normal und trim-both cap alphabetic, dazwischen text alphabetic und trim-end. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --tinte-leise .58 → .64, neues Token --mess-text #be3a22 für Messbeschriftungen, Werte und Klammer-Plaketten (4,8:1; Linien bleiben #e2462c), Kontrastmodus-Rahmen für Knöpfe."
 }
}