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

Vor langer Zeit, im November 2005, veröffentlichte AlistApart.com einen Artikel darüber, wie sie ein Buch mit nichts anderem als HTML und CSS veröffentlichten. Siehe: http://alistapart.com/article/boom

Hier ist ein Auszug aus diesem Artikel:

In CSS2 gibt es einen Begriff für seitenweise Medien (z. B. Papierbögen), im Gegensatz zu kontinuierlichen Medien (z. B. Rollbalken). Stilvorlagen können die Größe von Seiten und deren Ränder festlegen. Seitenvorlagen können mit Namen versehen 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 der von uns verwendeten Formatvorlage:

@page {
    size: 7in 9.25in;
    margin: 27mm 16mm 27mm 16mm;
}

Da wir einen US-amerikanischen Verlag haben, wurde uns die Seitengröße in Zoll angegeben. Wir, die Europäer, blieben bei den metrischen Maßen. CSS akzeptiert beides.

Nachdem wir die Seitengröße und den Seitenrand eingestellt haben, müssen wir sicherstellen, dass die Seitenumbrüche an den richtigen Stellen erfolgen. Der folgende Auszug zeigt, wie Seitenumbrüche nach Kapiteln und Anhängen erzeugt 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 "blank" gedruckt werden. In CSS2 wurde das Konzept der benannten Seiten beschrieben, aber ihr Wert wird erst deutlich, wenn Kopf- und Fußzeilen vorhanden sind.

Wie auch immer

Da Sie A4 drucken wollen, benötigen Sie natürlich andere Abmessungen:

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

In dem Artikel geht es um Dinge wie das Setzen von Seitenumbrüchen usw. Sie sollten ihn also 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 sind bereits in der Lage, eine Website auf der Grundlage des Print-CSS anzuzeigen.

Jetzt wollen Sie die Webanzeige etwas anders gestalten und das gesamte Design an die meisten Browser anpassen (auch an die alten, vor 2005). Dazu müssen Sie eine Web-CSS-Datei erstellen oder einige Teile Ihres Druck-CSS überschreiben. Wenn Sie CSS für die Webanzeige erstellen, denken Sie daran, dass ein Browser JEDE Größe haben kann (denken Sie an "mobile" bis hin zu "Großbildfernsehern"). Das bedeutet, dass Sie für Web-CSS die Seitenbreite und die Bildbreite am besten mit einer variablen Breite (%) festlegen, um möglichst viele Anzeigegeräte und Web-Browsing-Clients zu unterstützen.

BEARBEITEN (26-02-2015)

Heute stieß ich zufällig auf eine andere, neuere Artikel im SmashingMagazine die auch auf die Gestaltung von Drucksachen mit HTML und CSS eingeht nur für den Fall, dass Sie noch ein weiteres Tutorial brauchen.

BEARBEITEN (30-10-2018)

Ich bin darauf aufmerksam gemacht worden, dass size ist nicht gültig CSS3, was in der Tat richtig ist - ich wiederholte lediglich den Code in dem Artikel, die (wie bereits erwähnt) war gut alten CSS2 (was Sinn macht, wenn man sich das Jahr der Artikel und diese Antwort wurden erstmals veröffentlicht). Wie auch immer, hier ist die gültige CSS3-Code für Ihre copy-and-paste Bequemlichkeit:

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

Falls Sie glauben, dass Sie wirklich Pixel brauchen ( sollten Sie die Verwendung von Pixeln eigentlich vermeiden ), müssen Sie darauf achten, die richtige DPI für den Druck zu wählen:

• 72 dpi (Web) = 595 X 842 Pixel
• 300 dpi (Druck) = 2480 X 3508 Pixel
• 600 dpi (hohe Druckqualität) = 4960 X 7016 Pixel

Dennoch würde ich mir die Mühe ersparen und einfach die cm (Zentimeter) oder mm (Millimeter) für die Größenbestimmung zu verwenden, da dies Rendering-Probleme vermeidet, die je nach dem von Ihnen verwendeten Client auftreten können.

Answer 2

Es wäre relativ einfach, den Webbrowser zu zwingen, die Seite mit denselben Pixelmaßen wie A4 anzuzeigen. Allerdings kann es bei der Darstellung zu einigen Problemen kommen.

Vorausgesetzt, Ihre Monitore zeigen 72 dpi an, könnten Sie etwas wie folgt hinzufügen:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>

Answer 3

Das Format A4 ist 210x297mm

Sie können also die HTML-Seite mit CSS an diese Größen anpassen:

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

Answer 4

Erstellen Sie für jede Seite einen Abschnitt, und verwenden Sie den unten stehenden Code, um Ränder, Höhe und Breite anzupassen.

Wenn Sie im Format A4 drucken.

Dann Benutzer

Size : 8.27in and 11.69 inches

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

und erstellen Sie dann ein Div mit Ihrem gesamten Inhalt.

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

o

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin-left: 2em; 
    margin-right: 2em;
}

.page {
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;
}

Answer 5

Ich sah diese Lösung nach einer Suche bei Google, Suche nach "A4 CSS page template" (codepen.io). Es zeigt eine A4 (A3, A5, auch Hochformat) große Fläche im Browser, mit dem <page> Tag. Innerhalb dieses Tags wird der Inhalt angezeigt, aber die absolute Position ist immer noch in Bezug auf den Browserbereich.

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}

<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>

Dies funktioniert bei mir, ohne dass eine andere css/js-Bibliothek eingebunden werden muss. Funktioniert bei aktuellen Browsern (IE, FF, Chrome).