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!

ento · Answer 1 · 2012-07-26T09:08:34.263

(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");

Example output

(jsFiddle)

Relevant source code:

Jan Tojnar · Answer 2 · 2010-04-03T21:53:35.780

9

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);

edited Apr 03 '10 at 21:53

answered Apr 03 '10 at 21:42

Jan Tojnar

5,306
3
29
49

1

Output of this code looks better: text.translate(paper.width/2, paper.height/2); – Jan Tojnar Apr 05 '10 at 15:23
`text.getBBox().width` doesn't work as it always returns 0 :( – stej Dec 07 '10 at 10:31

score 3 · Answer 3 · edited Oct 08 '12 at 10:41

3

Use this attribute: 'text-anchor':'start':

paper.text( x, y, text ).attr( {'text-anchor':'start'} );

edited Oct 08 '12 at 10:41

Grzegorz Rożniecki

27,415
11
90
112

answered Jun 14 '11 at 23:49

Thanks! This is so usefull. Had a lot of troubles aligning texts inside raphaels SVG, but thanks to this all my problems are gone! You rock :D – taxicala Nov 10 '14 at 14:48

score 0 · Answer 4 · answered Dec 09 '10 at 23:11

The Rotating Text Exactly example (listed in the right-hand column of the page, or here in github), discusses putting text in a precise position, along with, as usual, extra steps required to make things work in IE.

It does find a bounding box for the text; I imagine it is straightforward to move the text by half the bounding box as Jan suggested.

Raphael js text positioning: centering text in a circle

4 Answers4