Come posso definire una classe CSS per impostare la pagina stampata in modalità orizzontale?

Ho creato un foglio di stile CSS che può stampare una pagina HTML in modalità orizzontale con la seguente regola @media:Come posso definire una classe CSS per impostare la pagina stampata in modalità orizzontale?

@media print{ 
     @page {size: landscape;} 
    }

Non voglio stampare tutte le pagine HTML che caricano questo foglio di stile nel paesaggio modalità. Idealmente, mi piacerebbe essere in grado di specificare una classe di paesaggio che farebbe questo.

Mentre l'HTML viene generato, potrei sempre creare un file landscape.css separato e aggiungerlo all'intestazione secondo necessità, ma speravo che ci potesse essere un modo più pulito per farlo con le classi.

Come follow-up, ho anche provato quanto segue senza fortuna:

@page rotated { 
    size: landscape; 
} 
@media print{ 
    .rotate { 
    page: rotated; 
    } 
}

sto probabilmente solo battendo la testa contro un muro di una soluzione che appare solo a lavorare nei browser basati su WebKit. La dimensione di @page: l'impostazione orizzontale non sembra funzionare in Firefox o (sorpresa, sorpresa) ie10.

fonte

2013-05-20 Alan Krause

Controlla http://stackoverflow.com/questions/138422/landscape-printing-from-html per la tua risposta. Può essere una domanda doppia ... – CoderOfHonor

Ho già consultato questa domanda e non vedo che risponda alla domanda su come applicare le regole @page a una determinata classe CSS quando il supporto è "stampa". –

Oh, ok. Non ho letto correttamente la domanda. – CoderOfHonor

penserei che il modo migliore per raggiungere questo obiettivo sarebbe quello di effettuare le seguenti operazioni:

@media print{ 
    .class-name{ 
     @page{ 
      size:landscape; 
     } 
    } 
}

non ho ancora testato questo, quindi mi corregga se sbaglio. In bocca al lupo!

fonte

2013-05-20 17:47:35 CoderOfHonor

Provato questo, ma non andare. Ho anche provato @ page.class-name (che mi è sembrato alquanto intuitivo), che inoltre non funziona. Grazie per il tentativo, però. –

Che ne dici? – CoderOfHonor

(Ho modificato la mia risposta) – CoderOfHonor

Non ho davvero capito quello che hai fatto con:

@page rotated { 
    size: landscape; 
} 
@media print{ 
    .rotate { 
    page: rotated; 
    } 
}

In ogni caso, si desidera stampare alcune pagine in modalità landscape mentre le altre pagine devono essere in modalità predefinita (portrait). Quindi propongo questo:

@media print { 
    body.special-page { 
     transform:rotate(180deg); 
     -webkit-transform: rotate(91deg); 
     -moz-transform: rotate(10deg); 
     -ms-transform:rotate(20deg); 
    } 
}

e l'aggiungeremo .special-page per body (Attraverso JS forse) come:.

<body class="special-page"> 
    <p> 
    Lorem ipsum dolor sit amet, his mucius sensibus omittantur 
et, ex cum nemore iuvaret. Voluptua constituam ad nam. Est ei etiam 
labitur, instructior definitiones ad sit. Ut probo assum 
scribentur pro. Dicant epicuri ea pri. 
    </p> 
</body>

Acquista questo jsbin

Quello che fa è la scrittura stili specifici per print modalità di una pagina tramite @media print e stiamo ruotando l'intera pagina 180deg in modo che funzioni come in modalità orizzontale se body contiene .special-page classe.

Non sono riuscito a trovare un altro modo utilizzando @page e le classi.

fonte

2016-05-24 11:37:38

Purtroppo, siamo attualmente in grado di utilizzare il tipo di pagina selettori per le media query al di là della dotazione :left, :right, :first e :blank pseudo-classi.

https://www.w3.org/TR/css3-page/#page-selector-and-context

