Can I use print in Raphael without Cufon?

I am trying to use the print command, mentioned in the documentation for Raphael, to, well, print text with a nice font. [I see that this can be done nicely using the "text" function, and I see examples on the web using fonts generated by Cufon with the print function (as in these examples for 'text' and 'print'), but what I'm doing is as close as I can make it to the example in the documentation and does not work for me, and I'd like to know why.]

Here's my code:

<html>
    <head>
        <title>Raphael Print Test</title>
        <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
        window.onload = function() {
            var paper = new Raphael('holder', 640, 480);
            paper.ellipse(320, 240, 320, 240).attr({stroke: "grey"});
            paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);
            paper.text(50, 50, "Raphaël\nkicks\nbutt!");
        }
        </script>
        <style type="text/css">  
            #holder { width: 640px; height: 480px; border: 2px solid #aaa; }  
        </style>  
    </head>  
    <body>  
        <div id="holder"></div>  
    </body>  
</html>

The important line is:

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

as documented here.

When I try it (in Chrome and Opera on OS X, so far) I get:

a white area to draw on
a grey ellipse
the text "Raphaël\nkicks\nbutt!"

but I do not see: "Test string" anywhere.

I am using Raphael v 1.4.7 (which I thought was current as of yesterday, but I see that a version 1.5.2 is now out).

You cannot use print() without explicitly registering a font (by calling registerFont()), and Cufon seems to be the usually way this is done. Cufon allows you to use a custom font. If you want to use standard fonts, you can use text() and set the font properties using the attr() function.

It took me a while to figure out why the example 'print' function didn't work when embedded into my own page. The simple answer is that you can't use the 'print' function without first calling the 'registerFont' function.

If you look carefully at the source of Raphael's reference page, you won't notice the 'registerFont' call they are using because it is embedded in the 'museo.js' page. There you will see the 'registerFont' call. You will also note that they actually use the print function with the 'Museo' font in their print example code, not the 'Times' font.

At this point I realized that the text() function combined with the attr() function would be sufficient for my needs, so I did not look further into Cufon (sorry).

Here is a simple snippet of code that shows how the text() and attr() functions are used to display something in one of the standard fonts.

paper.text(50, 50, "Raphaël\nkicks\nbutt!").attr(
  {"font-family":"serif",
   "font-style":"italic",
   "font-size":"30"});

You simply call attr() on the output of the text() function, and indicate the properties you want.

Hope that helps you understand the problem and a possible solution if you do not require your custom font.

Recommended topics

Hot tags