Bacon.js – Bezier-Kurven für Texte

Das Leben eines Webworkers ist nicht einfach, vor allem dann wenn man einem Kunden erklären muss, dass ein Bild mit Transparenz – auch wenn es dreimal rund ist – trotzdem rechteckig ist. Besonders lustig wird es dann, wenn der Text das runde Firmenlogo nicht umfließt. Eigentlich ein Problem das schon seit Anbeginn der HTML-Zeit besteht und durchaus bei sich nicht änderndem Text gelöst werden kann. In Verbindung mit einem Kunden der häufig via CMS die Lauflängen von Texten ändert allerdings durchaus als Worst Case Szenario zu bezeichnen.

Screenshot eines mit Bacon.js modifizierten Textes

Mittels des kleinen aber feinen jQuery-Plugins Bacon.js lässt sich nun ein beliebiger Container der Text enthält, an nicht im 90-Grad-Winkel stehenden Linien oder an Bezier-Kurven ausrichten (siehe Screenshot). Das Skript geht dafür hin und teilt den Text wiederum in mehrere Container auf (jede Zeile, ein Container) und richtet jede einzelne Zeile aus. Das macht bei Einsatz eines CMS durchaus Sinn, da man die Grafik die umflossen werden soll einmal definiert, und danach den Text beliebig ändern kann. In der Demo auf der Seite sieht man durchaus die Möglichkeiten des Plugins – ein Stück Bacon kann mitten in einen Text gelegt werden, und dieser passt sich von beiden Seiten der Grafik an.

Der Einsatz des Skriptes macht natürlich nicht immer Sinn, aber es gibt durchaus Anwendungen bei denen das Plugin schnell und einfach weiterhelfen kann.

Ähnliche Beiträge

Mit Pow.js Sonnenstrahlen generieren Einen Hintergrund aus Sonnenstrahlen ist eine feine Sache, aber faktisch nicht implementierbar. Die Grafik die dafür notwendig wäre, wäre eindeutig zu...
Intelligentes Cropping von Bildern für Responsive Wenn man sich mal so umschaut im Bereich Responsive Websites könnte man durchaus die folgenden Eindrücke gewinnen: a) Wir machen das weil wir müssen, ...
FireQuery – jQuery für Firebug Zugegebenermaßen ist jQuery ganz nett, auch die Art & Weise, wie es JavaScript anzeigt und bearbeitet ist ganz nett, aber sobald man ein Prototype...
In jQuery Existenz prüfen Das praktische an jQuery ist (unter anderem) das es Aktionen auf ein Element nur dann ausführt, wenn das Element existiert. Wenn es nicht existiert: P...

Eine Antwort auf „Bacon.js – Bezier-Kurven für Texte“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.