Tekstregels met gelijke breedte

Met blokken in posterstijl waarbij elke regel wordt geschaald zodat deze de hele breedte van de container beslaat, kun je visueel opvallende koppen maken. Met text-fit schaalt de browser elke regel tijdens de opmaak, zodat deze correct blijft bij formaatwijzigingen, tekstwijzigingen en het laden van lettertypen.

Voor een enkele regel die de container vult (bijvoorbeeld een kop of een citaat), pas je text-fit rechtstreeks toe op dat element. Deze handleiding gaat over lockups met meerdere regels.

Basisimplementatie

Voor geforceerde lijnen:

• Zet elke regel in een <span> met display: block.
• Pas white-space: nowrap toe op elke geforceerde regel <span>.

Implementatierichtlijnen:

• Gebruik text-fit: grow per-line-all <percentage> voor de kop zelf.
• Gebruik per-line-all, niet per-line. per-line slaat de laatste regel en elke regel die eindigt met een gedwongen regeleinde over. Met één blok per regel wordt er dus niets geschaald.
• grow kan niet worden gecombineerd met shrink. Stel de basis-font-size in op een maximum of een minimum, afhankelijk van wat een betere fallback is of makkelijker te berekenen is, en stel text-fit in op shrink of grow. Als je geen reden hebt om shrink te gebruiken, geef je de voorkeur aan grow + instelling font-size tot een minimum, omdat dit in de meeste gevallen veiliger is.
• Beperk groei of krimp altijd met het percentage (bijv. 300%) als bescherming.
• De container heeft een bepaalde inline grootte nodig. text-fit verandert de intrinsieke grootte nooit, dus het doet niets met fit-content/max-content-breedtes of flex-/rasteritems met contentgrootte.
• De regelafstand boven de eerste en onder de laatste regel inkorten: zie Nauwkeurige tekstuitlijning.
• Houd line-height klein, 1 of minder, anders worden de gaten tussen regels met verschillende lettergrootten onhandelbaar.
• BELANGRIJK: De berekende font-size is ongewijzigd, dus de em-afstand wordt niet geschaald.
• Pas text-wrap: balance of text-wrap: pretty toe als er vrije regels zijn om te voorkomen dat weesregels per ongeluk te veel nadruk krijgen.

Spatiëring

Als alle regels worden geforceerd, heb je meer controle over de afstand:

• Pas text-box: trim-both cap alphabetic toe op elk regelblok, zodat het vak de eigen tekens omvat. De functie knipt de video op basis van de geschaalde statistieken. Ga naar Nauwkeurige tekstuitlijning voor meer informatie.
• Gebruik Flexbox of Grid + gap voor de kop, niet line-height. De tussenruimtes zijn dan uniform in plaats van dat ze groter worden met de lettergrootte van elke regel.

Als sommige regels vrij zijn, gebruik dan niet text-box: hiermee worden alleen de eerste en laatste regel bijgesneden, zodat de buitenste regels de glyphs omarmen terwijl de binnenste tussenruimtes hun regelafstand behouden. Laat line-height alle tussenruimte bepalen.

Visueel ontwerp

• Lock-ups zien er het beste uit als er een aanzienlijk verschil is in lettergrootte tussen de regels. Maak geen lock-ups van tekst met voornamelijk uniforme regels, omdat dit leidt tot lettergrootten die niet hetzelfde zijn, maar ook niet voldoende verschillen. Dit is in strijd met het ontwerpprincipe van contrast. Je kunt dit doen door korte regels af te dwingen: zet de woorden die je wilt benadrukken in een blok en laat de rest doorlopen, oftewel een gemengde vergrendeling. Dit is vooral belangrijk als u deze combineert met text-wrap: balance.
• Combineer dit bij voorkeur met text-transform: uppercase als je het gebruikt met westerse schriften, omdat stokken en staarten vaak ingesloten ruimte creëren en/of aangrenzende regels overlappen, wat een minder esthetisch resultaat oplevert.
• Als je korte regels afdwingt, kies je woorden die de boodschap versterken als ze worden benadrukt.
• Beperking: Groeiende tekst neemt ook toe in visueel gewicht en de streken worden als sterker ervaren. Er is op dit moment geen manier om dit te compenseren, bijvoorbeeld door font-weight te verkleinen voor grotere tekst, omdat er geen eenheid is om te gebruiken in een berekening, omdat de schaling geen invloed heeft op lettertype-gerelateerde eenheden zoals em.

Reservestrategieën

Voor text-box

text-box heeft geen aparte reserve-optie nodig: houd de kleine line-height ook op vaste vergrendelingen. Het is een no-op onder text-box en houdt de tussenruimtes klein waar dit niet wordt ondersteund, ten koste van tussenruimtes die worden geschaald met de lettergrootte van elke regel.

Voor text-wrap: balance

Voor text-fit

Geforceerde regels hebben een korte, betrouwbare fallback: meet elke regel op de basisgrootte en schaal deze op basis van de verhouding tot de container, met dezelfde limiet.

@supports not (text-fit: grow) {
  .lockup > span {
    /* Shrink-wrap each line so its width is the text width */
    width: fit-content;
    /* --text-fit-scale is measured by the script; the cap mirrors the text-fit percentage */
    font-size: min(var(--text-fit-scale, 1) * 1em, 300%);
  }
}

if (!CSS.supports('text-fit', 'grow per-line-all')) {
  const fit = lockup => {
    const lines = [...lockup.querySelectorAll(':scope > span')];
    // Unscale first: on a refit, offsetWidth would otherwise include the previous scale
    for (const line of lines) line.style.removeProperty('--text-fit-scale');
    // MANDATORY: all reads, then all writes. Interleaving them (e.g. reading
    // lockup.clientWidth inside the write loop) forces one reflow per line.
    const scales = lines.map(line => lockup.clientWidth / line.offsetWidth);
    lines.forEach((line, i) => line.style.setProperty('--text-fit-scale', scales[i]));
  };
  // Refit on resize and font load
  for (const lockup of document.querySelectorAll('.lockup')) {
    new ResizeObserver(() => fit(lockup)).observe(lockup);
  }
}

Vrije regels hebben geen betrouwbare fallback (regeleinden zijn onbekend tot de vormgeving): progressive enhancement naar een gebalanceerde kop met een vloeiende basisgrootte zoals clamp(2rem, 1rem + 5cqi, 5rem). In een gemengde vergrendeling past het bovenstaande script nog steeds bij de geforceerde regels. Een terugloopblok is even breed als de container, dus het behoudt schaal 1 en krijgt alleen de vloeiende basisgrootte.

Als tekstaanpassing essentieel is, overweeg dan een JS-bibliotheek te gebruiken (bijvoorbeeld fitty), die alleen voorwaardelijk wordt geladen als text-fit niet wordt ondersteund.