{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "text-um-form",
 "name": "Text fließt um eine bewegte Form (Experiment)",
 "name_en": "Text reflowing live around a moving shape (Pretext)",
 "kurz": "Ein Ausstellungstext umfließt eine wandernde, ziehbare Skulptur-Form: Pretext bricht jede Zeile pro Bild neu um, ruhende Form mit shape-outside als Fallback.",
 "kategorie": "Typo-Techniken",
 "kategorie_slug": "typo-techniken",
 "kategorie_nr": 15,
 "bau_chat": "C1",
 "prioritaet": "F",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "editorial",
  "experimentell"
 ],
 "stimmung_roh": [
  "editorial",
  "experimentell",
  "grafisch"
 ],
 "technik": [
  "pretext",
  "canvas",
  "vanilla-js",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Ein Fließtext umfließt eine Form, die sich bewegt oder die man ziehen kann. Jede Zeile bekommt ihre eigene Breite, je nachdem, wo die Form gerade steht. Möglich wird das mit Pretext von Cheng Lou (März 2026): Die Bibliothek misst Text einmal über Canvas und bricht ihn danach rein rechnerisch um, ohne DOM-Layout. So lässt sich der Umbruch in jedem Bild neu berechnen. Fallback und reduzierte Bewegung: CSS shape-outside mit ruhender Form. Experiment, nur für Eigen- und Kulturprojekte.",
  "warum_es_wirkt": "Text und Bild reagieren aufeinander wie im gesetzten Magazin, nur lebendig. Das zeigt Haltung und Handwerk. Es fällt auf, weil CSS so etwas allein nicht kann.",
  "wann_einsetzen": "Ausstellungs- und Festivalseiten, Essays, Jahresberichte von Kulturhäusern, eigene Portfolio- und Experimentseiten. Dort, wo ein einzelner Textblock zur Bühne werden darf.",
  "wann_nicht": "Nicht auf normalen Kunden-, Firmen- oder Landingpages: dort bringt es laut Fachpresse keinen messbaren Nutzen. Nicht für lange Lesetexte, Formulare, Rechtliches. Nicht bei sehr schmalen Spalten (Wörter brechen sonst mitten im Wort). Nicht ohne Pause-Knopf, wenn sich die Form länger als 5 Sekunden bewegt.",
  "varianten": [
   "Form wandert langsam von selbst (mit Pause-Knopf)",
   "Form folgt Ziehen mit Maus, Finger oder Pfeiltasten",
   "Ruhende Form mit CSS shape-outside (Fallback, normale Websites)",
   "Mehrere Formen oder Bilder mit Umriss (Pretext-Demo dynamic-layout)",
   "Zeilen auf Canvas statt im DOM zeichnen"
  ],
  "umsetzung": "Pretext 1.0 als ES-Modul laden (import { prepareWithSegments, layoutNextLine } from '@chenglou/pretext'). Erst document.fonts.load() abwarten, dann einmal prepareWithSegments(text, '400 19px \"Atkinson Hyperlegible Next\"'). Je Bild: Umriss der Form als Polygon berechnen, für jedes Zeilenband (y bis y + Zeilenhöhe) die waagerechte Ausdehnung der Form plus Abstand bestimmen, daraus freie Abschnitte links und rechts bilden und den breitesten nehmen (mindestens ca. 140 px). Mit layoutNextLine(prepared, breite, cursor) die nächste Zeile holen, als absolut positioniertes span setzen (transform, textContent), cursor = line.end. Spans wiederverwenden, Höhe des Containers aus der letzten Zeile setzen. Absätze einzeln vorbereiten, lange Wörter mit ­ trennbar machen. Für Screenreader steht der Text einmal als normaler Absatz im DOM (visuell versteckt), die Zeilen-Spans sind aria-hidden. Fallback ohne Pretext, ohne Intl.Segmenter oder bei reduzierter Bewegung: gleiche Form als float mit shape-outside: circle() bzw. polygon() und shape-margin, Text als normaler Absatz. Ohne Bibliothek geht es auch mit Canvas measureText und eigenem Wortumbruch, dann aber ohne Pretexts Regeln für Trennung, Satzzeichen und Schriftsysteme.",
  "mobil": "Gleiches Prinzip mit kleinerer Form (Radius 62 px) und Schrift 17/27 px. Unter 560 px Spaltenbreite wandert die Form nur am rechten Rand auf und ab, der Text bleibt links, damit kein Abschnitt zu schmal wird. Ziehen mit dem Finger, touch-action: none nur auf der Form.",
  "reduzierte_bewegung": "Keine Bewegung: Form ruht, Text umfließt sie per CSS shape-outside. Der Inhalt bleibt vollständig.",
  "barrierefreiheit": "Text einmal als echter Absatz für Screenreader und Suche, die gesetzten Zeilen aria-hidden. Bewegung länger als 5 Sekunden braucht einen sichtbaren Pause-Knopf (WCAG 2.2.2). Form per Tastatur verschiebbar (Pfeiltasten), mit sichtbarem Fokus. Zeilenlänge im Blick behalten (höchstens etwa 68 Zeichen), Lesbarkeit geht vor Wirkung. Text bleibt markierbar."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)",
  "dauer_ms": "250 Zustandswechsel (Pause, Ansicht), Formbewegung linear als Bahn mit 0,035 Umdrehungen je Sekunde",
  "stagger_ms": "",
  "distanz": "Abstand Form zu Text 18 px",
  "sonstiges": "Kurve und UI-Dauer aus Rezept kultur-programm-haltung (Out-Kurve ohne Überschwingen, 150 bis 250 ms). Pretext-Demo dynamic-layout: MIN_SLOT_WIDTH 24 px; hier 140 px, damit keine Wörter zerbrechen.",
  "herkunft": "eigene Festlegung",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.215,
   0.61,
   0.355,
   1.0
  ],
  "css": "cubic-bezier(0.215, 0.61, 0.355, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 250
 },
 "gesehen_bei": [
  {
   "seite": "Pretext (GitHub, chenglou/pretext)",
   "url": "https://github.com/chenglou/pretext",
   "auszeichnung": "",
   "beobachtung": "Repo geklont 01.11.2026: Version 1.0.0 vom 14.10.2026, Lizenz MIT. API prepareWithSegments(text, font), layoutNextLine(prepared, maxWidth, start?) für Zeilen mit wechselnder Breite, Soft Hyphens werden als Trennstelle mit Bindestrich gesetzt. Hinweise: benannte Schrift statt system-ui, Intl.Segmenter nötig. Demos editorial-engine und dynamic-layout setzen Zeilen als positionierte Elemente (left, top, textContent); dynamic-layout nimmt je Zeile den breitesten freien Abschnitt (MIN_SLOT_WIDTH 24).",
   "art": "demo"
  },
  {
   "seite": "cloudmagazin: Pretext – Does a JavaScript library solve the browser's 30-year-old text layout problem?",
   "url": "https://www.cloudmagazin.com/en/2026/03/29/pretext-does-a-javascript-library-solve-the-browsers-30-year-old-text-layout-pro/",
   "auszeichnung": "",
   "beobachtung": "29.03.2026: Cheng Lou (Midjourney, früher React bei Meta) stellt Pretext am 28.03.2026 vor. Messung per Canvas, danach Umbruch als Rechnung; Text fließt in Echtzeit um beliebige Formen. Grenzen: frühes Stadium, system-ui auf macOS ungenau, sehr schmale Spalten brechen mitten im Wort. Fazit: für Blogs, Firmenseiten und Landingpages kein messbarer Nutzen.",
   "art": "artikel"
  },
  {
   "seite": "DEV Community: Pretext – fast multiline text measurement without touching the DOM",
   "url": "https://dev.to/0xgosu/pretext-fast-multiline-text-measurement-without-touching-the-dom-45ch",
   "auszeichnung": "",
   "beobachtung": "Paketname @chenglou/pretext, MIT. layoutNextLine() als Iterator für Container mit wechselnder Breite, z. B. Text um Floats oder unregelmäßige Formen.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Pretext: README und Demos (GitHub)",
   "url": "https://github.com/chenglou/pretext"
  },
  {
   "titel": "MDN: shape-outside",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside"
  }
 ],
 "kombinierbar_mit": [
  "editorial-magazin-layout",
  "lesesatz-text-wrap",
  "initial-letter-initialen",
  "schrift-hero-viewportbreit"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/typo-techniken/text-um-form/",
  "meta": "https://cecodesign.de/lab/fundus/typo-techniken/text-um-form/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/typo-techniken/text-um-form/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "01.11.2026: npm-Name @chenglou/pretext, Lizenz MIT, Version 1.0.0 (Tag v1.0.0, 14.10.2026) per git geprüft; npm und CDN hier gesperrt, daher aus dem Tag mit bun als ein ES-Modul gebündelt (assets/vendor/pretext.min.js, ca. 95 KB, gzip ca. 40 KB laut Changelog).",
   "Experiment: nur für Eigen- und Kulturprojekte, nicht für Kundenseiten-Standard.",
   "Keine Produktionswebsite mit Pretext-Umfluss geprüft; Belege sind Repo, Demos und Fachartikel.",
   "02.11.2026 per Web geprüft: Name, Autor Cheng Lou, Vorstellung 28.03.2026, Paketname @chenglou/pretext und Lizenz MIT bestätigt (cloudmagazin, DEV, tomevault). Version 1.0.0 und Datum 14.10.2026 nur lokal aus dem Git-Tag; GitHub und npm waren per WebFetch nicht abrufbar."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Ausstellungstext umfließt eine wandernde, ziehbare Skulptur-Form: Pretext bricht jede Zeile pro Bild neu um, ruhende Form mit shape-outside als Fallback.",
  "demo": true,
  "abhaengigkeiten": [
   "pretext@1.0.0"
  ],
  "werte": {
   "easing": "cubic-bezier(0.215, 0.61, 0.355, 1) für UI-Wechsel (Rezept kultur-programm-haltung)",
   "ui_ms": 250,
   "bahn": "Lissajous: x = W/2 + (W/2 − 0,7 R) · sin(ω t), y = 0,85 R + (Sichthöhe − 1,7 R) · (0,5 − 0,5 cos(ω t / 2 + 0,6)); ω = 2π · 0,035/s (ein Umlauf ≈ 28,6 s), Vorführung Tempo 2,4",
   "form": "Kiesel r(θ) = R · (1 + 0,07 sin(3θ + 0,6u) + 0,05 cos(2θ − 0,9u) + 0,025 sin(5θ + 1,3u)), 72 Punkte, y gestaucht 0,92; R = min(128, 0,19 · Spaltenbreite), schmal 62 px; 4 Höhenlinien bei 0,8/0,6/0,4/0,2",
   "abstand_form_text_px": 18,
   "min_abschnitt_px": 140,
   "satz": "Vorspann Atkinson Hyperlegible Next 400 23/34 px, Text 19/30 px (schmal 20/29 und 17/27), Absatzabstand 24 bzw. 18 px, Spalte max. 660 px",
   "pretext": "@chenglou/pretext 1.0.0: prepareWithSegments() je Absatz, layoutNextLine(prepared, breite, cursor) je Zeile; breitester freier Abschnitt je Zeilenband; Zeile frei lassen, wenn ein Wort im schmalen Abschnitt zerbräche (end.graphemeIndex > 0); ­ in langen Wörtern",
   "farben": "Grund #efede9, Text #0b0b0b, Spartenfarbe Kunst #2f7d4f, Höhenlinien #efede9 mit 32 % Deckkraft",
   "fallback": "float mit shape-outside: polygon() aus derselben Form (24 Punkte), shape-margin 18 px, 260 × 260 px (schmal 150 × 150 px)"
  },
  "ausloeser": "dauer",
  "touch": "Form mit dem Finger ziehbar (Pointer Events, touch-action: none nur auf der Form); Ziehen hält die Bewegung an. Unter 560 px Spaltenbreite kleinere Form am rechten Rand, Text 17/27 px links.",
  "reduziert": "Keine Bewegung: ruhende Form als float mit shape-outside, Text als normale Absätze; Pause-Knopf entfällt.",
  "korrekturen": {
   "mobil": "Gleiches Prinzip mit kleinerer Form (Radius 62 px) und Schrift 17/27 px. Unter 560 px Spaltenbreite wandert die Form nur am rechten Rand auf und ab, der Text bleibt links, damit kein Abschnitt zu schmal wird. Ziehen mit dem Finger, touch-action: none nur auf der Form."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: erfundenes Kulturhaus Eckhaus in Gotha, Ausstellung „Langsame Körper“ der erfundenen Bildhauerin Ilse Brenner (Rezept kultur-programm-haltung): Schibsted Grotesk 900 für den Titel, Atkinson Hyperlegible Next für den Text, IBM Plex Mono für Daten, Off-White #efede9, Spartenfarbe Kunst als Form und Label, Navigation 78 px mit Linie, Termine mit Ticket. Experiment, nur für Eigen- und Kulturprojekte. Pretext 1.0.0 (MIT) per git aus Tag v1.0.0 mit bun gebündelt als assets/vendor/pretext.min.js (ES-Modul, über Import-Map mit data-cdn). Text liegt einmal als echte Absätze für Screenreader im DOM, die gesetzten Zeilen sind aria-hidden. Ohne Intl.Segmenter oder bei Ladefehler: shape-outside. Referenzen: github.com/chenglou/pretext (Demos dynamic-layout, editorial-engine), cloudmagazin.com. AD-Review 02.11.2026: Note 4. Zugang 02.11.2026: SVG im Form-Knopf aria-hidden (Name kommt vom Knopf), Kopfzeile unter 380 px enger (kein Querscrollen bei 320 px), Kontrastmodus: Knopfrahmen und Highlight-Fokus am Form-Knopf. Hinweis „Knopf ohne Rahmen“ am Form-Knopf bleibt (clip-path-Kreis).",
  "varianten": [
   {
    "id": "pretext",
    "name": "Live-Umfluss mit Pretext",
    "wann": "Eigenprojekte, Ausstellungs- und Festivalseiten von Kulturhäusern, Essays: ein einzelner Textblock darf zur Bühne werden.",
    "werte": {
     "technik": "Pretext 1.0, Zeilen als positionierte spans, requestAnimationFrame",
     "form": "wandert (ω = 2π · 0,035/s), ziehbar, Pfeiltasten 16 px (Umschalt 64 px)",
     "pause": "Knopf „Bewegung anhalten“ (WCAG 2.2.2)"
    }
   },
   {
    "id": "css",
    "name": "Ruhende Form mit shape-outside",
    "wann": "Normale Kultur- und Kundenseiten, die den Magazin-Umfluss ohne Bibliothek und ohne Bewegung wollen; zugleich Fallback und reduzierte Bewegung.",
    "werte": {
     "technik": "float + shape-outside: polygon() + shape-margin 18 px",
     "form": "ruht; Vorführung wechselt alle 2600 ms die Seite (rechts/links)",
     "pause": "entfällt"
    }
   }
  ]
 }
}