Dobre zasady konfigurowania print css?

Question

Szukam jakiejkolwiek sugestii/reguł/poradników na temat tworzenia przyzwoitego css drukowania, gdy strona jest drukowana. Czy masz coś do zaoferowania?

Answer 1

Oto kilka ogólnych stylów drukowania użyć, aby uzyskać lepsze wydruków:

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

Górny jeden zapobiega podziały stron wewnątrz wiersza tabeli

Styl THEAD sprawia żadnych wierszy w tagu thead powtórz dla każdej strony, na którą rozciąga się ta tabela.

NoPrint to klasa, której używam do pokazywania czegoś na ekranie, ale nie w druku.

I, lubię wyłączać kolory linków.

Answer 2

Uważaj na obrazy tła i kolory. Domyślam się, że domyślne zachowanie IE nie polega na wydrukowaniu obrazów tła lub kolorów.

Answer 3

Masz starą, ale wciąż istotną article from Eric Meyer na liście oddzielnie.

Głównym punktem jest to, aby rozpocząć od nowa, wyraźnie ustalone granice i marging/dopełnienie do 0, białe tło, a „żaden ekran” do jakichkolwiek innych niż istotne elementów do drukowania (jak pewien 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; 
    } 

I stamtąd.

Answer 4

Najpierw przeczytaj ten artykuł z Listu Apart (http://www.alistapart.com/articles/goingtoprint/). Obejmują one wiele podstawowych rzeczy, których szukasz (rozwinięte linki, wybielanie itp.).

Nie należy polegać na podglądzie wydruku, należy sprawdzić cały proces podczas testowania układu wydruku. Aby zaoszczędzić papierową instalację SnagIt lub użyj programu do tworzenia dokumentów Microsoft XPS. Możesz drukować bezpośrednio na obraz i nie marnować żadnego papieru.

Również w przypadku długich artykułów rozważ zmianę czcionki na szeryf. Artykuły w sieci najłatwiej przeczytać w sans-serif (Arial, Verdana), ale w druku wypróbuj Times New Roman lub Georgia.

Answer 5

Kiedy definiujesz styl drukowania, musisz myśleć na papierze i w jednostkach fizycznych.

• Ustaw marginesy w centymetrach (cale) i rozmiarach czcionki w punktach (tak jak w OpenOffice).
• Utwórz klasę, taką jak "screen" lub "noprint", aby łatwo usunąć niechciany materiał .
• Zapomnij o ozdobnym kolorowym tekście. Czarny tekst na białym tle.
• Pomyśl o usunięciu zbędnych obrazów - mogą nie wyglądać tak dobrze w czerni i bieli
• Usuń podkreślenia z linków, a linki mają przyzwoity tekst. Głupio wygląda czytanie "sprawdź tę stronę", gdzie "to" jest podkreślone. Lub jeśli wstawisz href do linku po podkreślonym tekście, może on być bardziej przydatny, ale nie wygląda tak ładnie IMHO.

Answer 6

Jedną rzeczą, która mi się upewnić, aby umieścić w moim wydruku arkusza stylów jest:

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

To pisze rzeczywisty związek obok link tekstowy więc ludzi, którzy drukują dokument będzie wiedział były odnośnikiem jest przypuszczać, iść.

ja również ustawić mój tekst ciała być trochę bardziej czytelne dla druku:

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