Come viene misurata la larghezza del testo?

La larghezza del testo si riferisce allo spazio in pixel orizzontale che una stringa di caratteri occupa quando viene renderizzata con un font, una dimensione e uno spessore specifici. A differenza del conteggio dei caratteri, la larghezza in pixel dipende dalla spaziatura proporzionale di ogni glifo — la lettera "W" è molto più larga di "i" nella maggior parte dei font. Misurare accuratamente la larghezza del testo è importante per il layout dell'interfaccia utente, il troncamento delle etichette, il rendering dinamico del canvas e l'adattamento di stringhe in contenitori a larghezza fissa.

I browser espongono il metodo measureText() dell'API Canvas HTML5, che calcola la larghezza del testo renderizzato senza visualizzarlo sullo schermo. Disegnando su un contesto canvas fuori schermo, è possibile ottenere una misurazione precisa al sub-pixel per qualsiasi combinazione di famiglia di font, dimensione e spessore.

Descrizione dello strumento

Questo strumento calcola la larghezza in pixel di una o due stringhe di testo utilizzando l'API Canvas. Seleziona una famiglia di font, imposta la dimensione e lo spessore del font, e visualizza istantaneamente la larghezza in pixel renderizzata. Quando vengono inserite due stringhe, una vista di confronto mostra la differenza assoluta e il rapporto di larghezza tra loro.

Caratteristiche

  • Supporta tutti i font di sistema web-safe e file font personalizzati caricati (TTF, OTF, WOFF, WOFF2)
  • Confronta due stringhe contemporaneamente con statistiche di differenza e rapporto
  • Dimensione del font regolabile da 1 a 256 px e tutti e nove i valori di spessore font standard

Come funziona

La larghezza viene misurata utilizzando l'API CanvasRenderingContext2D.measureText() del browser. Un elemento <canvas> fuori schermo viene creato, la proprietà font del suo contesto 2D viene impostata per corrispondere alla famiglia, dimensione e spessore selezionati, e measureText() restituisce la larghezza del riquadro di delimitazione in pixel. I font personalizzati vengono caricati nel registro FontFace del browser prima della misurazione in modo che i risultati riflettano il carattere tipografico effettivo.