Wiele lat temu, w listopadzie 2005 r., AlistApart.com opublikował artykuł o tym, jak opublikowali książkę, używając wyłącznie HTML i CSS. Zobacz: http://alistapart.com/article/boom
Oto fragment tego artykułu:
CSS2 ma pojęcie mediów stronicowanych (myśl arkusze papieru), a nie mediów ciągłych (paski przewijania). Arkusze stylów mogą określać rozmiar stron i ich marginesy. Szablony stron mogą mieć nazwy, a elementy mogą określać, na której stronie nazwane mają być wydrukowane. Ponadto elementy w dokumencie źródłowym mogą wymuszać podziały stron. Oto fragment kodu, którego użyliśmy:
@page {
size: 7in 9.25in;
margin: 27mm 16mm 27mm 16mm;
}
Mając wydawcę z siedzibą w USA, rozmiar strony podano w calach. Jako Europejczycy kontynuowaliśmy pomiary metryczne. CSS akceptuje oba.
Po ustawieniu rozmiaru strony i marginesu musieliśmy się upewnić, że w odpowiednich miejscach są podziały stron. Poniższy fragment pokazuje, jak generowane są podziały stron po rozdziałach i dodatkach:
div.chapter, div.appendix {
page-break-after: always;
}
Ponadto używaliśmy CSS2 do deklarowania nazwanych stron:
div.titlepage {
page: blank;
}
Oznacza to, że strona tytułowa ma być drukowana na stronach o nazwie „pusta”. CSS2 opisał pojęcie nazwanych stron, ale ich wartość staje się widoczna dopiero wtedy, gdy dostępne są nagłówki i stopki.
Tak czy siak…
Ponieważ chcesz wydrukować A4, oczywiście potrzebujesz różnych wymiarów:
@page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
Artykuł omawia takie elementy, jak ustawianie podziałów stron itp., Więc możesz chcieć przeczytać to w całości.
W twoim przypadku sztuczka polega na tym, aby najpierw utworzyć drukowany CSS. Większość współczesnych przeglądarek (> 2005) obsługuje powiększanie i będzie już mogła wyświetlać stronę internetową na podstawie wydruku CSS.
Teraz chcesz sprawić, by wygląd strony internetowej wyglądał nieco inaczej i dostosuj cały projekt do większości przeglądarek (w tym starych, sprzed 2005 r.). W tym celu musisz utworzyć internetowy plik CSS lub zastąpić niektóre części drukowanego CSS. Tworząc CSS do wyświetlania w Internecie, pamiętaj, że przeglądarka może mieć DOWOLNY rozmiar (pomyśl: „mobilne” aż do „dużych telewizorów”). Znaczenie: w przypadku internetowego CSS szerokość strony i szerokość obrazu najlepiej ustawić za pomocą zmiennej szerokości (%) w celu obsługi jak największej liczby urządzeń wyświetlających i klientów przeglądających strony internetowe.
EDYCJA (26-02-2015)
Dzisiaj natknąłem się na inny, nowszy artykuł w SmashingMagazine, który również zajmuje się projektowaniem do druku w HTML i CSS… na wypadek, gdybyś mógł skorzystać z jeszcze jednego samouczka.
EDYCJA (30-10-2018)
Zwrócono mi uwagę na sizeto, że nie jest poprawny CSS3, co jest rzeczywiście poprawne - po prostu powtórzyłem kod cytowany w artykule, który (jak wspomniano) był starym dobrym CSS2 (co ma sens, gdy spojrzysz na rok i artykuł ta odpowiedź została opublikowana po raz pierwszy). Tak czy inaczej, oto poprawny kod CSS3 dla wygody kopiowania i wklejania:
@media print {
body{
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
}
Jeśli uważasz, że naprawdę potrzebujesz pikseli ( powinieneś unikać używania pikseli ), musisz zadbać o wybór prawidłowego DPI do drukowania:
- 72 dpi (sieć) = 595 x 842 pikseli
- 300 dpi (wydruk) = 2480 x 3508 pikseli
- 600 dpi (wydruk wysokiej jakości) = 4960 x 7016 pikseli
Jednak unikałbym kłopotów i po prostu używam cm(centymetrów) lub mm(milimetrów) do zmiany rozmiaru, ponieważ pozwala to na uniknięcie renderowania błędów, które mogą powstać w zależności od używanego klienta.