jQuery Bacon

Alles neu macht der Oktober: Auf unserer Website hat sich einiges getan... Zum Beispiel auf der Teamseite. Neu sind da nicht nur die Mitarbeiter-Statements. Sondern auch deren Gestaltung. Dafür haben wir mit Bacon gearbeitet.   

Lesedauer: ca. 1 Minuten

Was ist Bacon?

Nein, Speck ist damit nicht gemeint. Sondern das jQuery-Plugin Bacon. jQuery ist ein bekanntes JavaScript-Framework, für das es jede Menge Plugins gibt – neben Bacon zum Beispiel auch TypeButter. Beide Plugins beschäftigen sich nicht mit Essen, sondern mit dem Stylen von Texten. Dabei bietet Bacon speziell die Möglichkeit, Texte entlang einer beliebigen Form auszurichten.

Wieso Bacon?

Für die Mitarbeiter-Statements auf der Teamseite war als Form ein kursiver Textblock gewünscht – aber bitte ohne kursive Schrift. Das geht mit CSS, der Darstellungssprache für Webseiten, nur in den Browsern, die neue CSS-Standards realisiert haben. Das sind (noch) nicht allzu viele. Mit Bacon dagegen konnten die Zeilen kursiv, der Text aber nicht kursiv positioniert werden – und das in allen Browsern mit JavaScript.

Welche Anpassungen wurden vorgenommen?

Dazu musste die Funktionalität des Plugins für die Straight Lines so erweitert werden, dass sowohl die linke als auch die rechte Seite des Textblocks kursiv dargestellt werden – ohne Erweiterung ist das Einrücken des Textes nur auf einer Seite möglich. Zusätzlich musste der RegExp so umgestellt werden, dass Bacon Umlaute nicht als Leerzeichen interpretiert und ungewollte Umbrüche mitten im Wort erzeugt.  

Welche Probleme gab es? Und wie wurden Sie gelöst?

Das größte Problem war die kurze Dokumentation, die lediglich drei Beispiele für die einzelnen Darstellungsfunktionen enthielt – ohne dabei auf die einzelnen Einstellungsoptionen einzugehen. Die nähere Betrachtung des Quellcodes gab Aufschluss und half dabei, die Funktionsweise von Bacon zu verstehen und anzupassen. Allerdings konnten die vorgenommenen Anpassungen nicht als eigenes Plugin angelegt werden, das Bacon um die gewünschten Funktionalitäten erweitert. Daher wurden die Änderungen direkt im Quellcode des Plugins übernommen.

Das Ergebnis...

...kann auf unserer Teamseite betrachtet werden! 

Teilen:

Weitere Beiträge

#ninja { color: black; visibility: hidden; }
Martin Alker, Entwicklung / Scrum Master bei punkt.de
Arbeiten bei punkt.de