I am using Raphael's JavaScript library (/) to draw some graphics into my web-application. I tried the following code:
<html>
<head>
<title></title>
<script type="text/javascript" src="raphael/raphael.js"></script>
</head>
<body>
<script>
var paper = Raphael(10, 50, 600, 200);
paper.text(300, 50, "first very very long line\nshort line").attr(
{"font-family":"arial",
"font-size":"30",
"text-align":"left"}
);
</script>
</body>
</html>
The result is a graphic with two lines of text that are centered. The css font-family and font-size are displayed correct. But the css text-align is ignored. Why?
(tested with Firefox 8.0 and Chrome 15)
I am using Raphael's JavaScript library (http://raphaeljs./) to draw some graphics into my web-application. I tried the following code:
<html>
<head>
<title></title>
<script type="text/javascript" src="raphael/raphael.js"></script>
</head>
<body>
<script>
var paper = Raphael(10, 50, 600, 200);
paper.text(300, 50, "first very very long line\nshort line").attr(
{"font-family":"arial",
"font-size":"30",
"text-align":"left"}
);
</script>
</body>
</html>
The result is a graphic with two lines of text that are centered. The css font-family and font-size are displayed correct. But the css text-align is ignored. Why?
(tested with Firefox 8.0 and Chrome 15)
Share Improve this question asked Nov 17, 2011 at 11:20 user1027167user1027167 4,4587 gold badges35 silver badges41 bronze badges 1- ok I just found the answer: use "text-anchor":"start" instead of "text-align":"left". – user1027167 Commented Nov 17, 2011 at 11:30
2 Answers
Reset to default 14It seems that Raphael doesn't use text-align property. Instead use the text-anchor property, its possible values are start, middle, end or inherit.
In your example use it like this:
paper.text(300, 50, "first very very long line\nshort line").attr({
"font-family":"arial",
"font-size":"30",
"text-anchor":"start"
});
paper.text(300, 50, "first very very long line\nshort line").attr(
{"font-family":"arial",
"font-size":"30",
"text-anchor":"start"}
);