how to center print()'d raphael text in a space

Question

i am curious as to the proper way to either figure required rendering space for print()'d text or how to have raphael render text from the center outward, as

var an = Raphael("about-navlink", 69, 22), fonts = [0, an.getFont("arialbold")], about_navlink = an.print(0, 10, "about.", fonts[1], 22).attr({fill: "#000000"});

makes text originate from the left. i would like to make the parts of this code dynamic with php or pick a static width within which to center and forego the calculation. i have looked throughout raphael's documentation and i do not find anything in the print() reference that discusses text alignment. any help would be greatly appreciated. thanks!

Answer 1

After Raphael has rendered the path corresponding to your text, let's say printed:

• use Raphael.pathBBox(printed.attr('path')) (doc), compute the negative offset (-width/2 and -height/2)

• create a matrix with var m = Raphael.matrix() that you translate with your offset (m.translate(left, top)) or put offset values directly in the matrix constructor arguments (5th and 6th args for left and top)

• then you have two ways to apply it:

  1. use Raphael.mapPath to definitely apply the matrix (it computes a path string you have to set with:

     printed.attr(
         'path',
         Raphael.mapPath(printed.attr('path'), m)
     );
     

  2. or use it like a simple transform:

     printed.transform(
         m.toTransformString()
     );
     

     If there were other transforms on this element, use

     '...' + m.toTransformString()
     

     to make your transform happening before existing ones, and

     m.toTransformString() + '...'
     

     to make your transform happening after.