Wir haben ein neues Feature namens „Fit Text“ eingeführt, mit dem Sie fettgedruckte Überschriften erstellen können, die sich an jede Containergröße anpassen. Dieses Feature unterstützt mehrere Zeilen, Inline-Formatierungen sowie Mindest- und Höchstbreiten und sorgt dabei für eine hohe Leistung. In diesem Beitrag erkläre ich, wie wir das umgesetzt haben.
Die Herausforderung: Keine native CSS-Lösung
Ich begann mit der Erkundung bestehender Bibliotheken, aber sie hatten alle einen Nachteil: Sie mussten den Text messen, der gestreckt werden musste, bevor sie gerendert werden konnten. Das ist ein entscheidender Nachteil für uns, da Framer-Seiten statisch generiert werden und perfekt in jedem Browser gerendert werden müssen, bevor JavaScript ausgeführt wird. Als nächstes versuchte ich font-size: 100vw, was großartig funktioniert, wenn der Text den Bildschirm ausfüllt. Es wird jedoch herausfordernd, wenn Sie möchten, dass der Text einen beliebigen Container ausfüllt. Dazu müssen Sie einen komplexen CSS-Calculette-Ausdruck erstellen, der die Größe aller Vorfahren als Prozentsätze der gesamten vw darstellt. Obwohl dies machbar ist (und etwas, das Framer bereits tut, um die Bildqualität zu optimieren), wäre es schwierig, eine Komponente zu erstellen, die Text mit einer vw-Größe enthält, da es schwierig wäre, die Vorfahrengröße im isolierten Komponenten-Code zu kennen.
Die Lösung: SVG mit viewBox und foreignObject
Ich entdeckte, dass ein SVG mit einer viewBox und Unterstützung für HTML in SVG über ein foreignObject-Element einen Skalierungseffekt bieten könnte. Dieser Trick erfordert, dass man die genaue Begrenzungsbox des Textes kennt und sie der viewBox zuweist, und dann den Text innerhalb des SVG in einem foreignObject rendert. Das foreignObject bedeutet, dass Bildschirmleser und SEO keine Probleme haben, den Text darin zu finden. Der Nachteil ist, dass die viewBox des SVG aktualisiert werden muss, wann immer sich die Größe des Textes ändert, und sie synchron gehalten werden muss; andernfalls wird der Text abgeschnitten oder nicht zentriert. Das schließt diese Lösung wahrscheinlich für die meisten benutzerdefinierten Seiten aus. Es ist einfach nicht machbar, diese viewBox jedes Mal zu bestimmen, wenn ein Text bearbeitet wird oder sich Eigenschaften ändern, die seine Größe beeinflussen.
Die Automatisierung: Framer zur Rettung
Zum Glück kann Framer diesen Prozess automatisieren und die Mühe beseitigen, die viewBox manuell zu aktualisieren, wenn sich der Text ändert. Immer wenn Sie den Text auf „Fit“ setzen, misst Framer den Text in seiner aktuellen font-size, erhält die Begrenzungsbox, speichert sie und rendert ein SVG um Ihren Text mit einer viewBox. Jedes Mal, wenn Sie den Text bearbeiten, wiederholt Framer diesen Prozess, um sicherzustellen, dass die viewBox relativ zum Text bleibt. Framer kann sogar ein nahtloses Bearbeitungserlebnis unterstützen, indem es die Textgröße zurück in Pixel umwandelt, wann immer Sie es im Texteditor öffnen, indem es einige grundlegende Berechnungen basierend auf der aktuellen Breite durchführt. Wenn Sie mit der Bearbeitung fertig sind, setzt Framer die viewBox wieder ein, und sie wird mühelos wieder skaliert, ohne dass es einen Leistungseinfluss auf die Leinwand gibt.
Das Ergebnis: Butterweiches Größenänderungen
Wenn Sie Ihre Seite bereitstellen, ist die viewBox bereits berechnet, sodass Framer die Seite statisch generieren kann und der Text in der genau richtigen Größe gerendert wird, sogar bevor JavaScript geladen ist. Das führt zu keinen Flackern, Größenänderungen oder Einblendungen und butterweichen Größenänderungen.
Die Zukunft: Containerabfragen
In Zukunft planen wir, auf Containerabfragen umzuschalten, sobald sie von den Browsern, die Framer unterstützt, vollumfänglich unterstützt werden. Sie können die cqw-Einheit auf die gleiche Weise verwenden, wie Sie eine vw-Einheit verwenden können, aber cqw ist relativ zum Container. Dies würde für Komponenten funktionieren, da es die Notwendigkeit eines komplexen CSS calc-Statements beseitigt.
Fit Text ist ein ausgezeichnetes Beispiel dafür, wie Framer Ingenieursarbeit abstrahieren kann, die schwer auf einer Fall-zu-Fall-Basis zu implementieren wäre, und stattdessen können Sie sich darauf konzentrieren, großartige Seiten zu veröffentlichen. Es ist aufregend zu sehen, was die Leute mit diesem neuen Feature entwickeln werden.
