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

Redactor – Wysiwyg mit jQuery Ich habe ja erst vor einigen Wochen über einen neuen Wysiwyg-Editor berichtet, der bei einigen größeren Portalen zum Einsatz kommt. In den daraus resu...
$.Callbacks() in jQuery 1.7 Ab und an scheint doch nochmal etwas neues und sinnvolles in jQuery zu kommen, in der Version 1.7 sind es wohl unter anderem die $.Callbacks(). Im Pri...
HTML5 Cheat Sheets Ok, es sind nur zwei, aber mehr braucht man auch (erstmal) nicht ;) HTML5 bietet viele neue Möglichkeiten, die nicht nur Videos und Audio betreffen, s...
Multiple File Uploads, HTML und Open Source Formulare lassen sich inzwischen ganz gut designen, allerdings gibt es ein Formularelement, das alle Design-Versuche vehement abwehrt: der Dateiupload...

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.