Tekstindeling en leesbaarheid verbeteren

De indeling van tekst, met name aan het einde van regels en alinea's, kan de leesbaarheid en esthetische aantrekkingskracht van een pagina beïnvloeden. CSS biedt verschillende opties voor tekstterugloop die specifieke toepassingen kunnen verbeteren.

Gebruik text-wrap: balance voor korte tekstblokken zoals koppen. Deze eigenschap geeft de browser de opdracht om tekst zo gelijkmatig mogelijk over de regels te verdelen, waardoor een symmetrischer uiterlijk ontstaat.

Met de CSS-property text-wrap: pretty kun je de typografische kwaliteit van de hoofdtekst verbeteren door een geavanceerder algoritme voor tekstterugloop aan te zetten. De functie is speciaal ontworpen om weeswoorden (losse woorden op de laatste regel van een alinea) te voorkomen en een visueel aantrekkelijkere rafelrand te maken voor lange tekstblokken.

Implementatie

1. Tekstelementen identificeren:

Selecteer voor text-wrap: balance korte tekstblokken, zoals koppen en tabelkoppen. Vermijd elementen met zichtbare vakken, zoals randen of achtergronden, omdat dit onverwachte visueel lege gebieden in de indeling kan veroorzaken.

Selecteer voor text-wrap: pretty elementen die mogelijk lange stukken tekst bevatten waarin weeswoorden (runts) of slechte regeleinden het meest opvallen. Dit omvat de volgende elementen:

• <p>
• <blockquote>
• <li>
• Elk ander element dat mogelijk lange stukken tekst bevat.

De juiste verpakkingsmethode kiezen

2. De gekozen verpakking toepassen:

Pas text-wrap: balance specifiek toe op korte elementen met meerdere regels, zoals koppen (h1-h6), subkoppen of pull-quotes.

/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
  /* Enables balanced line-breaking logic */
  text-wrap: balance;
}

Gebruik text-wrap: pretty om een geoptimaliseerd algoritme aan te zetten dat de laatste paar regels van een alinea evalueert om de beste afbreekpunten te vinden.

/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
  /* Enables pretty line-breaking logic for body copy */
  text-wrap: pretty;
}

Kritieke beperkingen en prestaties

text-wrap: balance

• Regellimiet: Browsers leggen een limiet op aan het aantal regels dat ze proberen te balanceren om de prestaties te behouden (meestal 6 regels in Chromium en 10 regels in Firefox). Als de tekst deze limiet overschrijdt, keert de browser terug naar het standaardgedrag van wrap. Gebruik text-wrap: balance niet voor tekstblokken die deze limieten waarschijnlijk overschrijden.
• Gerichte toepassing: Pas text-wrap: balance NIET wereldwijd toe (bijv. * { text-wrap: balance; }). Het iteratieve algoritme voor binair zoeken dat door browsers wordt gebruikt, is rekenkundig duur. Beperk het gebruik tot specifieke, korte tekstelementen.
• Interactie met Breedte: text-wrap: balance verandert de breedte van de container (inline-size) niet. Het heeft alleen invloed op hoe tekstomloop binnen die breedte plaatsvindt. Hierdoor kan er lege ruimte aan het einde van de container overblijven, wat van invloed kan zijn op lay-outs die afhankelijk zijn van tekstblokken over de volledige breedte.

text-wrap: pretty

• Prestaties versus kwaliteit: VERPLICHT: text-wrap: pretty vereist meer rekenkracht dan het standaard algoritme wrap (greedy), omdat het meerdere regels (meestal de laatste 4) evalueert om de afbreekpunten te optimaliseren. Pas de tag niet wereldwijd toe op elk element als je pagina een extreme hoeveelheid tekstcontent bevat.
• Het beste voor tekst met meerdere regels: De voordelen van pretty zijn het duidelijkst in alinea's van 3 of meer regels. Deze instelling heeft weinig tot geen effect op korte tekst van één regel.
• Browserspecifiek gedrag: Houd er rekening mee dat de implementatiegegevens variëren. Op Chromium gebaseerde browsers richten zich meestal op de laatste 4 regels, terwijl andere engines de hele alinea kunnen evalueren.

Reservestrategieën

In browsers die text-wrap: balance of text-wrap: pretty niet ondersteunen, wordt de property genegeerd en wordt de tekst teruggezet naar het standaardgedrag van wrap. Dit is een progressive enhancement die geleidelijk overgaat in standaardtypografie. Zo blijft je content perfect leesbaar in alle browsers en bied je een betere gebruikerservaring aan degenen die de functie wel ondersteunen.

Gebruik een JavaScript-bibliotheek voor kritieke lay-outs waarvoor een verfijnde tekstlay-out een vereiste is, maar houd er rekening mee dat dit traag kan zijn en prestatieproblemen kan veroorzaken.