What dependency between font-size and width of char in monospace font?

Question

What dependency between font-size and width of char in monospace font? In my web-application I use "courier new" font. I want to know, what realy length in pixels of string? If I know css font-size property, how can it help me to know really length of string? Thanks

Answer 1

The dependency between the font-size and the width of characters (glyphs) in a monospace font is defined by the font designer.

For example, on Windows 7, the advance width of glyphs in the Courier New font is 1229 units. Since the height of the font is 2048 units, the advance width is thus very, very close to 60% of the font size, so in CSS, 0.6em would be an adequate quantity for the width of glyphs for all practical purposes.

In Lucida Console, the advance width is almost the same: 1234 units. But in Consolas, on the other hand, it is considerably smaller, 1126 units.

The conclusions thus depend on the context, especially on the question whether your application is meant to be run only in situations where a specific font is available (and your settings won’t be overridden by users).

Answer 2

Each monospace font would have its own ratio between pixel length and font-size. But since we would ideally express font family's as several options to give the browser a wide range to fulfill the style (in case it doesn't have the font required), this method may be flawed even if you do find the ratio. Also who is to say that "Courier New" has the same spacing/sizing/... on one device as on another?

One sure way to tell this is to use JavaScript, clone the element and check the size values on the fly.

take a look at this fiddle for an example of this

http://jsfiddle.net/zUFwx/ (code references jQuery)

function getSizeOfTextInElement(domElement) {
    var $element = $(domElement),
        $clone = $element.clone(),
        size = {
            width : 0,
            height : 0
        };

    $clone.addClass("sizingClone");

    $(document.documentElement).append($clone);

    size.width = $clone.width();
    size.height = $clone.height();

    $clone.remove();

    return size;
}

var elementToCheck = document.getElementById("checkSizeExample"),
    sizeOfElement = getSizeOfTextInElement(elementToCheck),
    message = "element has a width of " + sizeOfElement.width + "px";

$("#result").text(message);

Answer 3

forgive me if I'm doing thing completely wrong as I've been on SO for a while now but this is the first time I have contributed.

This was something that was bugging me and @Stephen James has really nailed it for what I was trying to acheive.

I had some issues getting it to work and found that the CSS in your fiddle was incorrect

CSS:

#checkSizeExample
{
font-family : Courier;
font-size : 8pt;
}



.sizingClone {                  // this was originally an id tag not a class tag
position : absolute !important;

/* top : 100% !important;
left : 100% !important;         // not sure why but this line was causing the div to
                                // expand to 100%.
visibility: hidden !important;    
width : auto;
height : auto; */
}

I commented out everything but the position in the sizingClone class as I found it unnecessary.

This now works perfectly