All geek questions in one place

Using the Raphael Library to Draw Left Aligned Text

I am using the Raphael JavaScript library (http://raphaeljs.com/) to draw some graphics in 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 image with two lines of text centered. The css font lines and font size are displayed correctly. But css text-align is ignored. Why?

(tested with Firefox 8.0 and Chrome 15)

+4
source share
2 answers

Rafael does not seem to use the text-align property . Instead, use the text-anchor property, its possible values ​​are start , middle , end or inherit .

In your example, use it as follows:

 paper.text(300, 50, "first very very long line\nshort line").attr({ "font-family":"arial", "font-size":"30", "text-anchor":"start" });
+14
source 
 paper.text(300, 50, "first very very long line\nshort line").attr( {"font-family":"arial", "font-size":"30", "text-anchor":"start"} );
+3
source

Source: https://habr.com/ru/post/1381667/

More articles:


All Articles