# Misura l'esatta larghezza in pixel di qualsiasi testo
Il tuo testo trabocca dal suo contenitore? Hai bisogno di sapere quanto spazio occupa un titolo prima di renderizzarlo? L'API Canvas del browser ti consente di misurare l'esatta larghezza di qualsiasi stringa di testo con precisione al pixel, senza renderizzarla nel DOM. # Perché il conteggio dei caratteri non è sufficiente
I caratteri moderni sono proporzionali: ogni glifo ha una larghezza diversa. Una "W" può occupare tre volte più spazio di una "i". Il numero di caratteri non dice nulla sullo spazio visivo effettivo occupato dal testo. -
[object Object]
-
[object Object]
-
[object Object]
-
[object Object]
# Come funziona la misurazione con Canvas
Il metodo ctx.measureText() dell'API Canvas restituisce un oggetto TextMetrics con una proprietà width che riflette la larghezza in pixel CSS utilizzando il carattere attualmente attivo. Questo strumento configura il contesto con carattere, dimensione, spessore e stile prima della misurazione.
const ctx = document.createElement('canvas').getContext('2d');
ctx.font = '700 16px Inter, system-ui, sans-serif';
const width = ctx.measureText('Ciao Mondo').width; // es. 74.5
# Privacy ed elaborazione locale
Tutti i calcoli avvengono nel tuo browser. Nessun testo, snippet di codice o dato privato lascia il tuo dispositivo.
Caratteri Google Fonts
Per misurare accuratamente un carattere di Google Fonts, assicurati prima che sia caricato sulla pagina o installato sul tuo sistema. In caso contrario, il browser utilizzerà un carattere sostitutivo e il risultato differirà.