Blocksatz auf Webseiten
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 mit CSS3 kam mit hyphen eine automatische Silbentrennung.
main p {
hyphens: auto;
-webkit-hyphens: auto;
}
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. Im Zeitschriften- und Buchdruck wird der Blocksatz sorgfältig manuell nachberarbeitet. Auf Webseiten wissen wir nicht, wie breit der Text laufen wird.
Die Höhe der Spalten sollte in das Browserfenster passen, damit der Leser nicht runter und rauf scrollen muss. Für das Porträtformat der mobilen Geräte ist ein Spaltensatz denkbar ungeeignet.
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. Im Zeitschriften- und Buchdruck wird der Blocksatz sorgfältig manuell nachberarbeitet. Auf Webseiten wissen wir nicht, wie breit der Text laufen wird.
Die Höhe der Spalten sollte in das Browserfenster passen, damit der Leser nicht runter und rauf scrollen muss. Für das Porträtformat der mobilen Geräte ist ein Spaltensatz denkbar ungeeignet.
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 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 als Schlusslicht hat auch Firefox die wohltuende Wirkung eines Trennstrichs anerkannt.
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.
<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
