Kategorien
JavaScript & jQuery Programmierung

jQuery: Bacon bringt Texte in Form

Ein großer Unterschied zwischen Web- und Printdesign ist die im Webdesign fehlende Möglichkeit, Texte entlang einer beliebigen Form auszurichten. Das jQuery-Plugin Bacon rüstet genau diese Möglichkeit auf verblüffend einfache Art und Weise nach. Bacon wird entwickelt von David Hudson, der Dr. Web Lesern schon durch das Plugin Typebutter bekannt sein sollte. Auch Typebutter beschäftigt sich mit dem Styling von Texten, allerdings rein bezogen auf das Kerning. Hudson scheint sehr nahrungsaffin zu sein. Eine logische Erklärung für die Benennung der Plugins als Bacon und Typebutter lässt sich jedenfalls ohne weiteres nicht finden…


Bacon

Bacon einbinden

Hudson stellt Bacon auf GitHUb zum kostenlosen Download bereit. Das Plugin kann privat wie kommerziell genutzt werden, solange der Copyright-Vermerk Hudsons nicht entfernt wird. Im komprimierten Zustand bringt Bacon schlanke 7,5k auf die Waage, was jedenfalls dann kein Problem darstellt, wenn man ohnehin jQuery auf seiner Website nutzt. Denn neben dem Bacon-Plugin und einem dazu gehörenden Stylesheet muss natürlich jQuery auf der Website eingebunden werden:

<link rel="stylesheet" type="text/css" href="bacon.jquery.css" media="screen" />
<script type="Text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="Text/javascript" src="bacon.jquery.js"></script>

Sind alle Voraussetzungen erfüllt, kann eine Linie oder Bézierkurve definiert werden, an der sich ein Textblock links oder rechts ausrichten soll. Ich zeige anhand zweier Beispiele, wie das funktioniert.

Textblock verjüngen lassen


Sich nach unten verjüngender Text

Um einen Text in Form zu bringen, wird dem Text mittels jQuery-Selektor das Bacon-Plugin zugeordnet. Über verschiedene Werte lassen sich Typ und Maße der Form bestimmen. Eine einfache Linie, die einen Textblock auf einer Seite nach unten verjüngt, wird mit drei Parametern definiert:

$(document).ready(function() {
  $("#beispiel").bacon({
    "type": "line",
    "step": 50,
    "align": "right"
  });
});

Über „type“ wird die Art der Form gewählt. Der Wert „step“ gibt an, in wie vielen Stufen der Text entlang einer Linie verlaufen soll. Je höher der Wert ist, desto steiler spitzt sich der Textblock nach unten hin zu. Über „align“ wird angegeben, auf welcher Seite des Textblockes die lineare Verjüngung stattfinden soll.

Textblock an Bézierkurve ausrichten lassen


Ausrichtung eines Textes an einer Bézierkurve

Statt einer einfachen Linie kann auch eine Bézierkurve definiert werden. Dazu gibt man vier Punkte an, die den Verlauf der Kurve vorgeben:

$(document).ready(function() {
  $("#beispiel").bacon({
    "type": "bezier",
    "c1": { x: 10, y: 0 },
    "c2": { x: -100, y: 200 },
    "c3": { x: -100, y: 400 },
    "c4": { x: 10, y: 400 },
    "align": "left"
   });
});

Für jeden der vier Punkte („c1“ bis „c4“) muss je eine X- und eine Y-Koordinate angegeben werden. Auch hier definiert man über „align“ wieder die Ausrichtung („left“ oder „right“).

Statt einen Textblock nur an einer Seite mit einer Bézierkurve zu versehen, lässt sich auch für die linke und rechte Seite jeweils eine Kurve festlegen, sodass der Textblock an beiden Seiten entlang einer Kurve ausgerichtet wird:

$(document).ready(function() {
  $("#beispiel").bacon({
    "type": "dualbezier",
    "c1": {x: 10, y: 0},
    "c2": {x: -100, y: 200},
    "c3": {x: -100, y: 400},
    "c4": {x: 10, y: 400},
    "d1": {x: 10, y: 0},
    "d2": {x: -100, y: 200},
    "d3": {x: -100, y: 400},
    "d4": {x: 10, y: 400}
  });
});

Die zweite Bézirkurve wird mit den Punkten „d1“ bis „d4“ festgelegt. Die Angabe „align“ erübrigt sich hier.

Damit Bacon auf einen Textblock angewendet werden kann, müssen den entsprechenden Elementen feste Breiten und Höhen zugewiesen werden. Andernfalls wird der Textblock gar nicht sichtbar. Passt der Text nicht in die vorgegebene Größe des Blocks, wird er abgeschnitten. Man sollte also die Größe des Blockes so wählen, dass der Text auf jeden Fall passt.

Es lassen sich sowohl einzelne Absätze (P-Element) mit einer Bacon-Form versehen, als auch Div-Container, in denen sich dann mehrere Absätze befinden können. Wendet man Bacon jedoch auf einen Container an, verdoppelt sich der Zeilenabstand, da das Plugin vor jeden Absatz einen weiteren leeren Absatz setzt.

Technisch wird die Darstellung der Form übrigens sehr einfach realisiert. Es werden schlicht so viele Leerzeichen vor oder hinter eine Zeile platziert, wie nötig sind, um den Text in der gewünschten Form anzeigen zu können.

(dpe)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Eine Antwort auf „jQuery: Bacon bringt Texte in Form“

Ich finde dass das Plug-In echt mit viel bedacht eingesetzt werden sollte, wenn überhaupt. Für Fliesstexte im Web eher ungeeignet, Formsatz ist sogar im Print immer sone Sache. Habs noch nicht getestet, aber ist der Text in der Demo absichtlich Blocksatz oder macht das das Plug-In?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.