CSS-tekstomloop: balans

Een klassieke typografische techniek, het handmatig toevoegen van regeleinden voor evenwichtige tekstblokken, is nu beschikbaar in CSS.

Adam Argyle

De waarde voor balance bij text-wrap maakt deel uit van CSS Text Level 4. Bekijk de voorbeelden in dit bericht om te zien hoe deze ene regel CSS je tekstlay-outs enorm kan verbeteren.

Zonder text-wrap: balance ; ontwerpers, contentredacteuren en uitgevers hebben weinig mogelijkheden om de balans van regels te veranderen. De beste beschikbare opties zijn het gebruik van <wbr> of ­ om tekstlay-outs te sturen naar slimmere beslissingen over waar regels en woorden moeten worden afgebroken.

Als ontwikkelaar weet je de uiteindelijke grootte, lettergrootte of zelfs de taal van een kop of alinea niet. Alle variabelen die nodig zijn voor een effectieve en esthetische weergave van tekstterugloop, bevinden zich in de browser. Daarom zien we tekstterugloop in koppen zoals in de volgende afbeelding:

.unbalanced {
  max-inline-size: 50ch;
}

Met text-wrap: balance uit CSS Text 4 kun je de browser vragen om de best mogelijke, evenwichtige tekstterugloop te bepalen. De browser is immers op de hoogte van alle factoren, zoals lettergrootte, taal en beschikbare ruimte. Het resultaat van een evenwichtige tekstterugloop door de browser ziet er vandaag de dag als volgt uit:

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

Het is handig om ze naast elkaar te zien, zonder dat er debug-informatie overheen is geplaatst.

Uw ogen zullen veel meer plezier beleven aan het evenwichtige tekstblok. Het trekt beter de aandacht en is over het algemeen gemakkelijker te lezen.

Het vinden van de juiste balans

De koptekst is het eerste wat lezers zien; deze moet visueel aantrekkelijk en gemakkelijk leesbaar zijn. Dit trekt de aandacht van de gebruiker en geeft een gevoel van kwaliteit en betrouwbaarheid. Goede typografie wekt vertrouwen bij de lezer en moedigt hem of haar aan om verder te lezen.

Traditioneel werd deze taak handmatig, of optisch, uitgevoerd, omdat de ontwerper die de tekst balanceert, het oog wil strelen en niet de wiskunde. Dit onderwerp wordt vaak aangeduid als metrische versus optische uitlijning. Voor grote publicaties zoals de New York Times is het balanceren van koppen een zeer belangrijk detail voor de gebruikerservaring.

Het balanceren van tekst in typografie gaat terug tot de begindagen van de boekdrukkunst, toen drukkers letters met de hand plaatsten. Naarmate de gereedschappen en technieken evolueerden, veranderden ook de resultaten. Tegenwoordig hebben ontwerpers kleur, dikte, grootte en meer tot hun beschikking om tekst in hun ontwerpen in balans te brengen.

Op het web is er echter minder controle mogelijk, omdat het document van grootte en kleur verandert op basis van de gebruiker. text-wrap: balance brengt de kunst van het balanceren van tekst op een geautomatiseerde manier naar het web, voortbouwend op het werk en de tradities van ontwerpers uit de printindustrie.

Balanskoppen

Dit is, en zou ook moeten zijn, het belangrijkste gebruiksdoel van text-wrap: balance . Trek de aandacht met de juiste grootte en zorg ervoor dat de tekst symmetrisch en leesbaar is. Stel alle koppen in op een gebalanceerde tekstterugloop met de volgende CSS:

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

Het simpelweg toepassen van deze stijl levert mogelijk niet het gewenste resultaat op, omdat de tekst moet worden afgebroken en er daarom ergens een maximale regellengte moet worden ingesteld. In de voorbeelden in dit bericht ziet u een ` max-inline-size ingesteld; deze stijl is vergelijkbaar met max-width , maar kan eenmalig voor elke taal worden ingesteld.

Beperkingen

Het balanceren van tekst is niet gratis. De browser moet iteraties uitvoeren om de best mogelijke, gebalanceerde tekstterugloop te vinden. Deze prestatiekosten worden beperkt door een regel die alleen werkt voor maximaal zes afgebroken regels .

Prestatieoverwegingen

Het is geen goed idee om tekstterugloop op je hele ontwerp toe te passen. Het is een overbodige functie vanwege de limiet van zes regels en kan de laadsnelheid van de pagina beïnvloeden.

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

Een groot voordeel van deze functie is dat je niet hoeft te wachten op het balanceren van tekstterugloop met het laden van lettertypen, zoals je dat nu misschien nog met JavaScript doet. De browser regelt het!

Interacties met de white-space eigenschap

De eigenschap 'Balancing text' concurreert met de eigenschap white-space omdat de ene eigenschap vraagt ​​om geen tekstterugloop en de andere om een ​​gebalanceerde tekstterugloop. Dit kan worden opgelost door de eigenschap 'white-space' uit te schakelen; daarna kan 'balanced wrapping' weer worden toegepast.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

Balanceren verandert de inline-grootte van het element niet.

Sommige JavaScript-oplossingen voor gebalanceerde tekstterugloop hebben als voordeel dat ze de max-width van het omringende element zelf aanpassen. Dit heeft als bijkomend voordeel dat de tekst wordt "verkleind" tot het gebalanceerde blok. text-wrap: balance heeft dit effect niet, zoals te zien is in dit voorbeeld:

Zie je hoe de breedte die in DevTools wordt weergegeven, aan het einde een hoop extra ruimte heeft? Dat komt omdat het alleen een tekstterugloopstijl is, geen stijl die de grootte aanpast. Hierdoor zijn er een paar scenario's waarin text-wrap: balance niet zo goed werkt, althans naar mijn mening. Bijvoorbeeld bij koppen in een kaart (of een andere container met randen of schaduwen).

Een evenwichtige tekstterugloop creëert paradoxaal genoeg juist een onevenwicht in het ingesloten element.

Een korte uitleg van de techniek die de browser gebruikt.

De browser voert in feite een binaire zoekopdracht uit naar de kleinste breedte die geen extra regels veroorzaakt, en stopt bij één CSS-pixel (niet de weergavepixel). Om het aantal stappen in de binaire zoekopdracht verder te minimaliseren, begint de browser met 80% van de gemiddelde regelbreedte.