So reparieren Sie Ihre Lumpen, Witwen und Waisen

Das gedruckte Wort hat seine eigenen Stilelemente, die einfacher zu verwalten sind als in der digitalen Welt - Autoren, Schriftsteller, Journalisten und Kolumnisten arbeiten innerhalb festgelegter Ränder und Papierausrichtungen, während Papiergröße und Spalten auf eine bestimmte Höhe und Breite eingestellt sind Das Layout enthält Kopf- und Fußzeilen sowie die vertikale Ausrichtung - alles bevor der erste Buchstabe oder das erste Wort auf der Tastatur ausgegeben wird. Es kann jedoch für den Webdesigner oder Webinhaltsmanager schwierig sein, damit umzugehen - sicherzustellen, dass die genauen Typografieelemente in jedem Browser für jeden Benutzer auf der Webseite gerendert werden. In diesem Beitrag werde ich zeigen, wie Sie die Kontrolle über Ihre Lumpen, Witwen und Waisen übernehmen. Wie kann der Webdesigner das Kommando über das gerenderte Wort erlangen, um unschöne Lumpen, schmerzhafte Lesungen von Witwen und schreckliche Waisenkinder zu vermeiden?

Lumpen

Lumpen - beim Satz, beim Seitenlayout und bei der Typografie - sind die unebenen Textkanten in einem Absatz, der auf einer Seite ausgerichtet ist. Dies ist der Textfluss oder die Bildplatzierung relativ zu einer Seite, einer gemessenen Spalte, einer Tabellenzelle oder einer Registerkarte und wird auch als Textausrichtung, Textausrichtung oder Typausrichtung bezeichnet.

Die grundlegenden Variationen der Textausrichtung umfassen vier typografische Ausrichtungen:

  • Linke Ausrichtung
  • Richtige Ausrichtung
  • Gerechtfertigt
  • Zentriert
Der "Lappen" ist wahrscheinlich eines der am meisten übersehenen Details in der Web-Typografie, aber sein Fluss kann das Erscheinungsbild einer Website verändern oder verändern. Was ist der Unterschied zwischen gutem und schlechtem Lappen? Guter Lappen hat einen angenehmen Fluss, bei dem die Linie rechts vom Absatz abbricht und in kleinen Schritten ein- und ausgeht. Schlechter Lappen erzeugt störende Formen unregelmäßiger Leerzeichen am Rand der Seite oder Spalte, in denen Zeilenumbrüche unterschiedlich und inkonsistent sind. Die folgenden Abbildungen A und B veranschaulichen einen schlechten bzw. einen guten Lappen.

Abbildung A.

Abbildung B.

Witwen

Witwen sind Zeilen mit Absatzenden, die am Anfang der folgenden Seite / Spalte stehen und somit vom Rest des Textes getrennt sind. Eine Witwe ist eine sehr kurze Zeile, normalerweise ein Wort oder das Ende eines getrennten Wortes am Ende eines Absatzes oder einer Spalte. Witwen lassen zu viel Leerraum zwischen Absätzen oder am oberen Rand einer Seite. Dies unterbricht das Auge des Lesers, stört den Lesevorgang und kann sogar das Verständnis beeinträchtigen. Siehe das Beispiel einer Witwe in Abbildung C unten.

Abbildung C.

Waisenkinder

Waisen sind einzelne Wörter, die am Ende eines Absatzes allein gelassen werden. Eine Waise ist ein Wort, ein Teil eines Wortes oder eine sehr kurze Zeile, die am Ende eines Absatzes von selbst erscheint. Eine Waise kann auch eine Absatzeröffnungszeile sein, die am Ende einer Seite / Spalte angezeigt wird. Waisenkinder verursachen zu viel Leerraum zwischen Absätzen oder am Ende einer Seite. Siehe das Beispiel einer Waise in Abbildung D.

Abbildung D.

Lumpen, Witwen und Waisen reparieren

Lassen Sie uns einige Möglichkeiten finden, um den Lappen auszugleichen, die Witwen zu reparieren und die Waisen in Ihrer Web-Typografie wegzulassen. Durch Anwenden von Stilen auf Ihre Absätze können Sie steuern, wie Ihr unregelmäßiger Text angezeigt wird. Während die Verwendung von CSS Ihnen eine gewisse Kontrolle gibt, bietet CSS3 zusätzliche Regeln, um die effektive Rechtfertigung zu verfeinern. Es gibt zwar keine narrensicheren Lösungen zur Steuerung des Lappens, es gibt jedoch einige Änderungen, die auf die Blockebene von Text angewendet werden können.

Das Festlegen von gerechtfertigtem oder unregelmäßigem Text wird mit CSS mit der Eigenschaft "Text ausrichten" ausgeführt, wie im folgenden Codeausschnitt angezeigt:

 / * zerlumpt rechts * / 
 P {Textausrichtung: links} 
 / * links zerlumpt * / 
 P {Textausrichtung: rechts} 
 / * nicht zerlumpt * / 
 P {Textausrichtung: Ausrichten} 

Dieses CSS-Styling ist jedoch keine perfekte Antwort. Da eine effektive Rechtfertigung von Text nur erreicht werden kann, wenn lange Wörter getrennt werden, enthalten HTML und CSS allein keine Bestimmungen zum Hinzufügen einer automatischen Silbentrennung mit der gesamten aktuellen Browserunterstützung. Eine manuelle Silbentrennung entlang von Zeilenumbrüchen kommt nicht in Frage. Daher stellt sich heraus, dass dies eine schlechte Lösung ist.

Wir erhalten Unterstützung vom mehrspaltigen CSS-Layoutmodul, das beschreibt, wie Text- und Bildinhalte beispielsweise in mehrere Spalten fließen können und mit einer Lücke und einer Regel zwischen jeder Spalte in einer zugewiesenen Spaltenanzahl definiert werden können, wenn erwünscht. Ich habe diese CSS3-Technik im Detail "Arbeiten mit dem mehrspaltigen CSS3-Layoutmodul" überprüft. Ein Ausschnitt dieses Codebeispiels wird unten angezeigt, in dem die Anzahl der festen Spalten mit der Spaltenanzahl auf 3, die Spaltenlücke bei 1em und eine durchgehend schwarze 1px-Spaltenregel festgelegt werden. Bei diesem Stil variieren die Spaltenbreiten abhängig von der verfügbaren Breite des Browsers.

 .column_count { 
 -moz-Spaltenanzahl: 3; 
 -webkit-column-count: 3; 
 -moz-Spaltenlücke: 1em; 
 -Moz-Spalten-Regel: 1px festes Schwarz; 
 -webkit-column-gap: 1em; 
 -webkit-column-rule: 1px durchgehend schwarz; 
 Spaltenanzahl: 3; 
 Spaltenlücke: 1em; 
 Spaltenregel: 1 px festes Schwarz; 
 }} 
Ein Beispiel für dieses Styling, das auf Beispieltext angewendet wird, ist in Abbildung E unten dargestellt:

Abbildung E.

© Copyright 2021 | pepebotifarra.com