Getting text size without using boundingBox function in Raphael JavaScript library

Question

I am trying to create some buttons with text in javascript using the Rahpael library. I would like to know the size of the stylized text before drawing to avoid this so that I can create the correct background (button). Also, I would like to avoid drawing text outside the canvas / paper (the position of the text is the position of its center).

I can use the Raphaels method getBBox (), but I need to create (draw) the text in the first place to do this. So I draw the text to get the size so that it can draw it in the correct position. This is ugly. Therefore, I am looking for a general method for evaluating metrics of stylized text for a given font, font size, family ...

It is possible to do this using the HTML5 canvas http://www.html5canvastutorials.com/tutorials/html5-canvas-text-metrics/ , but Raphael does not use the canvas. Is it possible to get text metrics using Raphael or plain Javascript?

Answer 1

I know this seems sloppy, but you shouldn't have trouble drawing text, measuring it, then drawing a button and moving the label. To be safe, just take it off the screen:

var paper = Raphael(0, 0, 500, 500);

var text = paper.text(-100, -100, "My name is Chris");

//outputs 80 12
console.log(text.getBBox().width, text.getBBox().height);

If it REALLY offends your feelings, however - and I will understand! - you can easily create an object to remember the width of each character for a given font:

var paper = Raphael(0, 0, 500, 500),
    alphabet = "abcdefghijklmnopqrstuvwxyz";
    font = "Arial",
    charLengths = {},
    ascii_lower_bound = 32,
    ascii_upper_bound = 126;

document.getElementById("widths").style.fontFamily = font;

for (var c = ascii_lower_bound; c <= ascii_upper_bound; c += 1) {
    var letter = String.fromCharCode(c);    
    var L = paper.text(-50, -50, letter).attr("font-family", font);
    charLengths[letter] = L.getBBox().width;
}

//output

for (var key in charLengths) if (charLengths.hasOwnProperty(key)) {
    var row = document.createElement("tr");
    row.innerHTML = "<td>" + key + "</td><td>" + charLengths[key] + "</td>";    
    document.getElementById("widths").appendChild(row);    
}

Answer 2

. .

. canvas viewBox, .

// set it up -- put the variable somewhere globally or contextually accessible, as necessary
var textRuler = paper.text( -10000, -10000, '' ).attr( { fill: 'none', stroke: 'none' } );

function getTextWidth( text, fontFamily, fontSize )
{
    textResult.attr( { text: text, 'font-family': fontFamily, 'font-size': fontSize } );
    var bbox = textResult.getBBox();
    return bbox.width;
}

. .

Cufonized Font

cufonized, DOM . , , , canvas measureText . , - ( !)

//  font should be the result of a call to paper.[getFont][2] for a cufonized font
function getCufonWidth( text, font, fontSize )
{
    var textLength = text.length, cufonWidth = 0;
    for ( var i = 0; i < textLength; i++ )
    {
        var thisChar = text[i];
        if ( ! font.glyphs[thisChar] || ! font.glyphs[thisChar].w )
            continue;  //  skip missing glyphs and/or 0-width entities
        cufonWidth += font.glyphs[thisChar].w / font.face['units-per-em'] * fontSize;
    }
    return cufonWidth;
}

cufonized fonts - , , . , .