Righe di testo di larghezza uguale

Funzionalità web: text-fit text-wrap: balance text-box

I blocchi in stile poster, in cui ogni riga viene ridimensionata in modo da occupare l'intera larghezza del contenitore, possono creare intestazioni di grande impatto visivo. Utilizzando text-fit, il browser ridimensiona ogni riga durante il layout, in modo che rimanga corretta in caso di ridimensionamento, modifiche alla copia e caricamento dei caratteri.

Per una singola riga che riempie il suo contenitore (ad es. un'intestazione o una citazione), applica text-fit direttamente a quell'elemento; questa guida riguarda i blocchi su più righe.

Implementazione di base

Per le linee forzate:

  • Racchiudi ogni riga in un <span> con display: block.
  • Applica white-space: nowrap a ogni riga forzata <span>.

Linee guida per l'implementazione:

  • Utilizza text-fit: grow per-line-all <percentage> sull'intestazione stessa.
  • Utilizza per-line-all, non per-line. per-line salta l'ultima riga e qualsiasi riga che termina con un'interruzione forzata, quindi con un blocco per riga non scala nulla.
  • grow non può essere combinato con shrink. Imposta il valore di base font-size su un valore massimo o minimo a seconda di quale sia il fallback migliore o più facile da calcolare e imposta text-fit su shrink o grow di conseguenza. Se non hai un motivo per utilizzare shrink, preferisci grow + l'impostazione font-size al minimo, in quanto è più sicuro nella maggior parte dei casi.
  • Limita sempre la crescita o la riduzione con la percentuale (ad es. 300%) come limite.
  • Il container deve avere una dimensione inline definita. text-fit non modifica mai le dimensioni intrinseche, quindi non ha alcun effetto sulle larghezze fit-content/max-content o sugli elementi flex/grid con dimensioni dei contenuti.
  • Taglia l'interlinea sopra la prima riga e sotto l'ultima: consulta Allineamento preciso del testo.
  • Mantieni line-height piccolo, 1 o inferiore, altrimenti gli spazi tra le righe di caratteri di dimensioni diverse diventano difficili da gestire.
  • IMPORTANTE: tieni presente che il valore font-size calcolato non cambia, quindi la spaziatura em non viene ridimensionata.
  • Per evitare di enfatizzare eccessivamente gli orfani per sbaglio, applica text-wrap: balance o text-wrap: pretty se ci sono righe libere.

Spaziatura

Se tutte le righe sono forzate, si ottiene un maggiore controllo sulla spaziatura:

  • Applica text-box: trim-both cap alphabetic a ogni blocco di riga in modo che la relativa casella racchiuda i propri glifi. La riduzione viene eseguita utilizzando le metriche scalate. Per maggiori dettagli, consulta Allineamento preciso del testo.
  • Spazia le righe utilizzando Flexbox o Grid + gap sull'intestazione, non line-height. In questo modo, gli spazi sono uniformi anziché aumentare con le dimensioni del carattere di ogni riga.

Se alcune righe sono libere, non utilizzare text-box: taglia solo la prima e l'ultima riga, quindi le righe esterne abbracciano i glifi mentre gli spazi interni mantengono l'interlinea. Lascia che sia line-height a gestire tutta la spaziatura.

Grafica

  • I lockup hanno un aspetto migliore quando c'è una variazione significativa delle dimensioni dei caratteri tra le righe. Evita di creare lockup da testi con righe per lo più uniformi, in quanto ciò comporterà dimensioni dei caratteri che non sono né uguali né sufficientemente diverse, violando il principio di progettazione del contrasto. Puoi assicurarti che ciò avvenga forzando le righe brevi: raggruppa le parole da enfatizzare in un blocco e lascia che il resto vada a capo, ovvero un lockup misto. Questo è particolarmente importante quando si combina con text-wrap: balance.
  • È preferibile combinare questa opzione con text-transform: uppercase quando viene utilizzata con caratteri occidentali, poiché le aste ascendenti e discendenti tendono a creare spazi vuoti e/o a sovrapporsi alle righe adiacenti, il che crea un risultato meno gradevole dal punto di vista estetico.
  • Quando forzi le righe brevi, scegli parole che migliorerebbero il messaggio se enfatizzate.
  • Limitazione: l'ingrandimento del testo aumenterà anche il peso visivo e i tratti verranno percepiti come più marcati. Al momento non esiste un modo per controbilanciare questo effetto, ad esempio riducendo font-weight per il testo più grande, poiché non esiste un'unità da utilizzare in un calcolo, dato che la scalabilità non influisce sulle unità relative ai caratteri come em.

Strategie di riserva

Per text-box

text-box non richiede un fallback separato: mantieni la line-height piccola anche sui lockup fissi. È un'operazione no-op in text-box e mantiene gli spazi ridotti dove non è supportata, al costo di spazi che scalano con la dimensione del carattere di ogni riga.

Per text-wrap: balance

Per text-fit

Le righe forzate hanno un fallback breve e fedele: misura ogni riga alla sua dimensione di base e scalala in base al rapporto con il container, con lo stesso limite.

@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);
  }
}

Le righe libere non hanno un fallback fedele (le interruzioni di riga sono sconosciute fino al layout): potenziamento progressivo a un'intestazione bilanciata con una dimensione di base fluida come clamp(2rem, 1rem + 5cqi, 5rem). In un lockup misto, lo script riportato sopra si adatta comunque alle righe forzate; un blocco con ritorno a capo misura la larghezza del container, quindi mantiene la scala 1 e ottiene solo le dimensioni di base fluide.

Se l'adattamento del testo è fondamentale, valuta la possibilità di utilizzare una libreria JS (ad es. fitty), caricata in modo condizionale solo se text-fit non è supportato.