What is Bacon?
No, we’re not talking about bacon as in the food. We’re referring to the jQuery plugin called Bacon. jQuery is a well-known JavaScript framework with a wide variety of plugins available—including TypeButter, for example, in addition to Bacon. Neither plugin has anything to do with food; instead, they’re both about styling text. Specifically, Bacon lets you align text along any shape.
Why Bacon?
For the employee statements on the team page, the desired layout was an italicized text block—but without using an italic font. With CSS, the styling language for websites, this is only possible in browsers that have implemented the latest CSS standards. There aren’t (yet) that many of those. With Bacon, on the other hand, the lines could be positioned as if they were italicized, while the text itself remained upright—and this works in all browsers using JavaScript.
What adjustments were made?
To achieve this, the plugin’s functionality for “Straight Lines” had to be extended so that both the left and right sides of the text block are displayed in italics—without this extension, indenting the text is only possible on one side. In addition, the RegExp had to be modified so that Bacon wouldn’t interpret umlauts as spaces and create unwanted line breaks in the middle of words.
What problems arose? And how were they solved?
The biggest problem was the sparse documentation, which contained only three examples for the individual formatting functions—without going into detail about the specific configuration options. A closer look at the source code provided insight and helped us understand and adapt how Bacon works. However, the adjustments we made could not be implemented as a separate plugin that extends Bacon with the desired functionality. Therefore, the changes were incorporated directly into the plugin’s source code.
The result...
...can be viewed on ourteam page!
