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

Bei der Navigation mit der Tastatur arbeiten In letzter Zeit hat sich das Web durch Online-Anwendungen auf die Fahne geschrieben, Desktop-Anwendungen ablösen zu wollen bzw. zu ersetzen. Die Ansät...
CSS Crush – noch ein CSS Preprocessor aus De... Ich für meinen Teil bin inzwischen starker Verfechter für den Einsatz von Turbine. Der CSS Preprocessor von Peter Kröner vereinfacht mein Leben nachha...
jQuery Plugin Boilerplate Schon seit geraumer Zeit verwende ich in jQuery eine Menge selbst geschriebener Plugins, das erhöht die Wiederverwendbarkeit von Code deutlich. Aber e...
deck.js – Präsentationen in HTML Es muss nicht immer Powerpoint sein! Wenn ich eins gelernt habe in meinem ehemaligem Consulter-Leben, dann ist es das, ausreichend früh anzukommen um ...

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.