Rendering obrócony tekst do PDF w PhantomJS

Question

Mam stronę HTML, która zawiera kilka fragmentów tekstu, które są obracane za pomocą następującego kawałek CSS:

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

Kiedy otwieramy stronę bezpośrednio w przeglądarce tym renderuje zgodnie z oczekiwaniami. Kiedy renderuję stronę przez PhantomJS, wydaje się, że ignoruje rotację.

Zaktualizowałem do wersji Phantom 2.0.0, ale nadal mam ten sam problem.

Czy istnieje sposób, aby to zadziałało?

Answer 1

Przetestowałem to z PhantomJS 1.9.18 w aplikacji węzła.

Z -webkit-transform i -webkit-transform-origin tekst na wygenerowanym pliku PDF jest obracany. Withouth przedrostki -webkit są jedynymi obracanymi, gdy przeglądam je za pomocą przeglądarki, a nie są renderowane w pliku pdf.

Należy więc zmienić CSS

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

Answer 2

Phantom JS jest oparte na Webkit. Musisz użyć prefiksu -webkit- dla niekompatybilnych reguł css.

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