Is there a fluent transition possibility for animation font-size in Raphael JS?

Question

So far it seems like it is not fluent, but choppy. E.g. if you have one state attribute with font-size: 14 and want to animate to state with font-size: 16, the transition doesn't look smooth.

It jumps in 2 steps. First change to 15 and then to 16px.

Can it be forced to look more smooth?

I am using Firefox 14 for testing.

My current code:

    var fillerText = {
        "fill" : "#00738f",
        "font-size": 14,
        "font-family": "Arial, Helvetica, sans-serif"
        }
    var fillerTextHover = {
        "fill" : "#00738f",
        "font-size": 16,
        "font-family": "Arial, Helvetica, sans-serif",
        "cursor": "pointer"
        }

text.hover(function () {
       text.animate(fillerTextHover, 500);
               },
  function () {
       text.animate(fillerText, 500);
          }
);

Answer 1

That is a known problem and has nothing to do with Raphael but with sub-pixel rendering:

When viewed in browsers that do not support GPU-powered sub-pixel positioning, the text appears to jump because the text needs to be created using the CPU and the positions of each letter are rounded to the nearest whole pixel.

Even though it's possible with the new CSS 3 animations you can see it's just upscaling the font until the animation is finished and then it's redrawn.

I am sorry that I don't have solution for you, but I haven't seen a smooth cross-browser font size animation with CSS until now.

---

But what you can do to disguise this effect a bit, is to reduce the animation interval time and widen the gap of the font-sizes. The steps are then appearing in a faster time frame and one can't see the single steps.

See this fiddle

Answer 2

I know of no solution using font-size to modify a text element, but I would probably not take that approach anyway. Instead, I would simply use the cufónized path corresponding to the text in question and scale it manually. Please note that this is noticeably smoother than scaling a text element manually, at least in Firefox.

1. Visit Cufón and convert my preferred font to its vector equivalent, selecting Raphael.registerFont as the customization option;

2. Generate my text using paper.print instead of paper.text. This returns a path element instead of a text element.

3. Zoom the resulting path element using transformation instead of font-size. Since paper.print accepts a font-size as an argument, it is easy to compute the desired scale corresponding to your target font-size.

Here's a rough demonstration showing how it works (I put the text on a backing for easier hovering). I hope you'll pardon its numerous inadequacies; it was produced in a bit of haste.