# Meça a largura exata em píxeis de qualquer texto
O seu texto está a transbordar do contentor? Precisa de saber quanto espaço um título ocupa antes de o renderizar? A API Canvas do navegador permite-lhe medir a largura exata de qualquer string de texto com precisão de píxeis, sem a renderizar no DOM. # Por que a contagem de carateres não é suficiente
As fontes modernas são proporcionais: cada glifo tem uma largura diferente. Um "W" pode ocupar três vezes mais espaço do que um "i". O número de carateres não diz nada sobre o espaço visual real que o texto ocupa. -
Web design: Previna o transbordo em botões, etiquetas e células de tabela.
-
SEO: Os motores de busca truncam títulos por píxeis, não por carateres.
-
Canvas e PDF: Calcule a posição exata antes de desenhar o texto programaticamente.
-
Tooltips e balões: Dimensione dinamicamente os contentores com base no texto interior.
# Como funciona a medição com Canvas
O método ctx.measureText() da API Canvas devolve um objeto TextMetrics com uma propriedade width que reflete a largura CSS em píxeis usando a fonte atualmente ativa. Esta ferramenta configura o contexto com a sua fonte, tamanho, peso e estilo antes de medir.
const ctx = document.createElement('canvas').getContext('2d');
ctx.font = '700 16px Inter, system-ui, sans-serif';
const width = ctx.measureText('Olá Mundo').width; // ex: 74.5
# Privacidade e processamento local
Todo o cálculo acontece no seu navegador. Nenhuns textos, trechos de código ou dados privados saem do seu dispositivo.
Fontes do Google Fonts
Para medir uma fonte do Google Fonts com precisão, certifique-se primeiro de que ela está carregada na página ou instalada no seu sistema. Caso contrário, o navegador recorrerá a uma fonte substituta e o resultado será diferente.