I'm pretty sure that's not possible dynamically.
What you can do is measure text width like so:
function measureWordSize(word, font) {
var canvas = measureWordSize.canvas || (measureWordSize.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(word);
return metrics.width;
}
console.log(measureWordSize("Hello World!", "Arial"));
Notice that the font variable actually takes the css font property, so you can adjust that to your liking.
I can think of the following trick that you could use to calculate the white space inside letters, but it won't be accurate:
Let's take the thinnest character (probably), a vertical line: |. By assuming that the width on the sides of the letter O is the same width as the vertical line's width we can try and calculate the space inside:
function measureWordSize(word, font) {
var canvas = measureWordSize.canvas || (measureWordSize.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(word);
return metrics.width;
}
let font = "Arial";
let lineSize = measureWordSize("|", font);
let spaceInsideO = measureWordSize("O", font) - lineSize*2;
console.log(lineSize);
console.log(measureWordSize("O", font));
console.log(spaceInsideO);
We can see that this is very inaccurate. If we look at 3 lines for example and one O:
|||
O
We can see that in this font, three |s equal about O. So our answer was accurate. But, it includes the gaps between letters. If you don't care that much about accuracy you can take this code and improve it, but that's as close as you'll get. Arial for example has inconsistent letter spacing so you can't count on that.