Rotating text in Raphael is scrambling text

Question

I'm trying to do translate and rotate text and it seems to be scrambling my text pretty badly. I have an example here. http://jsfiddle.net/WAbZz/

var paper = Raphael("ocular", 500, 500);
var label = paper.text(100, 100, "Coeur et Artères");
label.attr('fill', '#555');
label.attr('font-size', '12px');
label.attr('cursor', 'pointer');

//label.transform("t200,200");// translate only
//label.transform("r98");// rotate only
label.transform("t200,200r98");// translate and rotate

The issue seems to happen on just rotate as well. There are commented out section to just translate and just rotate, so there is context if testing.

Am I doing something wrong, or should I be using a different method to do the translate and transform?

Thanks

That looks like it's working as it should. What behavior were you expecting/needing? Don't forget that you can specify which point you'd like the rotate directive to rotate around -- i.e., "r98,0,0" will produce different results than "r98,200,200". — Kevin Nielsen, Feb 25 '13 at 23:22
The spacing and the bottom alignment are inconsistent. I updated the fiddle. http://jsfiddle.net/WAbZz/1/ you can see how a horizontal label looks fine. but rotating it messes with the spacing and alignment. — JoshLfive, Feb 27 '13 at 13:44

Graeme Wicksted · Answer 1 · 2013-08-22T17:48:10.457

I ran into this exact issue. Unfortunately you have to cufonize the specific font by generating a proprietary JavaScript version of it (can be done here) - make sure to select for Raphael.

Make sure to link the cufon font js file after the Raphael js file. These files can be quite large. Only include the glyphs you intend to use and ensure gzip is enabled in your web server.

The file should be calling call registerFont to register it with Raphael (not Cufon).

You must now use print instead of text. You should no longer set font-family, font-size, and letter-spacing as you would for a native or Google Web Font (they are parameters to the print function). NOTE: setting attr values is different with print than with text (print is a 'set' of paths).

Also note there are alignment differences with print vs text. This can make rotation difficult.

<script src="raphael.js"></script>
<script src="my-cufon-font-file.js"></script>

<div id="ocular"></div>

<script>

    var angle = 95; // degrees

    var paper = Raphael("ocular", 500, 500);
    paper.print(100, 100, "Coeur et Artères", paper.getFont('My Cufon Font Name'), 12, 'middle', '1')
        .transform('R' + angle)
        .attr({
            fill: '#555',
            cursor: 'pointer'
        });
</script>

Rotating text in Raphael is scrambling text

1 Answers1