arial character widths

charwidths.js

var d1 = document.createElement("div");
d1.id = "test3";
d1.innerHTML = "test";
d1.style = "width: fit-content; padding: 0px; margin: 0px; font-family: Arial, sans-serif;";
document.documentElement.appendChild(d1);

var d2 = document.createElement("div");
d2.id = "test3";
document.documentElement.appendChild(d2);

d2.innerHTML = "";
var N = 100;
for (var i = 32; i < 127; i++) {
  var s = String.fromCharCode(i).replace(" ","&nbsp;");
  d1.innerHTML = s.repeat(N);
  var width = d1.getBoundingClientRect().width;
  d2.innerHTML += `"${s}": ${width/N},<br>`;
}

Dummy div filled with repeated characters to measure their individual widths. For Arial, relative widths of ascii characters are

" ": 4.4453125,
"!": 4.4453125,
'"': 5.6796875,
"#": 8.8984375,
"$": 8.8984375,
"%": 14.2265625,
"&": 10.671875,
"'": 3.0546875,
"(": 5.328125,
")": 5.328125,
"*": 6.2265625,
"+": 9.34375,
",": 4.4453125,
"-": 5.328125,
".": 4.4453125,
"/": 4.4453125,
"0": 8.8984375,
"1": 7.7228125,
"2": 8.8984375,
"3": 8.8984375,
"4": 8.8984375,
"5": 8.8984375,
"6": 8.8984375,
"7": 8.8984375,
"8": 8.8984375,
"9": 8.8984375,
":": 4.4453125,
";": 4.4453125,
"<": 9.34375,
"=": 9.34375,
">": 9.34375,
"?": 8.8984375,
"@": 16.2421875,
"A": 10.671875,
"B": 10.671875,
"C": 11.5546875,
"D": 11.5546875,
"E": 10.671875,
"F": 9.7734375,
"G": 12.4453125,
"H": 11.5546875,
"I": 4.4453125,
"J": 8,
"K": 10.671875,
"L": 8.8984375,
"M": 13.328125,
"N": 11.5546875,
"O": 12.4453125,
"P": 10.671875,
"Q": 12.4453125,
"R": 11.5546875,
"S": 10.671875,
"T": 9.7734375,
"U": 11.5546875,
"V": 10.671875,
"W": 15.1015625,
"X": 10.671875,
"Y": 10.671875,
"Z": 9.7734375,
"[": 4.4453125,
"\": 4.4453125,
"]": 4.4453125,
"^": 7.5078125,
"_": 8.8984375,
"`": 5.328125,
"a": 8.8984375,
"b": 8.8984375,
"c": 8,
"d": 8.8984375,
"e": 8.8984375,
"f": 4.15921875,
"g": 8.8984375,
"h": 8.8984375,
"i": 3.5546875,
"j": 3.5546875,
"k": 8,
"l": 3.5546875,
"m": 13.328125,
"n": 8.8984375,
"o": 8.8984375,
"p": 8.8984375,
"q": 8.8984375,
"r": 5.328125,
"s": 8,
"t": 4.4453125,
"u": 8.8984375,
"v": 8,
"w": 11.5546875,
"x": 8,
"y": 8,
"z": 8,
"{": 5.34375,
"|": 4.15625,
"}": 5.34375,
"~": 9.34375,

Nice little script! I made some changes to generalize it for my needs:

• Wraps functionality as a function
  • Accepts two parameters: a list of strings (characters) to test, and extra styles
  • Returns a map of input strings to width in pt
• Converts width from px to pt
• Adds font-size property to hint that you can run the test for any font size
• Eliminates output div
• Deletes test div once all the measurements are complete

function characterPtWidths(characters, extraStyles) {
  var div = document.createElement("div");
  div.style = "width: fit-content; padding: 0px; margin: 0px; font-family: Arial, sans-serif; font-size: 10pt; " + (extraStyles || "");
  document.documentElement.appendChild(div);
  
  var N = 100;
  var result = {}
  for (var c of characters) {
    var s = c.replace(" "," ");
    div.innerHTML = s.repeat(N);
    var width = div.getBoundingClientRect().width;
    result[s] = width / N * 4 / 3.0
  }
  
  document.documentElement.removeChild(div);
  return result;
}

Example usage:

// numbers and "."
console.log("pt widths for selected characters:", characterPtWidths([".","0", "1", "2","3","4","5","6","7","8","9"]))

// numbers and "." at font-size: 15pt
console.log("pt widths for selected characters:", characterPtWidths([".","0", "1", "2","3","4","5","6","7","8","9"], "font-size: 15pt;"))

// all ascii characters like the original
console.log("pt widths for selected characters:", characterPtWidths(Array.from((new Array(127)).keys().filter(i => i >= 32).map(x => String.fromCharCode(x)))))

Awesome, thanks!