Wenn Sie jemals Ticketreservierungen oder Wegbeschreibungen zu einem Hotel aus dem Internet ausgedruckt haben, waren Sie von den Ergebnissen wahrscheinlich weniger als beeindruckt. Sie sind sich daher möglicherweise nicht bewusst, dass gedruckte Dokumente mithilfe von Cascading Style Sheets (CSS) ähnlich wie auf dem Bildschirm gestaltet werden können.

Trennung von Bedenken

Ein wesentlicher Vorteil von CSS ist die Trennung von Inhalt und Präsentation. Im einfachsten Sinne bedeutet dies anstelle von sehr altmodischen stilistischen Markups wie:

Überschrift

Wir verwenden semantisches Markup:

Überschrift

Dies ist nicht nur viel sauberer, sondern bedeutet auch, dass unsere Präsentation von unseren Inhalten getrennt ist. Browser rendern h1 Elemente standardmäßig als großer, fetter Text, aber wir können diesen Stil jederzeit mit einem Stylesheet ändern:

h1 {Schriftgröße: normal; }

Indem wir diese Stildeklarationen in einer separaten Datei sammeln und auf diese Datei aus unserem HTML-Dokument verweisen, können wir die Trennung noch besser nutzen. Das Stylesheet kann wiederverwendet werden, und wir können diese einzelne Datei jederzeit ändern, um die Formatierung in jedem Dokument zu aktualisieren, das sie verwendet.

Einschließlich eines Druck-Stylesheets

Ähnlich wie beim Einfügen eines Bildschirm-Stylesheets können wir ein Stylesheet für den Druck angeben. Ein Bildschirm-Stylesheet ist normalerweise wie folgt enthalten:

Ein zusätzliches Attribut, MedienErmöglicht das Targeting basierend auf dem Kontext, in dem das Dokument gerendert wird. Standardmäßig entspricht das vorherige Element:

Dies bedeutet, dass das Stylesheet für jedes Medium angewendet wird, in dem das Dokument gerendert wird. Das Medienattribut kann jedoch auch Druck- und Bildschirmwerte annehmen:

In diesem Beispiel ist die print.css Stylesheet wird nur verwendet, wenn das Dokument ausgedruckt wird. Dies ist ein sehr nützlicher Mechanismus. Wir können alle gängigen Stile (möglicherweise Schriftfamilien oder Zeilenabstände) in einem Stylesheet zusammenfassen, das für alle Medien gilt, sowie die medienspezifische Formatierung in einzelnen Stylesheets. Auch dies ist eine andere Verwendung der Trennung von Bedenken.

Einige beispielhafte Stildeklarationen

Ein sauberer Hintergrund

Sie möchten mit ziemlicher Sicherheit keine Tinte verschwenden, um einen farbigen Hintergrund oder ein Hintergrundbild auszudrucken. Setzen Sie zunächst alle Standardeinstellungen für diese Werte zurück, die möglicherweise in Ihrem Dokument festgelegt wurden:

Körper {
Hintergrund: weiß;
Farbe: Schwarz;
}

Möglicherweise möchten Sie auch verhindern, dass Hintergrundbilder gedruckt werden. Diese sollten dekorativ sein und daher kein erforderlicher Bestandteil Ihres Inhalts sein:

* {
Hintergrundbild: keine! wichtig;
}

Verbunden: So legen Sie ein Hintergrundbild in CSS fest

So legen Sie ein Hintergrundbild in CSS fest

CSS ist ein leistungsstarkes Tool zum Stylen von Webseiten. Wenn Sie lernen, wie Sie ein Hintergrundbild platzieren, lernen Sie viele CSS-Grundlagen.

Ränder kontrollieren

Ein weiterer naheliegender Punkt beim Drucken ist der Seitenrand. Während CSS eine Möglichkeit zum Festlegen der Randgröße bietet, sollten Sie berücksichtigen, dass Ihr Browser und Ihr Drucker möglicherweise auch die Randeinstellungen selbst beeinflussen.

Im Druckdialog von Chrome gibt es beispielsweise eine Randeinstellung mit folgenden Werten keiner und Benutzerdefiniert Dies überschreibt alles, was über CSS angegeben wurde:

Aus diesem Grund wird empfohlen, Margenentscheidungen dem Leser auf öffentlichen Webseiten zu überlassen. Für den persönlichen Gebrauch oder zum Erstellen eines Standardlayouts kann es jedoch angebracht sein, Druckränder über CSS festzulegen. Das @Seite Die Regel ermöglicht das Festlegen von Rändern und sollte wie folgt verwendet werden:

@Seite {
Rand: 2 cm;
}

CSS bietet auch die Möglichkeit, komplexere Drucklayouts zu erstellen, z. B. den Rand zu variieren, je nachdem, ob die Seite ungerade (rechts), gerade (links) oder das Deckblatt ist.

Leider wird dies nur unzureichend unterstützt - insbesondere die Deckblattoption -, es kann jedoch nur in minimalem Umfang verwendet werden. Die folgenden Stile erzeugen Seiten mit etwas größeren unteren Rändern als die oberen und etwas größeren Rändern am äußeren Seitenrand als der Rücken:

@Seite {
Rand links: 20 mm;
Rand rechts: 20 mm;
Rand oben: 40 mm;
Rand unten: 50 mm;
}
@page: left {
Rand links: 30 mm;
}
@page: richtig {
Rand rechts: 30 mm;
}

