rendering ruotato il testo in PDF in PhantomJS

Question

Ho una pagina HTML che contiene alcuni pezzi di testo che vengono ruotati utilizzando il seguente pezzo di CSS:

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

Quando mi tiro sulla pagina direttamente nel browser questo rende come previsto. Quando eseguo il rendering della pagina attraverso PhantomJS, sembra ignorare la rotazione.

Ho eseguito l'aggiornamento a Phantom 2.0.0, ma ho ancora lo stesso problema.

C'è un modo per farlo funzionare?

Answer 1

L'ho provato con PhantomJS 1.9.18 in un'applicazione nodo.

Con -webkit-transform e -webkit-transform-origin il testo sul PDF generato viene ruotato. Senza il prefisso -webkit è ruotato solo quando lo visualizzo con un browser, non renderizzato nel pdf.

così si dovrebbe cambiare il CSS per

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

Answer 2

Phantom JS è basato su Webkit. È necessario utilizzare il prefisso -webkit- per le regole CSS incompatibili.

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