Rendering gedrehter Text in PDF in PhantomJS

Question

ich eine HTML-Seite, die mehrere Stücke von Text enthält, das folgende Stück von CSS gedreht verwenden:

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

Wenn ich die Seite direkt im Browser nach oben ziehen diese rendert wie erwartet. Wenn ich die Seite über PhantomJS rendere, scheint sie die Drehung zu ignorieren.

Ich habe auf Phantom 2.0.0 aktualisiert, aber immer noch das gleiche Problem.

Gibt es eine Möglichkeit, dies zu funktionieren?

Answer 1

Ich habe es mit PhantomJS 1.9.18 in einer Knotenanwendung getestet.

Mit -webkit-transform und -webkit-transform-origin wird der Text auf dem generierten PDF gedreht. Mit dem Präfix -webkit wird es nur gedreht, wenn ich es mit einem Browser anschaue, nicht in der PDF gerendert.

So sollten Sie Ihre CSS ändern

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

Answer 2

Phantom JS basiert auf Webkit. Sie müssen das Präfix -webkit- für inkompatible CSS-Regeln verwenden.

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