Raphael JS and Text positioning?

Question

I'm trying to position text within the SVG canvas, by supplying x, y coordinates

var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");

but does not position the text like all other objects...

x, y coordinates specify the center of the object! Not the "left and top most" pixel!

I would like to "left align" the text along a line, same as standard HTML.

Help would be very much appreciated.

score 151 · Answer 1 · answered Sep 29 '10 at 19:57

151

Text-anchor property for text method is set to 'middle' by default.

If you want to left align it then change text-anchor in attributes for the object:

var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!").attr({'text-anchor': 'start'});

answered Sep 29 '10 at 19:57

Dasha Salo

5,159
5
26
28

1

Probably the 4th time for me to look this question up and get your answer. First to upvote. ;) – pp19dd Jun 17 '13 at 03:37
1

but is there a top anchor? – john-jones Nov 03 '13 at 11:08

Jimmy Chandra · Answer 2 · 2012-09-04T01:31:14.223

20

I know you didn't say you need to vertical align it to top, but if you want to use paper.text instead of paper.print... and would like to vertical align to be top.

Try this:

function alignTop(t) {
    var b = t.getBBox();
    var h = Math.abs(b.y2) - Math.abs(b.y) + 1;

    t.attr({
        'y': b.y + h
    });
}

And just pass the Raphael text object to it. It will top align it for you. and just call that function

edited Sep 04 '12 at 01:31

answered Sep 03 '12 at 07:29

Jimmy Chandra

6,472
4
26
38

As You said @RadiantHex didn't ask for vertical align, but at least it helped me, thanks! – karlisup Feb 04 '13 at 12:56
Thank you good sir for the t.attr({y:}) reference, you saved my butt! :) – streetlogics Sep 11 '14 at 18:26

score 10 · Accepted Answer · answered Jan 23 '10 at 23:40

10

Resolved!

By using the following

paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);

it now aligns text on the left.

answered Jan 23 '10 at 23:40

RadiantHex

24,907
47
148
244

8

paper.print() is not the same as paper.text() because print() returns a set of objects where each object is a path resembling a character. See @dasha salo's answer for the correct "text" solution. Unfortunately there is no vertical alignment property currently. – MKroehnert Feb 24 '11 at 22:34

ciga · Answer 4 · 2013-10-19T03:02:47.863

Following code works well in IE , Chrome (Firefox not tested):

var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!"),
    b = t._getBBox();
t.translate(-b.width/2,-b.height/2);

Explanation:

in Raphael , text is centered around your given x & y by default, you can set left align with:

t.attr({'text-anchor':'start'})

but you have no attribute to set it top align. I firstly tried :

var b=t.getBBox();

but it returned NaN in IE, so I turned to:

var b=t._getBBox();

_getBBox() is undocumented but used internally by Raphael itself , and it works!

Hope it helps.

Raphael JS and Text positioning?

4 Answers4

Resolved!

Linked