固定宽度字符的确切宽度和高度

Question

I am working on a text widget that needs to have fixed with font for displaying tables and such. To be able to count the amount of character that fit into a given window I need to have the height and width of the font that I am using. I whipped up a quick function that calculates it by creating an element with a single character and get the height and width of that element. The problem is that this width and height are integer not floats. For instance if I call this function on chrome with 1em fontSize and fontFamily monospace . I get width 8 and height 15. The height value is correct but the width is actually something like 7.14... This doesn't seem much but when you start to have 100 characters on a line you can see that the offset becomes more than 80 pixels.

Is there a way to get the accurate values in some reliable way?

and please no jquery..

here is the function:

function getCharDimensions(fontFamily, fontSize) {
    var body = document.getElementsByTagName('body');
    var el = document.createElement("span");
    el.style.position = "absolute";
    el.style.top = "-100%"
    el.style.fontFamily = fontFamily;
    el.style.fontSize = fontSize;
    el.innerHTML = "x";
    body[0].appendChild(el);
    var dimensions = {
        height: el.offsetHeight,
        width: el.offsetWidth
    };
    el.parentNode.removeChild(el);
    return dimensions;
}

Answer 1

You are not consideering the tracking and the kerning of the typography. All characteres have a tracking defined to adjust it to other characters and be more readable.

In this case this is not the only thing that affects you, it's because CSS can't read decimal pixels in a normal screen with device pixel width 1. So 1.5px doesn't exists.

If you detect a pattern you can apply to the font size and remove the tracking in your letter, and you can apply the 7.14px because you can make a sum with it and it will be more accuracy than now.

Good luck!

EDIT

As a improvement, you can define the character you are looking for the width and height, because an i have less width than a m (yes, I know that you are playing with monospace, but this is a good improvement).

 function getCharDimensions(character, fontFamily, fontSize) {
       //stuff
       el.innerHTML = character;
       //stuff
  }