Kategorien
Design JavaScript & jQuery Programmierung Responsive Design

Widow Tamer JS: Javascript verbessert Typografie in responsiven Layouts

Der Widow Tamer, zu deutsch Witwenzähmer, kümmert sich um eine spezielle typografische Fragestellung. Von einer Witwe spricht der Entwickler Nathan Ford im Zusammenhang mit seinem Tool dann, wenn am Ende eines Absatzes lediglich eine geringe Zahl von Zeichen übrig bleibt, diese aber dennoch in eine neue Zeile umgebrochen werden. Diese extrem kurze Zeile störe dann den Lesefluss, vor allem aber die Optik und gehöre „gezähmt“, so Ford. Bei statischen Layouts kann prinzipiell der Designer im Vorfeld darauf achten, solche Effekte zu vermeiden, bei responsiven Layouts liegt das außerhalb seines Einflussbereichs.


Sicherlich schwerer zu zähmen als typografische Witwen… (Bildquelle: bagal / pixelio.de)

Widow Tamer JS: Konfigurierbar und mit flexiblen Methoden ausgestattet

Das Ziel des Widow Tamers ist simpel. Vermeide eine letzte Absatzzeile, wenn diese weniger als X Zeichen hätte. Die Anzahl der Zeichen ist konfigurierbar und abhängig vom Hauptlayout, konkret von der Anzeigebreite eines einzelnen Absatzes. Bei dem einen werden schon 14 Zeichen zu einer unschönen Optik führen, bei anderen erst fünf. Da ist es gut, dass man dem Widow Tamer eben diesen Wert flexibel innerhalb der Funktion unter Verwendung von etwa chars: 14, mitteilen kann.

Die zentrale Funktion wt.fix() wird beim Laden der Seite initialisiert und wartet dann auf den Eintritt des definierten Events. Bei jedem Auftreten des Events wird sie ausgeführt. Ein Beispiel sähe so aus:

wt.fix({
	elements: '#posts article p',
	chars: 14,
	method: 'padding-right',
	event: 'resize'
    });

In Zeile 1 finden Sie den bereits genannten Funktionsaufruf. In Zeile 2 wird definiert, auf welche Elemente der Widow Tamer angewendet werden soll. Grundsätzlich wird das zumeist der P-Tag sein, aber auch andere Elemente sind durch das Script bearbeitbar. In Zeile 3 erfolgt die Definition der Witwe an sich, also die Angabe, ab wieviel Zeichen eine Zeile als Witwe erkannt werden soll. Zeile 4 bestimmt die Methode, mit der zur Witwenzähmung geschritten wird. Hierbei kann es sich um die Erhöhung oder Verringerung des Wort-Abstandes oder des Zeichenabstandes, sowie ein padding links oder rechts oder der Einsatz von nonbreaking Spaces handeln. Die beiden erstgenannten Methoden würden in Zeile 6 auf Vergrößerung oder Verringerung gesetzt. Schlussendlich wird dem Script noch das zu überwachende Event übergeben. In responsiven Layouts wird es sich hier in der Regel um resize handeln.

Zwei Screenshots nach Resize zeigen das Ergebnis der Witwenzähmung:


Aufruf in klein dimensioniertem Browserfenster


Völlig neue Umbrüche nach Resize

Auf der Website Artequalswork.com kann das Script live in Aktion betrachtet werden. Spielen Sie einfach ein bisschen mit der Größe des Browserfensters durch Ziehen mit der Maus. Der Effekt wird schnell sichtbar.

Nathan Fords Widow Tamer ist erst ein paar Tage alt. Ford twitterte seine Geburt am 22. Juni:

Das Script steht auf GitHub zum kostenlosen Download und zur freien Verwendung bereit. Ford erwartet, dass man seine Copyrightnotiz gemeinsam mit dem Script einsetzt und nicht entfernt. Ansonsten gibt es keine weitere Beschränkungen.

Von Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Schreibe einen Kommentar

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