Nauwkeurige tekstuitlijning

Het probleem

Browsers voegen automatisch extra witruimte toe boven en onder teksttekens om rekening te houden met regelhoogte en lettertypespecifieke statistieken, zoals stok- en staartletters. Door deze 'spookruimte' is het onmogelijk om een pixel-perfecte verticale uitlijning te bereiken met standaard css.

Veelvoorkomende problemen zijn:

• Niet-uitgelijnde iconen: Tekst verschijnt visueel lager of hoger dan een aangrenzend icoon, zelfs als je align-items: center gebruikt.
• Onjuiste opvulling: Een knop met padding: 12px lijkt visueel meer ruimte aan de boven- of onderkant te hebben vanwege de interne regelafstand van het lettertype.
• Uitlijning: Je kunt de bovenkant van een hoofdletter niet precies uitlijnen met de bovenkant van een container of een aangrenzende afbeelding zonder negatieve marges met een 'magisch getal' te gebruiken.

De oplossing

Met de property's text-box-trim en text-box-edge (afkorting text-box) kun je deze interne regelafstand inkorten op basis van specifieke lettertypestatistieken. Door het tekstvak bij te snijden tot de hoofdletterhoogte (bovenkant van hoofdletters) en de alfabetische basislijn (onderkant van de meeste letters), zorg je dat het begrenzingsvak van het element overeenkomt met de visuele content.

Implementatiestrategie

1. VERPLICHT: Pas text-box-trim: trim-both (of de afkorting text-box) toe op het element dat de tekst bevat.
2. VERPLICHT: Geef aan welke statistieken je wilt gebruiken voor inkorten met text-box-edge. Gebruik cap alphabetic voor de meeste UI-uitlijning.
3. Gebruik dit WEL om visuele verticale centrering te bereiken in flex- of rastercontainers.
4. Gebruik deze functie WEL om te zorgen dat je CSS-waarden voor padding overeenkomen met de visuele ruimte tussen de tekst en de rand van de container.
5. Gebruik de functie NIET voor lange hoofdtekst waarvoor traditionele regelafstand nodig is voor de leesbaarheid. Het is het meest geschikt voor koppen, knoppen en UI-labels.

Implementatiehandleiding

Use case 1: Interne regelafstand inkorten voor badges

Verschillende lettertypen hebben verschillende hoeveelheden ingebouwde ruimte boven en onder de tekst. Dit kan problemen opleveren bij het matchen van een ontwerp of bij het visueel centreren van tekst in een badge. Als je wilt dat de opvulling van een container precies om de tekst past, gebruik je text-box: trim-both cap alphabetic. Dit is vooral handig voor compacte UI-componenten zoals badges of tags. Zo kan de opvulling aan alle kanten direct aan de tekstrand beginnen.

.badge {
  padding: 10px;
  background: hotpink;
  border-radius: 10px;
  /* 
    Trims the top to the cap-height and 
    the bottom to the alphabetic baseline.
  */
  text-box: trim-both cap alphabetic;
}

Use case 2: Tekst centreren met iconen

Als je Flexbox gebruikt om tekst en iconen uit te lijnen, zorgt de 'spookruimte' er vaak voor dat de tekst iets uit het midden lijkt te staan. Als je het vak inkort, gebruikt de vormgevingsengine de werkelijke zichtbare letterhoogte voor uitlijning.

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
/* 
  text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
  /* 
    The flex container now centers against the 
    visible letters, not the invisible font box.
  */
  text-box: trim-both cap alphabetic;
}

Use case 3: Tekst uitlijnen met de bovenranden

Gebruik trim-start cap alphabetic om een kop perfect uit te lijnen met de bovenkant van een aangrenzende afbeelding of decoratief element. Hoewel het einde niet wordt ingekort, moet de eindrand worden gedefinieerd.

.hero {
  display: flex;
  align-items: flex-start;
}

h1 {
  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
  text-box: trim-start cap alphabetic;
}

Praktische tips

• WEL: Gebruik de afkorting text-box om de tekst beknopt te houden: text-box: <trim-direction> <edges>.
• WEL: Geef altijd beide randen op, zelfs als er maar één rand wordt bijgesneden (tenzij je de standaardrand text gebruikt).
• WEL combineren met line-height voor gecontroleerde tussenruimte. Als je de regelafstand inkort, wordt de regelafstand vóór de eerste en laatste regel tekst verwijderd, maar heeft line-height nog steeds invloed op de afstand tussen regels in tekst met meerdere regels.
• Pas ze NIET toe op elk element. Gebruik deze alleen als een nauwkeurige uitlijning vereist is.

Reservestrategieën

text-box is een progressive enhancement. In browsers die dit niet ondersteunen, wordt de tekst weergegeven met de standaard regelafstand. Je indeling werkt nog steeds, maar is iets minder nauwkeurig. Er is geen speciale reservecode vereist, omdat de eigenschappen veilig worden genegeerd door oudere browsers.

Andere overwegingen

1. Lettertypestatistieken: Verschillende lettertypen hebben verschillende interne statistieken. cap alphabetic is een betrouwbare standaard, maar voor sommige lettertypen of toepassingen is ex (x-hoogte) misschien beter voor een betere uitlijning van kleine letters.
2. Tekst met meerdere regels: De inkorting wordt toegepast op de eerste en laatste regel van het blok. Dit heeft geen invloed op interne lijnen.