Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Quando a gente tenta medir a largura de uma palavra inteira no HTML, geralmente obtem um valor diferente de somar as medidas de cada letra individualmente. E isso acontece mesmo usando a mesma fonte e tamanho. A divergência não é uniforme, o que complica na hora de fazer algoritmos de quebra de linha, tipo o Knuth-Plass.
No meu entendimento, o que influencia bastante é a renderização, o kerning, o espaçamento entre caracteres e até o modo como o navegador processa o layout. Algumas fontes, por exemplo, têm ajustes automáticos que não aparecem na soma das letras, por mais que pareça igual.
Para quem está querendo implementar algo mais preciso sem depender de bibliotecas pesadas, acho que o segredo está em entender esses detalhes de renderização e talvez fazer algumas medições de referência, ajustando os cálculos conforme o contexto. Quem já passou por isso e tem alguma dica prática, manda aí. Sem esse critério, a solução pode parecer simples no começo e cara no suporte.
Cara, o que pega no meu time é o tempo de feedback.
Interessante essa diferença, acho que muita gente não leva em conta o kerning na hora de fazer cálculos assim. Talvez o navegador aplique ajustes automáticos que não aparecem na soma simples.
Como assim? no meu caso, isso impacta bastante na hora de ajustar textos dinamicamente. Já tentei usar
getBoundingClientRect, mas mesmo assim às vezes fica diferente. A solução que achei foi fazer uma medição de referência no início e ajustar conforme o layout muda.Se a intenção é um algoritmo de quebra de linha, acho que vale testar também com diferentes fontes e tamanhos. Pode ser que o comportamento varie bastante dependendo desses fatores.