Vor langer Zeit, im November 2005, veröffentlichte AlistApart.com einen Artikel darüber, wie ein Buch nur mit HTML und CSS veröffentlicht wurde. Siehe: http://alistapart.com/article/boom
Hier ist ein Auszug aus diesem Artikel:
CSS2 hat einen Begriff von ausgelagerten Medien (denken Sie an Papierblätter) im Gegensatz zu kontinuierlichen Medien (denken Sie an Bildlaufleisten). Stylesheets können die Größe von Seiten und deren Ränder festlegen. Seitenvorlagen können Namen gegeben werden, und Elemente können angeben, auf welcher benannten Seite sie gedruckt werden sollen. Außerdem können Elemente im Quelldokument Seitenumbrüche erzwingen. Hier ist ein Ausschnitt aus dem von uns verwendeten Stylesheet:
@page {
size: 7in 9.25in;
margin: 27mm 16mm 27mm 16mm;
}
Mit einem in den USA ansässigen Verlag erhielten wir die Seitengröße in Zoll. Wir Europäer haben mit metrischen Messungen fortgefahren. CSS akzeptiert beides.
Nachdem wir die Seitengröße und den Seitenrand festgelegt hatten, mussten wir sicherstellen, dass an den richtigen Stellen Seitenumbrüche vorhanden sind. Der folgende Auszug zeigt, wie Seitenumbrüche nach Kapiteln und Anhängen generiert werden:
div.chapter, div.appendix {
page-break-after: always;
}
Außerdem haben wir CSS2 verwendet, um benannte Seiten zu deklarieren:
div.titlepage {
page: blank;
}
Das heißt, die Titelseite soll auf Seiten mit dem Namen "leer" gedruckt werden. CSS2 beschrieb das Konzept der benannten Seiten, aber ihr Wert wird erst sichtbar, wenn Kopf- und Fußzeilen verfügbar sind.
Wie auch immer…
Da Sie A4 drucken möchten, benötigen Sie natürlich verschiedene Abmessungen:
@page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
Der Artikel befasst sich mit Dingen wie dem Setzen von Seitenumbrüchen usw., daher möchten Sie dies möglicherweise vollständig lesen.
In Ihrem Fall besteht der Trick darin, zuerst das Druck-CSS zu erstellen. Die meisten modernen Browser (> 2005) unterstützen das Zoomen und können bereits eine Website basierend auf dem gedruckten CSS anzeigen.
Jetzt möchten Sie das Web-Display etwas anders aussehen lassen und das gesamte Design an die meisten Browser anpassen (einschließlich der alten Browser vor 2005). Dazu müssen Sie eine Web-CSS-Datei erstellen oder einige Teile Ihres Druck-CSS überschreiben. Denken Sie beim Erstellen von CSS für die Webanzeige daran, dass ein Browser JEDE Größe haben kann (denken Sie an „mobil“ bis zu „Großbildfernsehern“). Bedeutung: Für das Web-CSS wird Ihre Seitenbreite und Bildbreite am besten mit einer variablen Breite (%) festgelegt, um so viele Anzeigegeräte und Webbrowser-Clients wie möglich zu unterstützen.
BEARBEITEN (26-02-2015)
Heute bin ich zufällig auf einen anderen, neueren Artikel bei SmashingMagazine gestoßen, der sich auch mit dem Entwerfen für den Druck mit HTML und CSS befasst… nur für den Fall, dass Sie noch ein weiteres Tutorial verwenden könnten.
BEARBEITEN (30-10-2018)
Ich wurde darauf aufmerksam gemacht, dass sizees sich nicht um gültiges CSS3 handelt, was in der Tat richtig ist. Ich habe lediglich den in dem Artikel zitierten Code wiederholt, der (wie erwähnt) gutes altes CSS2 war (was sinnvoll ist, wenn man sich das Jahr des Artikels und des Artikels ansieht Diese Antwort wurde erstmals veröffentlicht. Hier ist der gültige CSS3-Code für das Kopieren und Einfügen:
@media print {
body{
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
}
Wenn Sie der Meinung sind, dass Sie wirklich Pixel benötigen ( Sie sollten die Verwendung von Pixeln eigentlich vermeiden ), müssen Sie darauf achten, die richtige DPI für den Druck auszuwählen:
- 72 dpi (Web) = 595 x 842 Pixel
- 300 dpi (Druck) = 2480 x 3508 Pixel
- 600 dpi (hochwertige Druckqualität) = 4960 x 7016 Pixel
Ich würde jedoch den Aufwand vermeiden und einfach cm(Zentimeter) oder mm(Millimeter) für die Größenbestimmung verwenden, da dadurch keine Störungen auftreten, die je nach verwendetem Client auftreten können.