Rendering rotated text to PDF in PhantomJS

Question

I have a HTML page, which contains several pieces of text that are rotated using the following piece of CSS:

.rotate {
    transform: rotate(90deg);
    transform-origin: 50% 50%;
}

When I pull up the page directly in the browser this renders as expected. When I render the page through PhantomJS, it seems to ignore the rotation.

I upgraded to Phantom 2.0.0, but still the same issue.

Is there any way to make this work?

Answer 1

I tested it with PhantomJS 1.9.18 in a node application.

With -webkit-transform and -webkit-transform-origin the text on the generated PDF is rotated. Withouth the -webkit prefixes its only rotated when I view it with a browser, not rendered in the pdf.

So you should change your CSS to

.rotate {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

Answer 2

Phantom JS is based on Webkit. You need to use -webkit- prefix for incompatible css rules.

.rotate {
    -webkit-transform: rotate(90deg);   
    -webkit-transform-origin: 50% 50%;   
}