7

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?

ced-b
  • 3,957
  • 1
  • 27
  • 39

2 Answers2

14

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%;
}
Ello
  • 907
  • 1
  • 15
  • 33
0

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%;   
}
Charlie
  • 22,886
  • 11
  • 59
  • 90