How to find width of each character in pixels using javascript

Question

consider

<div>manmadhan</div>

I need to know whether there is any possible way to find the width of each character in pixels based on the font , as i am using react app i need only javascript

the output should be like m=12px, n=24 pixel something like that I have tried to separate the text and try using the get bounds but empty space has some problem , any suggestion ?

i have already tried the following method , but it is giving me width of whole string rather than width of individual characters within the string Calculate text width with JavaScript

Answer 1

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.