Do drukowania używam osobnego arkusza stylów. Czy można ustawić prawy i lewy margines w arkuszu stylów, który określa margines wydruku (tj. Margines na papierze)?
Dzięki.
źródło
Do drukowania używam osobnego arkusza stylów. Czy można ustawić prawy i lewy margines w arkuszu stylów, który określa margines wydruku (tj. Margines na papierze)?
Dzięki.
Podczas określania drukowania należy używać cm
lub mm
jako jednostki. Używanie pikseli spowoduje, że przeglądarka przetłumaczy to na coś podobnego do tego, co wygląda na ekranie. Użycie cm
lub mm
zapewni spójny rozmiar papieru.
body
{
margin: 25mm 25mm 25mm 25mm;
}
W przypadku rozmiarów czcionek użyj pt
dla nośnika wydruku.
Zwróć uwagę, że ustawienie marginesu na korpusie w stylu css nie dostosuje marginesu w sterowniku drukarki, który definiuje obszar drukowania drukarki, ani marginesu kontrolowanego przez przeglądarkę (może być regulowany w podglądzie wydruku w niektórych przeglądarkach) ... po prostu ustawi margines na dokumencie w obszarze 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 mm
. Aby zmienić to zachowanie, użytkownik musi wybrać opcję „Podgląd wydruku”, a następnie ustawić rozmiar wydruku na 100%
(domyślnie Shrink To Fit
).
Lepszą opcją pełnej kontroli nad drukowanymi marginesami jest użycie @page
dyrektywy w celu ustawienia marginesu papieru, co wpłynie na margines na papierze poza elementem treści html, który jest zwykle kontrolowany przez przeglądarkę. Zobacz http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Obecnie działa to we wszystkich głównych przeglądarkach z wyjątkiem Safari.
W przeglądarce Internet Explorer margines jest faktycznie ustawiony na tę wartość w ustawieniach tego drukowania, a jeśli zrobisz Podgląd, otrzymasz to domyślnie, ale użytkownik może to 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;
}
Powiązana odpowiedź: Czy wyłączyć opcje drukowania przeglądarki (nagłówki, stopki, marginesy) ze strony?
<body class="firefox">
więc w swoim css możesz to zrobićbody.firefox {margin: 0mm; padding: 0.25in;}
, to jest w rzeczywistości 0,75 cala marginesu, ponieważ Firefox już dodaje 0,5 cala. Powinno to działać tak długo, jak potrzebujesz> = 0,5 cala marginesów.Po pierwsze, próbuję zmusić wszystkich moich użytkowników do korzystania z Chrome podczas drukowania, ponieważ inne przeglądarki tworzą różne układy.
Odpowiedź na to pytanie zaleca:
Jednak skończyło się na tym, że użyłem tego CSS do wydrukowania wszystkich moich stron:
Przypadek specjalny: długie stoły
Kiedy musiałem wydrukować tabelę na kilku stronach, znak
margin:0
z@page
kropką prowadził do krwawienia krawędzi:Mogłem to rozwiązać dzięki tej odpowiedzi :
Plus ustawienie górnych dolnych marginesów dla
@page
:Wynik:
Wolałbym rozwiązanie, które jest zwięzłe i działa we wszystkich przeglądarkach. Na razie mam nadzieję, że powyższe informacje mogą pomóc niektórym programistom z podobnymi problemami.
źródło
Zaktualizowane, proste rozwiązanie
Stare rozwiązanie
Utwórz sekcję z każdą stroną i użyj poniższego kodu, aby dostosować marginesy, wysokość i szerokość.
Jeśli drukujesz w formacie A4.
Następnie użytkownik
Rozmiar: 8,27 cala i 11,69 cala
następnie utwórz div z całą zawartością.
źródło
class=Section1
powinno byćclass="Section1"
.Osobiście sugerowałbym użycie innej jednostki miary niż
px
. Nie sądzę, aby piksele miały duże znaczenie w druku; idealnie byś użył:Jestem pewien, że są inne, a jeden doskonały artykuł o print-css można znaleźć tutaj: Going to Print , autorstwa Erica Meyera .
źródło
px
nie ma to większego znaczenia w druku. Ale przeglądarki „tłumaczą” jednostki pikseli, więc wygląda to podobnie do tego, jak wygląda na ekranie. To ma nie korzystać z „kropki Rozdzielczość drukarki” jako pikseli (dzięki Bogu ...).Polecam również pt w porównaniu z cm lub mm, ponieważ jest bardziej precyzyjny. Nie mogę również uruchomić @page w Chrome (wersja 30.0.1599.69 m). Ignoruje wszystko, co wstawiam na marginesy, duże lub małe. Ale możesz sprawić, by działał z marginesami treści w dokumencie, dziwne.
źródło
Jeśli znasz docelowy rozmiar papieru, możesz umieścić swoją treść w DIV o określonym rozmiarze i dodać margines do tego DIV, aby zasymulować margines wydruku. Niestety nie wydaje mi się, abyś miał dodatkową kontrolę nad funkcjami drukowania, poza pokazaniem tylko okna dialogowego drukowania.
źródło