Il W3C è comunque prendendo in considerazione l'aggiunta di altre pagine pseudo-classi per i futuri livelli dei CSS [@page :nth(4) { ... } o @page (.class) { ... }]. Non sono sicuro del motivo per cui le pagine con nome non sono state in grado di funzionare, ma a partire dal 26 gennaio 2016, le query multimediali di livello 4 (compresa la regola @page) possono includere intervalli, negazioni e query multimediali personalizzate mediante script. Inoltre, la proprietà dimensioni è attualmente supportata solo in Chrome.

https://www.w3.org/TR/mediaqueries-4/

Questo è il più vicino ho potuto ottenere utilizzando solo HTML e CSS, che si applica orientamento orizzontale per pagine pari. So che questa non è una soluzione esatta e funziona solo su Chrome.

<html> 
    <head> 
     <style> 
      .landscape { 
       page-break-before: always; 
      } 
      @page :left { 
       size: landscape; 
      } 
     </style> 
    </head> 
    <body> 
     <p>This is a normal paragraph.</p> 
     <p class="landscape">This is in landscape form, following a page break.</p> 
    </body> 
</html>

fonte

2016-05-26 20:26:50

Sembra che il costrutto '@page (.class) {...}' sia quello che speravo di trovare supportato. Grazie mille per la tua risposta dettagliata! –

Contento di essere di qualche aiuto! E quando dico supportato in Chrome, intendo dire browser basati su WebKit, incluso Opera. –

Il trucco è l'attributo media impostato che a print simili:

<style media="print"></style>

quindi utilizzare questo CSS all'interno di tale style elemento:

@page { 
    size: landscape; 
}

Ecco un esempio di lavoro che consente di stampare in entrambe le direzioni:
(Testato e funzionante su Chrome, Edge & Firefox.)

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Sorry for using so much Lorem ipsum O:)</title> 
    <style media="print"> 
    /* this prints the page in landscape by default. */ 
    @page { 
     size: landscape; 
    } 
    /* If you would like to rotate the body element: */ 
    /*body { 
     -webkit-transform: rotate(90deg); 
     -moz-transform: rotate(90deg); 
     -o-transform: rotate(90deg); 
     -ms-transform: rotate(90deg); 
     transform: rotate(90deg); 
    }*/ 
    /* If you would like to rotate the body element in the other direction: */ 
    /*body { 
     -webkit-transform: rotate(-90deg); 
     -moz-transform: rotate(-90deg); 
     -o-transform: rotate(-90deg); 
     -ms-transform: rotate(-90deg); 
     transform: rotate(-90deg); 
    }*/ 
    </style> 
</head> 
<body> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
</body> 
</html>

Buona fortuna e tutto il meglio.

fonte

2016-05-27 06:05:13

Hehe, [questo non funziona molto bene] (http://i.stack.imgur.com/xeeTu.png). Risultato viene ruotato il testo ancora in verticale e con una massiccia quantità di spazio bianco o quando cambiato in paesaggio manualmente [è lateralmente] (http://i.stack.imgur.com/FnQpq.png) ... – misterManSam

@misterManSam ho pensato l'OP voleva che il * contenuto della pagina * fosse ruotato e ** non ** la * pagina fosse in orizzontale *, haha grazie per avermelo fatto notare. Ho aggiornato la mia risposta :) –

Ho creato un documento MS vuoto con l'impostazione orizzontale e l'ho aperto nel blocco note. Copiato e incollato il seguente alla mia pagina html

<style type="text/css" media="print"> 
@page Section1 
{size:11 8.5in; 
margin:.5in 13.6pt 0in 13.6pt; 
mso-header-margin:.5in; 
mso-footer-margin:.5in;

voce dell'Elenco

mso-paper-source: 4;} div.Section1 {page: Section1;}
put testo/immagini/altre cose

L'anteprima di stampa mostra le pagine in una dimensione orizzontale. Questo sembra funzionare perfettamente su IE e Chrome, Puoi vedere anche questo

fonte

2016-05-27 08:44:24

Come posso definire una classe CSS per impostare la pagina stampata in modalità orizzontale?

risposta

Problemi correlati