Raphael js text positioning: centering text in a circle

Question

I am using Raphael js to draw circled numbers. The problem is that each number has a different width/height so using one set of coordinates to center the text isn't working. The text displays differently between IE, FF, and safari. Is there a dynamic way to find the height/width of the number and center it accordingly?

Here is my test page:

http://jesserosenfield.com/fluid/test.html

and my code:

function drawcircle(div, text) {      var paper = Raphael(div, 26, 26); //<<     var circle = paper.circle(13, 13, 10.5);     circle.attr("stroke", "#f1f1f1");     circle.attr("stroke-width", 2);     var text = paper.text(12, 13, text); //<<     text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});     text.attr("fill", "#f1f1f1"); }  window.onload = function () {     drawcircle("c1", "1");     drawcircle("c2", "2");     drawcircle("c3", "3"); }; 

Thanks very much!

Answer 1

(Answer rewritten): Raphael.js centers text nodes both horizontally and vertically by default.

"Centering" here means that the x, y argument of paper.text() method expects the center of the text's bounding box.

So, just specifying the same x, y value as the circle should produce the desired result:

var circle = paper.circle(13, 13, 10.5); var text = paper.text(13, 13, "10"); 

(jsFiddle)

Relevant source code:

• source line responsible for vertical alignment
• source line responsible for horizontal alignment

Answer 2

Maybe this:

var paper = Raphael(div, 26, 26); //<< var circle = paper.circle(13, 13, 10.5); circle.attr("stroke", "#f1f1f1"); circle.attr("stroke-width", 2); var text = paper.text(0, 0, text); //<< text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'}); text.attr("fill", "#f1f1f1"); text.translate((35 - text.getBBox().width)/2, (45 - text.getBBox().height)/2);