title: Raphael js text positioning: centering text in a circle
body: <p>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?</p>
  
  <p>Here is my test page:</p>
  
  <p><a href="http://jesserosenfield.com/fluid/test.html" rel="noreferrer">http://jesserosenfield.com/fluid/test.html</a></p>
  
  <p>and my code: </p>
  
  <pre><code>function drawcircle(div, text) { 
      var paper = Raphael(div, 26, 26); //&lt;&lt;
      var circle = paper.circle(13, 13, 10.5);
      circle.attr("stroke", "#f1f1f1");
      circle.attr("stroke-width", 2);
      var text = paper.text(12, 13, text); //&lt;&lt;
      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");
  };
  </code></pre>
  
  <p>Thanks very much!</p>