Bacon.js – Bezier-Kurven für Texte

Screenshot eines mit Bacon.js modifizierten Textes

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

Organigramme in jQuery Organigramme sind eine feine Sache zur Darstellung von Sitemaps, Unternehmenshierarchien oder von Abläufen. Allerdings sind sie hinsichtlich Erstellun...
Die Selektoren von jQuery erweitern Ich bin über einen recht interessanten Artikel im Blog von James Padolsey gestolpert, der nachhaltig Arbeit einsparen kann, insofern man jQuery verwen...
Tooltips in 100% CSS Tooltips sind inzwischen in jeder Web-Applikation zu finden, einfach um dem Benutzer mehr Informationen zu geben oder besser zu führen. Bei ganz windi...
jQuery.sheet – Excel Spreadsheets für jQuery Es gibt da durchaus ein oder zwei Sachen, in denen man sich in Javascript die Finger bricht und man froh ist, dass es zum Beispiel jQuery gibt. Sinnvo...

Ein Kommentar

Schreibe einen Kommentar