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

Dummy HTML Snippets für Entwickler Mal was schnelles für zwischendurch: In letzter Zeit ist irgendwie ein regelrechter Hype um das gute alte Lorem Ipsum entstanden. Es gibt den Standard...
HTML5 Validierung mit jQuery HTML5 besitzt eine eingebaute Validierung für Formular-Elemente, das dumme ist nur, diese funktioniert derzeit nur auf Webkit-Browsern und nicht auf F...
Einfaches HTML Testing mit dem HTML Inspector Damals, als ich noch den Firefox verwendet habe, gab es ein nettes Tool mit dem man testen konnte ob HTML valide ist. Dann kam HTML5, alles wurde ande...
Reale Schatten mit jQuery Schatten gehen ja super mit CSS3, aber zugegebenermaßen muss man etwas Aufwand betreiben um diese realistisch erscheinen zu lassen. Insbesondere wird ...

Ein Kommentar

Schreibe einen Kommentar