Buone regole per la configurazione di css print? [chiuso]

Question

Sto cercando suggerimenti / regole / guide su come fare un css di stampa decente per quando viene stampata una pagina web. Hai qualcosa da offrire?

Answer 1

Ecco alcuni stili di stampa generali da utilizzare per ottenere stampe migliori:

/* Print styles */
@media print 
{
    tr, td, th {page-break-inside:avoid}
    thead {display:table-header-group}
    .NoPrint {visibility:hidden; display:none}
    a {color:#000000}
}

Quello in alto impedisce le interruzioni di pagina all'interno di una riga della tabella

Lo stile thead fa ripetere ogni riga nel tag thead per ogni pagina su cui si estende la tabella.

NoPrint è una classe che uso per mostrare qualcosa sullo schermo, ma non in stampa.

E, mi piace disattivare i colori dei collegamenti.

Answer 2

Una cosa che mi assicuro di inserire nel mio foglio di stile di stampa è:

a[href^="http://"]:after{
    content: " (" attr(href) ") ";
}

Questo scrive il link effettivo accanto al testo del link in modo che le persone che stampano il documento sapranno dove il link dovrebbe andare.

Ho anche impostato il testo del mio corpo in modo che sia un po 'più leggibile per la stampa:

body{
    font: 0.9em/1.5em Georgia, "Times New Roman", Times, serif;
}

Answer 3

Prima leggi questo articolo da A List Apart ( http://www.alistapart.com/articles/ goingtoprint / ). Coprono molte delle nozioni di base che stai cercando (collegamenti espansi, imbiancature, ecc.).

Non fare affidamento sull'anteprima di stampa, assicurati di eseguire l'intero processo durante il test di un layout di stampa. Per risparmiare carta, installa SnagIt o usa il writer di documenti Microsoft XPS. Puoi stampare direttamente su un'immagine e non sprecare carta.

Anche per articoli lunghi, considera di cambiare il tuo carattere in serif. Gli articoli sul web sono più facili da leggere in sans-serif (Arial, Verdana) ma in stampa prova Times New Roman o Georgia.

Answer 4

Hai questo vecchio ma ancora rilevante articolo di Eric Meyer in un elenco a parte.

Il punto principale è ricominciare da capo, impostando esplicitamente i bordi e spostando / imbottitura su 0, sfondo bianco e "visualizzare nessuno". a tutti gli elementi non essenziali per la stampa (come alcuni menu)

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

body {
    background: white;
    }

#menu {
    display: none;
    }

#wrapper, #content {
    width: auto; 
    margin: 0 5%;
    padding: 0; 
    border: 0;
    float: none !important;
    color: black; 
    background: transparent;
    }

E vai da lì.

Answer 5

Quando definisci lo stile di stampa, devi pensare su un foglio e in unità fisiche.

• Imposta i margini in centimetri (pollici) e le dimensioni del carattere in punti (proprio come in OpenOffice).
• Crea una classe come 'screen' o 'noprint' per poter rimuovere facilmente le indesiderate materiale.
• Dimentica il testo colorato di fantasia. Testo nero su sfondo bianco.
• Pensa a rimuovere le immagini superflue: potrebbero non essere così belle in bianco e nero
• Rimuovi la sottolineatura dai link e fai in modo che i link abbiano un testo sano. Sembra sciocco leggere " controlla questa pagina " dove " questo " è sottolineato. O se metti l'href del link dopo il testo sottolineato, allora può essere più utile ma non sembra così bello IMHO.

Answer 6

Fai attenzione alle immagini e ai colori di sfondo. Penso che il comportamento predefinito di IE non sia quello di stampare immagini o colori di sfondo.