How to find width of each character in pixels using javascript [duplicate]

The only way to do this really is to render the letter, measure it then delete it again.

You can do something like this to get all the letters when you open the page, though it would be better to only get the length when you need them, or even just not get get the lengths

let letterLength = {};
let letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];

for (let letter of letters) {
  let span = document.createElement('span');
  span.append(document.createTextNode(letter));
  span.style.display = "inline-block";
  document.body.append(span);
  letterLength[letter] = span.offsetWidth + "px";
  span.remove();
}

let word = "manmadhan";

for (let i = 0; i < word.length; i++) {
  console.log(word[i] + ": " + letterLength[word[i]])
}

console.log(letterLength)

This is not ideal as it makes loading times slower so, as I say if you can, avoid doing this.

Caveat:

As Liam points out calculating the width of single characters can be miss leading the sum of the character widths may not equal the words total width. This is because of something called Kerning.

In typography, kerning is the process of adjusting the spacing between characters in a proportional font, usually to achieve a visually pleasing result. Kerning adjusts the space between individual letter forms, while tracking (letter-spacing) adjusts spacing uniformly over a range of characters. In a well-kerned font, the two-dimensional blank spaces between each pair of characters all have a visually similar area.

Below is an example that will compare the width of span with a whole word in vs the sum of its independent letters.

let letterLength = {};
let letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];

for (let letter of letters) {
  let span = document.createElement('span');
  span.append(document.createTextNode(letter));
  span.style.display = "inline-block";
  document.body.append(span);
  letterLength[letter] = span.offsetWidth;
  span.remove();
}


let word = document.querySelector(".word");
let totalLength = 0;
let actualLength = word.offsetWidth

for (let i = 0; i < word.innerHTML.length; i++) {
  totalLength += letterLength[word.innerHTML[i]];
}
console.log("span: "+actualLength+"px");
console.log("letters: "+totalLength+"px");

.word {
  display: inline-block;
}

<span class="word">Averages</span>

I hope this answers your question.