Irrelevanten Inhalt ausblenden

Nicht alle Inhalte sind für eine Druckversion Ihres Dokuments geeignet. Wenn Ihre Seite eine Bannernavigation, Werbung oder eine Seitenleiste enthält, möchten Sie möglicherweise verhindern, dass diese Details in der Druckversion angezeigt werden, z. B.:

#contents, div.ad {display: none; }

Hyperlinks sind in gedruckten Materialien offensichtlich nicht relevant. Daher möchten Sie wahrscheinlich alle Stile entfernen, die sie vom umgebenden Text unterscheiden:

a {Textdekoration: keine; Farbe: erben; }

Möglicherweise möchten Sie jedoch weiterhin, dass die Leser Zugriff auf die ursprünglichen URLs haben. Eine einfache Lösung besteht darin, sie automatisch nach dem verknüpften Text einzufügen:

a [href]: nach {
Inhalt: "(" attr (href) ")";
Schriftgröße: 90%;
Farbe: # 333;
}

Dieses CSS liefert Ergebnisse wie die folgenden:

a [href]: nachher zielt speziell auf die Position nach (:nach dem) jedes Verknüpfungselement (ein), die tatsächlich eine URL hat ([href]). Das Inhalt Deklaration hier fügt den Wert der href Attribut in Klammern. Beachten Sie, dass andere Stilregeln angewendet werden können, um die Anzeige des generierten Inhalts zu steuern.

Umgang mit Seitenumbrüchen

Verwenden Sie die Eigenschaften für Seitenumbrüche, um zu vermeiden, dass Seitenumbrüche isolierten Inhalt hinterlassen oder in der Mitte unbeholfen unterbrochen werden: Seitenumbruch vorher, Seitenumbruch danach und Seitenumbruch. Zum Beispiel:

Tabelle {Seitenumbruch: vermeiden; }

Dies sollte dazu beitragen, dass Tabellen nicht mehrere Seiten umfassen, vorausgesetzt, keine ist größer als eine einzelne Seite. Ähnlich:

h1, h2 {Seitenumbruch vorher: immer; }

Dies bedeutet, dass solche Überschriften immer eine neue Seite beginnen. Es kann jedoch zu Problemen führen, wenn Sie dem h1 Ihrer Seite sofort ein h2 folgen, da das h1 auf einer eigenen Seite landet. Um dies zu vermeiden, brechen Sie den Seitenumbruch einfach mit einem Selektor ab, der auf diese bestimmte Instanz abzielt. Beispiel:

h1 + h2 {Seitenumbruch vorher: vermeiden; }

Anzeigen von Druckstilen

In jedem Fall sollten Ihr Browser und Ihr Betriebssystem eine Druckvorschau-Funktion bereitstellen, häufig als Teil des Standarddruckdialogs.

Mit dem Chrome-Browser können Sie Ihre Druckstile bequemer über die Entwicklertools überprüfen und sogar debuggen. Dies zeigt dieses Beispiel, das einen Lebenslauf mit einem Druckstilblatt zeigt. Öffnen Sie zunächst das Hauptmenü und wählen Sie Mehr Werkzeuge gefolgt von der Entwicklerwerkzeuge Möglichkeit:

Wählen Sie im neuen Fenster die Option aus Speisekarte, dann Mehr Werkzeuge, gefolgt von Rendern:

Scrollen Sie dann nach unten zu Emulieren Sie den CSS-Medientyp Rahmen. In der Dropdown-Liste können Sie zwischen der Druck- und der Bildschirmansicht Ihres Dokuments wechseln:

Bei der Emulation des Druck-Stylesheets wird der Standard Styles Browser steht zur Überprüfung und Änderung der Live-Stilregeln zur Verfügung. Beachten Sie, dass die Emulation der Druckausgabe auf einem Bildschirm immer noch nicht 100% genau ist. Der Browser weiß nichts über die Papiergröße und die @Seite Regel kann nicht emuliert werden.

Drucken in ein PDF

Eine praktische Funktion moderner Betriebssysteme ist die Möglichkeit, in eine PDF-Datei zu drucken. Tatsächlich kann alles, was Sie drucken können, stattdessen an eine PDF-Datei gesendet werden - keine wirkliche Überraschung, da eine PDF-Datei schließlich ein gedrucktes Dokument darstellen soll.

Dies macht HTML in Kombination mit einem Druck-Stylesheet zu einem hervorragenden Mittel zum Erstellen eines hochwertigen Dokuments, das sowohl als Anhang gesendet als auch gedruckt werden kann.

Drucken Sie eine Vielzahl von Dokumenten

Sie können ein Druck-Stylesheet verwenden, um Qualitätsdokumente zu erstellen, einschließlich aller Elemente aus Ihrem Lebenslauf, Rezepten oder Veranstaltungsankündigungen. Webseiten sehen normalerweise hässlich aus und enthalten beim Drucken unerwünschte Details. Eine kleine Anzahl von Stiländerungen kann jedoch die Druckergebnisse erheblich verbessern. Das Speichern der Endergebnisse als PDF ist eine schnelle Möglichkeit, attraktive, professionelle Dokumente zu erstellen.

So drucken Sie Webseiten mit Microsoft Edge in PDF

Haben Sie jemals einen interessanten Artikel gefunden, den Sie für später speichern wollten? Nun, Sie können mit Edge in drei einfachen Schritten als PDF speichern.

Über den Autor