Verwenden von CSS zum Formatieren von Dokumenten zum Drucken
Wenn Sie jemals Ticketreservierungen oder Wegbeschreibungen zu einem Hotel aus dem Internet ausgedruckt haben, waren Sie von den Ergebnissen wahrscheinlich weniger als beeindruckt. Möglicherweise ist Ihnen daher nicht bewusst, dass gedruckte Dokumente mithilfe von Cascading Style Sheets (CSS) auf die gleiche Weise 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:
<font size="7"><b>Heading</b></font>
Wir verwenden semantisches Markup:
<h1>Heading</h1>
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ßen, fetten Text, aber wir können diesen Stil jederzeit mit einem Stylesheet ändern:
h1 { font-weight: 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, das es verwendet, zu aktualisieren.
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:
<link href="base.css" rel="stylesheet" />
Ein zusätzliches Attribut, media , ermöglicht jedoch das Targeting basierend auf dem Kontext, in dem das Dokument gerendert wird. Standardmäßig entspricht das vorherige Element:
<link href="base.css" rel="stylesheet" media="all" />
Dies bedeutet, dass das Stylesheet für jedes Medium angewendet wird, auf dem das Dokument gerendert wird. Das Medienattribut kann jedoch auch Druck- und Bildschirmwerte annehmen:
<link href="print.css" rel="stylesheet" media="print" />
In diesem Beispiel wird das Stylesheet print.css 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:
body {
background: white;
color: black;
}
Möglicherweise möchten Sie auch verhindern, dass Hintergrundbilder gedruckt werden. Diese sollten dekorativ sein und daher kein erforderlicher Bestandteil Ihres Inhalts sein:
* {
background-image: none !important;
}
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 Werten wie " Keine" und " Benutzerdefiniert", die alle über CSS angegebenen Werte überschreiben:
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. Die @ page- Regel ermöglicht das Festlegen von Rändern und sollte wie folgt verwendet werden:
@page {
margin: 2cm;
}
CSS bietet auch die Möglichkeit, komplexere Drucklayouts zu erstellen, z. B. den Rand zu variieren, je nachdem, ob es sich bei der Seite um eine ungerade (rechts), eine gerade (links) oder eine Deckblattseite handelt.
Leider wird dies nur unzureichend unterstützt – insbesondere die Deckblattoption -, aber es kann 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:
@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}
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; }
Links reparieren
Hyperlinks sind in gedruckten Materialien offensichtlich nicht relevant. Daher sollten Sie wahrscheinlich alle Stile entfernen, die sie vom umgebenden Text unterscheiden:
a { text-decoration: none; color: inherit; }
Möglicherweise möchten Sie jedoch weiterhin, dass 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]:after {
content: " (" attr(href) ")";
font-size: 90%;
color: #333;
}
Dieses CSS liefert Ergebnisse wie die folgenden:
a [href]: after zielt speziell auf die Position nach ( : after ) jedem Linkelement ( a ) ab, das tatsächlich eine URL hat ( [href] ). Die Inhaltsdeklaration hier fügt den Wert des href- Attributs in Klammern ein. 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 " Seitenumbruch vor" , " Seitenumbruch nach" und " Seitenumbruch nach innen" , um zu vermeiden, dass Seitenumbrüche isolierten Inhalt hinterlassen oder in der Mitte unbeholfen unterbrochen werden. Zum Beispiel:
table { page-break-inside: avoid; }
Dies sollte dazu beitragen, dass Tabellen nicht mehrere Seiten umfassen, vorausgesetzt, keine ist größer als eine einzelne Seite. Ähnlich:
h1, h2 { page-break-before: always; }
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 { page-break-before: avoid; }
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 Weitere Tools, gefolgt von der Option Entwicklertools :
Wählen Sie im neuen Fenster " Menü" und dann " Weitere Werkzeuge" und anschließend " Rendern" :
Scrollen Sie dann nach unten zur Einstellung CSS-Medientyp emulieren . In der Dropdown-Liste können Sie zwischen der Druck- und der Bildschirmansicht Ihres Dokuments wechseln:
Beim Emulieren des Druck-Stylesheets steht der Standard- Styles-Browser zum Überprüfen und Ändern der Live-Style-Regeln zur Verfügung. Beachten Sie, dass die Emulation der Druckausgabe auf einem Bildschirm immer noch nicht 100% genau ist. Der Browser weiß nichts über das Papierformat und die @ page- Regel kann nicht emuliert werden.
Drucken als 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 bis hin zu 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.