Margine durante la stampa della pagina HTML

Question

Sto utilizzando un foglio di stile separato per la stampa. È possibile impostare il margine destro e sinistro nel foglio di stile che imposta il margine di stampa (ad esempio margine sulla carta).

Grazie.

Answer 1

È necessario utilizzare cm o mm come unità quando si specifica per la stampa. L'uso dei pixel farà tradurre il browser in qualcosa di simile a ciò che appare sullo schermo. L'utilizzo di cm o mm garantirà dimensioni coerenti sulla carta.

body 
{ 
    margin: 25mm 25mm 25mm 25mm; 
} 

Per le dimensioni dei caratteri, utilizzare pt per il supporto di stampa.

Nota che l'impostazione del margine sul corpo in stile css sarà non regolare il margine nel driver della stampante che definisce l'area di stampa della stampante, o il margine controllato dal browser (può essere regolabile in anteprima di stampa su alcuni browser) ... Si limiterà a impostare il margine sul documento all'interno dell'area stampabile.

Si dovrebbe anche essere consapevoli del fatto che IE7 ++ regola automaticamente le dimensioni per adattarsi al meglio e fa sì che tutto sia sbagliato anche se si utilizza cm o mm. Per ignorare questo comportamento, l'utente deve selezionare "Anteprima di stampa" e quindi impostare le dimensioni di stampa su 100% (l'impostazione predefinita è Shrink To Fit).

Un'opzione migliore per il controllo totale sui margini stampati consiste nell'utilizzare la direttiva @page per impostare il margine della carta, che influirà sul margine sulla carta all'esterno dell'elemento del corpo HTML, che è normalmente controllato dal browser. Vedi http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.
Attualmente funziona in tutti i principali browser tranne Safari.
In Internet Explorer, il margine viene effettivamente impostato su questo valore nelle impostazioni per questa stampa e, se si esegue l'anteprima, questo verrà visualizzato come predefinito, ma l'utente può modificarlo nell'anteprima.

@page 
{ 
    size: auto; /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 25mm 25mm 25mm 25mm; 
} 

body 
{ 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px; 
} 

risposta correlati: Disabling browser print options (headers, footers, margins) from page?

Answer 2

Se si conosce la dimensione del foglio di destinazione, è possibile posizionare il contenuto in un DIV con quella dimensione specifica e aggiungere un margine a tale DIV per simulare il margine di stampa. Sfortunatamente, non credo che tu abbia un controllo extra sulla funzionalità di stampa oltre a mostrare solo la finestra di dialogo di stampa.

Answer 3

Personalmente suggerirei di utilizzare un'unità di misura diversa da px. Non penso che i pixel abbiano molta rilevanza in termini di stampa; idealmente devi usare:

• punto (pt)
• centimetri (cm)

Sono sicuro che ci sono altri, ed una eccellente articolo sulla stampa-css può essere trovato qui: Going to Print, per Eric Meyer.

Answer 4

aggiornamento, semplice soluzione

@media print { 
    body { 
     display: table; 
     table-layout: fixed; 
     padding-top: 2.5cm; 
     padding-bottom: 2.5cm; 
     height: auto; 
    } 
} 

vecchia soluzione

Creare sezione con ogni pagina, e utilizzare il codice sottostante per regolare i margini, l'altezza e larghezza.

Se si stampa in formato A4.

Poi utente

Dimensione: 8.27in e 11,69 pollici

@page Section1 { 
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0; 
} 



div.Section1 { 
    page: Section1; 
} 

quindi creare un div con tutti i tuoi contenuti in esso.

Answer 5

Suggerisco anche pt contro cm o mm in quanto è più preciso. Inoltre, non riesco a far funzionare @page in Chrome (versione 30.0.1599.69 m) Ignora tutto ciò che ho messo per i margini, grandi o piccoli. Ma puoi farlo funzionare con i margini del corpo sul documento, strano.

Answer 6

Prima di tutto, provo a forzare tutti i miei utenti a utilizzare Chrome durante la stampa perché altri browser creano layout diversi.

una risposta da this question raccomanda:

@page { 
    size: 210mm 297mm; 
    /* Chrome sets own margins, we change these printer settings */ 
    margin: 27mm 16mm 27mm 16mm; 
} 

Tuttavia, ho finito per usare questo CSS per tutte le mie pagine da stampare:

@media print 
{ 
    @page { 
     size: A4; /* DIN A4 standard, Europe */ 
     margin:0; 
    } 
    html, body { 
     width: 210mm; 
     /* height: 297mm; */ 
     height: 282mm; 
     font-size: 11px; 
     background: #FFF; 
     overflow:visible; 
    } 
    body { 
     padding-top:15mm; 
    } 
} 

---

speciale Caso: Tavole lunghe

Quando ho bisogno di stampare una tabella su più pagine, il margin:0 con la @page era in testa ai bordi sanguinamento:

ho potuto risolvere questo grazie a this answer con:

table { page-break-inside:auto } 
tr { page-break-inside:avoid; page-break-after:auto } 
thead { display:table-header-group } 
tfoot { display:table-footer-group } 

Più impostazione dei margini superiore-inferiore per @page:

@page { 
    size: auto; 
    margin: 20mm 0 10mm 0; 
} 
body { 
    margin:0; 
    padding:0; 
} 

Risultato:

vorrei piuttosto preferirei una soluzione che è conciso e funziona con tutti i browser. Per ora, spero che le informazioni di cui sopra possano aiutare alcuni sviluppatori con problemi simili.