http://www.documentroot.net - Tipps, Tricks, Tutorials, Wissenswertes
31. Oktober 2011

Hübscher Blocksatz im Internet

Quelle: http://www.documentroot.net/internet/hubscher-blocksatz-im-internet

Unter Webdesignern ist Blocksatz verpönt – und das hat vor allem einen Grund: um eine einheitliche rechte Textkante zu erreichen, werden die Wortabstände gestreckt und das sieht oft einfach bescheuert aus. Professionelle Textsatzprogramme wenden deshalb noch einen zusätzlichen Trick an, um die Wortabstände einigermaßen konstant zu halten: auomatische Silbentrennung. Leider unterstützt das keiner der modernen Browser, weswegen einfach kategorisch von Blocksatz abgeraten wird. Ich persönlich finde Blocksatz aber sehr ästhetisch und möchte nur ungern darauf verzichten. Eben hab ich durch Zufall eine JavaScript-Library entdeckt, die automatische Silbentrennung in Browsern nachrüsten kann und das Ergebnis ist überraschend gut.

Die Library wurde von Mathias Nater geschrieben, auf seiner Seite beschreibt er Theorie und Funktionsweise. Ich will hier nur kurz zusammenfassen, wie man die Library auf seiner Webseite einbindet.

Empfohlen wird die Verwendung von UTF-8 auf der Webseite. Die Sprache muss im html-Tag angegeben werden:

<html lang="de">
...
</html>

Im Header wird dann folgendes Snippet eingefügt:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://hyphenator.googlecode.com/svn/trunk/Hyphenator.js" type="text/javascript"></script>
<script type="text/javascript">
  Hyphenator.run();
  $(document).ready(function() { $('.hyphenate').css('text-align', 'justify'); });
</script>

Jeder Textbereich, der im Blocksatz mit automatischer Silbentrennung dargestellt werden soll, erhält die Klasse “hyphenate”:

<div class="hyphenate">Lorem ipsum dolor sit amet ...</div>

Kind-Elemente werden ebenfalls im Blocksatz dargestellt. Das Ergebnis kann man direkt hier in meinem Blog bewundern.

Anmerkungen:

  • Ändert sich die Breite des Textblocks, so wird die Silbentrennung dynamisch angepasst.
  • Ist Javascript deaktiviert, so bleibt der Text linksbündig. Will man trotzdem Blocksatz (mit evtl. zu großen Wortabständen), so sollte man textalign: justify per CSS setzen.
  • Alle Konfigurationsmöglichkeiten findet man in der API bei Google.
  • Wem die JS-Datei zu groß ist, der kann sich eine speziell angepasste Version hier zusammenstellen.
Internet , , , ,