Blocksatz und Silbentrennung: un-zer-trenn-lich

CSS Blocksatz und Silbentrennung

CSS text-align:justify richtet Text im Blocksatz aus. Zeitschriften und Bücher setzen im Blocksatz, um dem Text einen ruhigeren Charakter zu geben und das Auge nicht dem unruhigen Flattern des Textes auszusetzen.

Natürlich übertragen Webdesigner auch schon mal den Blocksatz in Webseiten – wo er allerdings schnell auffällt: durch die Lücken im Blocksatz.

Beim Blocksatz wird der Platz zwischen Wörtern vergrößert, damit der Text vom linken bis zum rechten Rand reicht. Die Lücken im Bocksatz entstehen, weil Browser von sich aus keine Silbentrennung durchführen.

Erst seit Ende 2011 bringen die ersten Browser mit CSS3 hyphen eine automatische Silbentrennung mit.

Silbentrennung und Spaltensatz

Die Empfehlung für einen lesbaren Text lautet: 8 bis 12 Wörter pro Standard-Zeile und nicht mehr. Zeitungen bewältigen diese Anforderung durch ihren Spaltensatz.

Der Spaltensatz stellt aber schon im Print große Anforderungen: Spalten müssen aufgefüllt werden, Absätze müssen mindestens zwei Zeilen umfassen, am Ende einer Spalte müssen mindestens zwei Zeilen beisammen stehen.

Die Lücken im Blocksatz erschweren das Lesen. In längeren Texten kommt es schon mal zu kleinen »Flüssen« von Leerraum – ganz schlimm. Nur breite Texte und kleine Schriften verringern die Gefahr von weißen Löchern, die sich als weiße Flüsse oder Würmer durch den Text winden. Erst eine gute Silbentrennung mildert die Lücken im Blocksatz. Die Optionen für die Silbentrennung sind in Satzprogrammen umfangreich.

  • Eine Silbentrennung setzt Trennverbote – z.B. um ein Wort wie Ei-er niemals zu trennen, wohl aber Ei-mer,
  • legt fest, wie viele Trennungen in Folge auftreten dürfen (mehr als zwei oder drei Silbentrennungen am Ende einer Zeile wirken grotesk),
  • wie stark Wörter am Ende einer Zeile gestaucht oder gedehnt werden dürfen,
  • und am Ende kommt noch die wichtige Frage, was mit dem Leerzeichen hinter einem Punkt oder Komma am Ende der Zeile passiert.

Die Empfehlung für einen lesbaren Text lautet: 8 bis 12 Wörter pro Standard-Zeile und nicht mehr. Zeitungen bewältigen diese Anforderung durch ihren Spaltensatz.

Der Spaltensatz stellt aber schon im Print große Anforderungen: Spalten müssen aufgefüllt werden, Absätze müssen mindestens zwei Zeilen umfassen, am Ende einer Spalte müssen mindestens zwei Zeilen beisammen stehen.

Die Browser zeigen ein kleines Feature (eigentlich ein Fehler), das nicht so schnell ins Auge fällt: Sie trennen Wörter mit Bindestrich, wenn es eng wird, und sorgen so für einen besseren Randausgleich.

Das trennt dann leider auch -17° und border-spacing – ist also kein Feature, sondern nicht erwünscht. Firefox hatte sich das lange gespart, aber in einer der letzten Versionen hat auch Firefox die Bedeutung des Trennstrichs erkannt.

Darüber hinaus unterstützen alle Browser (und inzwischen auch Firefox) ­ (­) – den weichen Trennstrich. Was bleibt ist die Frage, wie wir die Silbentrennung ohne Handarbeit in Gang setzen können: Der Blocksatz würde mit viel weniger Lücken auskommen.

Navigation mit justify

Bis eine zuverlässige Silbentrennung in Gang kam, war Blocksatz immer kritisch. text-align:justify kann die Menüpunkte einer Navigation mit gleich weiten Abständen setzen – und die Navigation ist auch responsive.

  • Menü 1
  • Mehr Menü
  • Multi
  • Menüpunkt lang
<div class="justmenu">
   <ul>
       <li>Menü 1</li>
       <li>Mehr Menü</li>
       <li>Multi</li>
       <li>Menüpunkt lang</li>
   </ul>
   <span></span>
</div>

Gleicher Abstand zwischen Menüpunkten (auch wenn die Menüpunkte unterschiedlich breit sind) dankt text-align:justify:

.justmenu { text-align: justify }
.justmenu ul { padding-left: 0; margin-left: 0 }
.justmenu * { display: inline }
.justmenu li { display: inline-block }
.justmenu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

Gefunden bei Stackoverflow

SITEMAP BLOG