Menu
I am using Raphael's JavaScript library (http://raphaeljs.com/) 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)
831
It 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"
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
