Wie erstellt man eine HTML-Seite im A4-Format?

Question

Ist es möglich, eine HTML-Seite so zu gestalten, dass sie sich z. B. wie eine A4-Seite in MS Word verhält?

Im Wesentlichen möchte ich die HTML-Seite im Browser anzeigen und den Inhalt in den Dimensionen einer A4-Seite umreißen können.

Der Einfachheit halber gehe ich davon aus, dass die HTML-Seite nur Text enthält (keine Bilder usw.) und es keine <br> Tags zum Beispiel.

Wenn die HTML-Seite ausgedruckt wird, hat sie die Größe einer A4-Seite.

Answer 1

Viele Wege führen zum Ziel:

Verwendung von Millimetern mm :

html, body {
    width:  210mm;
    height: 297mm;
}

Verwendung von Zentimetern cm :

html, body {
    width:  21.0cm;
    height: 29.7cm;
}

Punkte verwenden pt :

html, body {
    width:  595pt;
    height: 842pt;
}

Answer 2

Ich habe HTML verwendet, um Berichte zu erstellen, die in echter Größe auf echtem Papier korrekt ausgedruckt werden.

Wenn Sie in der CSS-Datei sorgfältig mm als Maßeinheit verwenden, sollte zumindest für einzelne Seiten alles in Ordnung sein. Allerdings kann man es sich mit der Änderung des Druckzoom in seinem Browser verderben.

Ich glaube mich zu erinnern, dass alles, was ich gemacht habe, eine Seite war, so dass ich mir keine Gedanken über die Paginierung machen musste - das könnte viel schwieriger sein.

Answer 3

PPI und DPI machen absolut keinen Unterschied, wie ein Dokument in einem Browser gedruckt wird. Der Drucker nimmt keine Informationen über den Punktabstand des Bildschirms oder die DPI der Bilder usw. auf. Wenn Sie Bilder drucken, werden sie in einer Größe gedruckt, die der Darstellung auf dem Bildschirm entspricht. Die Pixelbreite des Bildes würde ca. 300px betragen, um im Browser korrekt angezeigt zu werden. Wenn das Bild mit einem nominalen DPI-Wert von 300 gedruckt wird, hat der Prozessor Pixel hinzugefügt und das Bild wird auf ca. 1200px anwachsen, was bei 300 DPI 4" entspricht.

Wenn es um Vektor- oder nicht pixelbasierte Elemente wie Text geht, wählt der Drucker seinen eigenen DPI-Wert aus dem Treiber, der sich nicht auf den Punktabstand des Bildschirms oder die Breite des Browsers usw. bezieht. Wenn der Browser 3000 Pixel breit ist, bricht der Druckprozessor den Text entsprechend um.

heres, was es hart über das Erstellen der Druckanzeigen bildet: jeder Browser und Drucker interpretiert Textgrößen (pt, em, px) und Abstand auf seine eigene Art. abhängig von, welchem Drucker, Browser und möglicherweise sogar OS Sie verwenden, erhalten Sie eine unterschiedliche Menge Zeilen und Zeichen pro Seite. so, selbst wenn Sie auf Ihrem Computer unter Verwendung Ihres Browsers und Druckers prüfen und herausfinden, dass Sie den Text in einem Kasten an 640x900px und an seinem vollkommenen auf Druck anzeigen können, erhält der folgende Kerl, der versucht zu drucken, ihn Drucken möglicherweise anders. es gibt wirklich keine Methode, jeden Drucker und Browser zu erzwingen, um es identisch jedes Mal zu erhalten.

Vergessen Sie Pixel und noch mehr vergessen Sie DPI, das einzige, wofür Sie Pixel verwenden können, ist die Einstellung einer Tabellenbreite, die die Breite eines bedruckbaren Bereichs auf Ihrem Drucker simuliert. in diesem Fall habe ich festgestellt, dass 640px Breite nahe dran ist.

Answer 4

<link rel="stylesheet" href="http://stackoverflow.com/css/style.css" type="text/css">
<link rel="stylesheet" href="http://stackoverflow.com/css/print.css" type="text/css" media="print">

In Ihrem normalen style.css :

table.tableclassname {
  width: 400px;
}

In Ihrem print.css :

table.tableclassname {
  width: 16 cm;
}

Answer 5

Auf der Suche nach einem ähnlichen Problem fand ich dies - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 ist ein Dokumentformat, das als Bild auf dem Bildschirm von der Bildauflösung abhängt, z. B. ein A4-Dokument in der Größe A4:

• 72 dpi (Web) = 595 X 842 Pixel
• 300 dpi (Druck) = 2480 X 3508 Pixel (Das ist "A4", wie ich es kenne, d. h. "210mm X 297mm @ 300 dpi")
• 600 dpi (Druck) = 4960 X 7016 Pixel