J'aime votre "seule idée" de faire juste une carte de largeur de caractère statique! Cela fonctionne bien pour mes besoins. Parfois, pour des raisons de performances ou parce que vous n'avez pas facilement accès à un DOM, vous pouvez simplement souhaiter une calculatrice autonome rapide et hacky calibrée à une seule police. Voici donc un calibré pour Helvetica; passez une chaîne et (éventuellement) une taille de police:
function measureText(str, fontSize = 10) {
const widths = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.2796875,0.2765625,0.3546875,0.5546875,0.5546875,0.8890625,0.665625,0.190625,0.3328125,0.3328125,0.3890625,0.5828125,0.2765625,0.3328125,0.2765625,0.3015625,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.2765625,0.2765625,0.584375,0.5828125,0.584375,0.5546875,1.0140625,0.665625,0.665625,0.721875,0.721875,0.665625,0.609375,0.7765625,0.721875,0.2765625,0.5,0.665625,0.5546875,0.8328125,0.721875,0.7765625,0.665625,0.7765625,0.721875,0.665625,0.609375,0.721875,0.665625,0.94375,0.665625,0.665625,0.609375,0.2765625,0.3546875,0.2765625,0.4765625,0.5546875,0.3328125,0.5546875,0.5546875,0.5,0.5546875,0.5546875,0.2765625,0.5546875,0.5546875,0.221875,0.240625,0.5,0.221875,0.8328125,0.5546875,0.5546875,0.5546875,0.5546875,0.3328125,0.5,0.2765625,0.5546875,0.5,0.721875,0.5,0.5,0.5,0.3546875,0.259375,0.353125,0.5890625]
const avg = 0.5279276315789471
return str
.split('')
.map(c => c.charCodeAt(0) < widths.length ? widths[c.charCodeAt(0)] : avg)
.reduce((cur, acc) => acc + cur) * fontSize
}
Ce tableau laid géant est des largeurs de caractères ASCII indexées par code de caractère. Donc, cela prend juste en charge ASCII (sinon cela suppose une largeur de caractère moyenne). Heureusement, la largeur évolue essentiellement de façon linéaire avec la taille de la police, donc cela fonctionne assez bien avec n'importe quelle taille de police. Il manque visiblement de conscience du crénage, des ligatures ou autre.
Pour "calibrer" je viens de rendre chaque caractère jusqu'au charCode 126 (le puissant tilde) sur un svg et j'ai obtenu le cadre de délimitation et l'ai enregistré dans ce tableau; plus de code et d'explication et de démonstration ici .