Stampa testo ruotato da pagina web

Question

Eseguo un'applicazione Web che genera alcuni report per gli utenti. Per uno di questi rapporti, ho bisogno di stampare il testo ruotato di 90 gradi. Ho provato molti modi ma non ho trovato un modo per stamparlo correttamente. Posso visualizzare il testo su quel pop-up di 90 gradi ruotato con la classe css sotto, ma quando viene inviato alla stampante come al solito il testo viene ruotato in forma normale e stampato. Capisco il motivo per cui la stampante non stampa come viene visualizzata sul browser, ma esiste un modo per farlo? Il linguaggio di scripting per questo sito è PHP.

AGGIORNAMENTO: posso stampare il testo ruotato su una pagina statica ma non è possibile stampare il testo ruotato quando è su un pop-up. In realtà ora ho bisogno di aiuto per stampare una pagina con lo stile CSS intatto

Edit: Sarà anche abbastanza utile se posso stampare tramite Firefox solo come il client utilizza Mozilla Firefox.

.rotate{ 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    width:400; 
    height:400; 
} 

Questo è come il pop-up mostra il testo e come voglio stampare il testo

molto apprezzato!

Answer 1

Hmm ... Questo funziona per me ...Testato su:

• Firefox 23 (Win7, OSX)
• Chrome 28 (Win7, OSX)
• Safari 6 (OSX)

Devo ammettere che in realtà non stampare, ma reindirizzato l'output di stampa in PDF (funzionalità a livello di sistema operativo, niente a che fare con Firefox).

Accertarsi che le regole che definiscono la rotazione non contengano alcuni media query collegati disabilitandoli in media="print".

ho usato il seguente documento di esempio, che si presenta come un pratico di dati-URI:

data:text/html,%3Cp%20style=%22%20-webkit-transform:%20rotate%28-90deg%29;%20transform:%20rotate%28-90deg%29;%20border:%201px%20solid%20red;%20padding:%201ex;%20width:%20100px;%20%22%3Etest%20rotate%3C/p%3E 

Answer 2

È possibile utilizzare PHP per generare un'immagine del testo ruotato e quindi stamparlo. La cosa bella delle immagini è che non dipende affatto dal browser. Ci sono alcune soluzioni (già menzionate in questa discussione) che funzionano, ma sono testate solo su alcuni ultimi browser. Questa soluzione non si preoccupa del browser se il browser è in grado di stampare immagini, ma si preoccupa solo di un server che supporta PHP5.

ecco come il file PHP (image_gen.php) dovrebbe apparire:

<?php 
// create a 100*100 image 
$im = imagecreatetruecolor(100, 100); 

// Write the text 
$textcolor = imagecolorallocate($im, 0xFF, 0xFF, 0xFF); 
imagestringup($im, 3, 40, 80, $_GET['text'], $textcolor); 
header('Content-type: image/png'); 
// Save the image 
imagepng($im); 
imagedestroy($im); 
?> 

Vedi this link...

Questo file prende il testo da stampare in verticale come un parametro get in questo modo:

http://example.com/example.html?text=This+Is+The+Text+To+Be+Printed+Vertically

e restituisce un'immagine di quel testo stampato verticalmente. Così si può fare questo nel file HTML principale che si desidera stampare:

<img src = "image_gen.php?text=Hello world"> 

NOTA BENE: i valori specificati nel codice di esempio sono valori solo di esempio, testo e colori, modificarli in base alle proprie finalità ...

ecco come si inserisce quell'immagine nel file HTML. Ora quando stampi quell'immagine devi far stampare l'immagine così com'è, cioè con testo verticale ...

Qui, ho preso una stampa e ho scattato una foto per mostrarti che funziona davvero, io sappi che il testo non è chiaramente visibile, ma puoi capire che è verticale.

speranza che aiuta ...

Answer 3

Questo dovrebbe funzionare. Il seguente è stato testato in Chrome:

<script type="text/javascript"> 
     var printWindow = window.open(); 
     printWindow.document.write('<style type="text/css">\ 
       .rotate{\ 
       -webkit-transform: rotate(-90deg);\ 
       -moz-transform: rotate(-90deg);\ 
       filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);\ 
       width:400;\ 
       height:400;\ 
      }\ 
    </style>\ 
    <div class="rotate">Rotated Content</div>'); 

    printWindow.print(); 
</script> 

(Si noti ho messo backslash per sfuggire entra.)

Se si preferisce basta un telaio di stampa invisibile (l'utente fa clic su un pulsante e una stampa viene visualizzata la finestra di dialogo), utilizzare un iframe. Basta notare che Opera (probabilmente fino a quando non passano a materiale WebKit) non gli piace.

Answer 4

Se il testo viene ruotato durante la visualizzazione sullo schermo, ma non durante la stampa, è possibile che il CSS venga applicato solo allo screen e non al supporto print.

Assicurarsi di impostare il valore di attributo media-all nel <link> tag:

<link rel="stylesheet" type="text/css" href="style.css" media="all"> 

E evitare di usare screen se si desidera che il file CSS di indirizzare più di semplici schermi di computer:

<link rel="stylesheet" type="text/css" href="style.css" media="screen"> 

Potresti anche avere due file CSS dedicati, uno per gli schermi dei computer e uno per la stampa, per un maggiore controllo:

<link rel="stylesheet" type="text/css" href="style.css" media="screen"> 
<link rel="stylesheet" type="text/css" href="style-print.css" media="print"> 

Maggiori informazioni su l'attributo media: http://www.w3schools.com/tags/att_link_media.asp

Cheers!