HTML-Texte auf imaginären Pfaden wandeln lassen

csswarp.js
Kommentare

Text lässt sich auf vielerlei Arten darstellen. Mithilfe der gerade einmal acht KB großen JavaScript-Library csswarp.js kann HTML-Text um einen willkürlichen Pfad verzogen werden, sodass er aussieht, als sei er mit dem Illustrator-Tool „attach-to-path“ erstellt worden.

Der Vorteil von csswarp.js liegt jedoch in der geringeren Größe der Library, zudem wird weder jQuery noch eine andere Library benötigt. Gleichzeitig bietet sie zahlreiche Einstellungsmöglichkeiten, um das „Textverziehen“ anzupassen.

Properties zum Verziehen des Texts

Das csswarp-Script parst den DOM nach Nodes, die verzogen werden sollen und transformiert anschließend jeden Buchstaben mit CSS3-Transforms. So wirkt es, als folge der Text einem imaginären Pfad. Dafür wird das Script am Anfang oder Ende des HTML-Dokuments eingefügt und ein Konfigurationsobjekt erstellt.

Um damit einen Warp zu konfigurieren, werden im Konfigurationsobjekt die gewünschten Properties definiert. Dabei sind die Properties path und targets in jedem Fall erforderlich. Zudem können optional noch weitere Properties definiert werden, etwa:

  • rotationMode
  • indent
  • align
  • showPath
  • fixShadow
  • css
  • callback

Bevor Text verzogen werden kann, müssen alle Schriftarten geladen und alle Text-Metriken kalkuliert werden – je nach benötigter Schriftdatenmenge kann das einige Zeit dauern. In der Zwischenzeit erscheint der Text ungestyled und nicht verzogen auf der Website. Um dies zu verhindern, kann der Warptext mit visibilty:hidden im CSS versteckt werden.

Beispiele, wie die Library genutzt werden kann, um Text in einem Kreis oder einer Bezier-Kurve darstellen zu lassen, finden sich im GitHub-Repository; Demos und weitere Informationen zudem auf der Projekt-Website. Dort gibt es auch einen CSS-Text-to-Path-Generator, mit dem sich Text als HTML generieren und anschließend für verschiedene Browser exportieren lässt. Das ist dann vielleicht nicht schön, aber nützlich. Aktuell funktioniert csswarp in jedem modernen Browser mit CSS3-Transforms-Support; am Support für ältere Versionen des Internet Explorers wird derzeit gearbeitet.

Aufmacherbild: set of arrows von Shutterstock / Urheberrecht: Inka1

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -