Margines podczas drukowania strony html

Question

Używam oddzielnego arkusza stylów do drukowania. Czy możliwe jest ustawienie prawego i lewego marginesu w arkuszu stylów, który ustawia margines wydruku (tj. Margines na papierze).

Dzięki.

Answer 1

Powinieneś używać cm lub jako jednostki podczas określania drukowania. Użycie pikseli spowoduje, że przeglądarka przetłumaczy go na coś podobnego do tego, jak wygląda na ekranie. Użycie formatu cm lub mm zapewni spójny rozmiar na papierze.

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

Dla rozmiarów czcionek, użyj pt dla mediów drukowanych.

Należy pamiętać, że ustawienie marginesu na ciele w stylu css będzie nie dostosować marginesu w sterowniku drukarki, który definiuje obszar wydruku drukarki lub margines kontrolowane przez przeglądarkę (może być regulowany w podglądzie wydruku na niektóre przeglądarki) ... Po prostu ustawi margines na dokumencie wewnątrz obszaru drukowania.

Należy również pamiętać, że IE7 ++ automatycznie dostosowuje rozmiar do najlepszego dopasowania i powoduje, że wszystko jest nie tak, nawet jeśli używasz cm lub . Aby zastąpić to zachowanie, użytkownik musi wybrać "Podgląd wydruku", a następnie ustawić rozmiar wydruku na 100% (domyślnie jest to Shrink To Fit).

Lepszą opcją dla pełnej kontroli nad wydrukowanymi marginesami jest użycie dyrektywy @page do ustawienia marginesu papieru, który wpłynie na margines na papierze poza elementem html, który jest zwykle kontrolowany przez przeglądarkę. Zobacz http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.
Ta funkcja działa obecnie we wszystkich popularnych przeglądarkach z wyjątkiem Safari.
W eksploratorze internetowym margines jest w rzeczywistości ustawiony na tę wartość w ustawieniach dla tego drukowania, a jeśli robisz Podgląd, otrzymasz to jako domyślne, ale użytkownik może go zmienić w podglądzie.

@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; 
} 

odpowiedź pokrewne: Disabling browser print options (headers, footers, margins) from page?

Answer 2

Jeśli znasz docelowy rozmiar papieru, możesz umieścić swoją zawartość w DIV o tym rozmiarze i dodać margines do tego DIV, aby zasymulować margines wydruku. Niestety, nie wierzę, że masz dodatkową kontrolę nad funkcjonalnością drukowania, poza pokazaniem okna dialogowego drukowania.

Answer 3

Osobiście sugeruję użycie innej jednostki miary niż px. Nie sądzę, że piksele mają duże znaczenie pod względem druku; idealnie byłoby użyć:

• punkt (Pt)
• centymetr (cm)

Jestem pewien, że są inni, a jeden znakomity artykuł o wydruku CSS można znaleźć tutaj: Going to Print, przez Eric Meyer.

Answer 4

Zaktualizowany, proste rozwiązanie

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

Old Rozwiązanie

Utwórz punkt z każdej strony, a skorzystać z poniższego kodu, aby dostosować marginesy, wysokość i szerokość.

Jeśli drukujesz format A4.

Następnie użytkownik

Rozmiar: 8.27in i 11,69 cala

@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; 
} 

następnie utworzyć div z wszystkich treści w nim.

<div class="Section1"> 
    type your content here... 
</div> 

Answer 5

Polecam również pt kontra cm lub mm, ponieważ jest bardziej precyzyjny. Nie mogę też uruchomić strony w Chrome (wersja 30.0.1599.69 m). Ignoruje wszystko, co umieszczam na marginesach, duże lub małe. Ale możesz sprawić, żeby działało z marginesami ciała na dokumencie, dziwne.

Answer 6

Po pierwsze, staram się zmusić wszystkich moich użytkowników do korzystania z Chrome podczas drukowania, ponieważ inne przeglądarki tworzą różne układy.

Odpowiedź z this question poleca:

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

Jednak skończyło się korzystania z tej CSS dla wszystkich moich stron do wydrukowania:

@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; 
    } 
} 

---

specjalne case: Długie tabele

Kiedy potrzebowałem, aby wydrukować tabelę ciągu kilku stron, ich margin:0 z @page prowadził do krawędzi krwawienia:

mogę rozwiązać ten problem dzięki this answer z:

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

Plus ustawienie górnego dolnego marginesu dla @page:

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

Wynik:

Wolałbym wolą rozwiązanie, które jest zwięzłe i współpracuje ze wszystkimi przeglądarce. Na razie mam nadzieję, że powyższe informacje mogą pomóc niektórym programistom z podobnymi problemami.