Raphael js text positioning: centering text in a circle
Posted
by j-man86
on Stack Overflow
See other posts from Stack Overflow
or by j-man86
Published on 2010-03-30T19:06:30Z
Indexed on
2010/04/03
21:53 UTC
Read the original article
Hit count: 1652
Hey everyone,
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!
© Stack Overflow or respective owner