Vermijden van rafels, weduwen en wezen

Het gedrukte woord heeft zijn eigen stijlelementen die gemakkelijker te beheren dan in de digitale wereld — auteurs, schrijvers, journalisten en columnisten werken binnen vastgestelde marges en papier richting, met papierformaat en kolommen ingesteld op een vaste hoogte en breedte, waarbij de lay-out kopteksten, voetteksten en verticale uitlijning-all vastgelegd zijn voordat er ook maar één letter of woord wordt via het toetsenbord is getypt.
Voor de web designer of web content manager kan het echter moeilijk zijn om ervoor te zorgen dat de diverse typografie elementen op een webpagina in elke browser voor elke gebruiker exact hetzelfde worden weergegeven.

Hieronder zal ik aangeven hoe flarden, weduwen en wezen kunnen worden vermeden.

Rafels

Rafels — in typografie, lay-out en typografie — zijn de ongelijke randen van tekst in een paragraaf die aan één kant is uitgelijnd. Het is het plaatsen van de tekst of van een afbeelding in een pagina, kolom, tabelcel of tab van een vastgelegde breedte. Het is ook bekend als tekstuitlijning.

De basis variaties van tekstuitlijning zijn vier typografische mogelijkheden:

  • Links uitlijnen
  • Rechts uitlijnen
  • Uitgevuld
  • Gecentreerd

De „rafel” is waarschijnlijk een van de meest over het hoofd gezien details in web-typografie, maar toch de look en feel van een website kan breken. Wat is het verschil tussen goede en slechte tekst rand? Een goede rafel heeft een aangename stroom waar de lijn aan de rechterkant van de paragraaf afbreekt en het op en neer gaat in kleine stappen. Slechte rafels creëert storende vormen van onregelmatige witte ruimte in de marge van de pagina of kolom waar regeleinden ongelijk en inconsistent zijn. Afbeeldingen A en B illustreren respectievelijk slechte en goede rafels.

Afbeelding A

Figuur A

Afbeelding B

Figuur B

Weduwen

Weduwen zijn paragraaf eindes die aan het begin terecht komen van de volgende pagina / kolom en zo gescheiden  zijn van de rest van de tekst. Een weduwe is een zeer korte lijn, vaak een woord, of het einde van een afgebroken woord aan het eind van een paragraaf of kolom. Weduwen laten te veel witruimte tussen de alinea’s of aan de bovenkant van de pagina. Dit onderbreekt het oog van de lezer, verstoort het leesproces, en kan zelfs het inzicht verstoren. Zie het voorbeeld van een weduwe in Afbeelding C hieronder.

Afbeelding C

Figuur C

Wezen

Wezen zijn enkele woorden die overblijven aan het eind van een paragraaf. Een wees is een woord, een deel van een woord, of een zeer korte lijn die uit zichzelf verschijnt aan het einde van een paragraaf. Een wees kan ook de start van een paragraaf zijn onderaan een pagina / kolom. Wezen leiden veel witte ruimte onderaan een pagina. Zie het voorbeeld van een wees in Afbeelding D hieronder.

Afbeelding D

Figuur D

Oplossing voor de rafels, weduwen en wezen

Er zijn een aantal manieren om de tekst in evenwicht te brengen en weduwen en wezen te vermijden in de web-typografie. Het toepassen stijlen helpt om rafels te vermijden in de weergave. CSS geeft je enige controle, CSS3 biedt aanvullende regels voor effectieve uitlijning. Hoewel er geen waterdichte oplossingen zijn voor rafels, kunnen enkele wijzigingen worden toegepast op tekst blokniveau.

De CSS-instellingen voor uitlijning worden bereikt met de text-align eigenschap, zoals weergegeven in de code hieronder:

/* rafels rechts */
P {text-align:left}
/* rafels links */
P {text-align:right}
/* geen rafels */
P {text-align:justify}

Echter, deze CSS opmaak geeft geen perfecte oplossing en aangezien effectieve uitlijning van de tekst alleen kan worden bereikt als lange woorden worden afgebroken, hebben HTML en CSS alleen geen mogelijkheden voor het toevoegen van automatische woordafbreking in de huidige browser-ondersteuning. Handmatige woordafbreking om mooie afbreeklijnen te maken is uit den boze en is een slechte oplossing.

We krijgen enige hulp van de CSS Multi-column Layout Module, die beschrijft hoe tekst en beeld-inhoud bijvoorbeeld in meerdere kolommen kan worden gezet met een open ruimte tussen de kolommen en het aantal kolommen kan worden gedefinieerd. „Een voorbeeld van deze code is hieronder weergegeven, waarin het aantal kolommen met de kolom-count op 3 is gezet, de kolom-tussenruimte op 1em en een effen zwarte 1px breede scheidingslijn. Met deze vormgeving wordt de kolombreedte afhankelijk van de beschikbare breedte van de browser.

 .column_count {
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
column-count: 3;
column-gap: 1em;
column-rule: 1 px solid black;
}

Een voorbeeld styling toegepast voorbeeld tekst wordt weergegeven in Afbeelding E hieronder

Afbeelding E

Figuur E

Met dank aan Ryan Boudreaux.