0

I would like to access data about the font I'm using to render data on screen. For example, I would like to be able to know the size of the black lines that compose a specific instance of a font (i.e., bold courier would have letter "I" with the main vertical line of size 2 pixels for font-size 10) and/or the space inside the letters with white space in it (i.e., B, A, but also C, O, etc.). I know I can access the name of the font being used (or decide it myself through CSS), but the point is not knowing the font I'm using (or manipulating it), but accessing the specific data about it.

Thanks!

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

1 Comment

Thank you for the effort in your reply, I appreciated it. I'll leave this open in case there are more accurate answers. In your experience would this be possible with other programming languages?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.