Verwenden von CSS zum Formatieren von Dokumenten zum Drucken

Verwenden von CSS zum Formatieren von Dokumenten zum Drucken

Wenn Sie schon einmal Ticketreservierungen oder Wegbeschreibungen zu einem Hotel aus dem Internet ausgedruckt haben, waren Sie von den Ergebnissen wahrscheinlich weniger beeindruckt. Daher ist Ihnen möglicherweise nicht bewusst, dass gedruckte Dokumente mit 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 statt sehr altmodischer stilistischer Auszeichnungen wie:



Heading

Wir verwenden semantisches Markup:






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

h1 { font-weight: normal; }

Indem wir diese Stildeklarationen in einer separaten Datei zusammenfassen und diese Datei aus unserem HTML-Dokument referenzieren, 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:


Jedoch ein zusätzliches Attribut, halb , ermö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 Werte von print und screen 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 (vielleicht Schriftfamilie oder Zeilenabstand) in einem medienübergreifenden Stylesheet und medienspezifische Formatierungen in einzelnen Stylesheets zusammenfassen. Auch dies ist eine weitere Anwendung der Trennung von Belangen.



Einige Beispiele für Stildeklarationen

Ein sauberer Hintergrund

Sie möchten mit ziemlicher Sicherheit keine Tinte verschwenden, wenn Sie einen bunten Hintergrund oder ein Hintergrundbild drucken. Setzen Sie zunächst alle Standardwerte 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;
}

Verwandt: So legen Sie ein Hintergrundbild in CSS fest

Wie bekomme ich Windows dazu, neue SSDs zu erkennen?

Kontrollmargen

Ein weiterer offensichtlicher Punkt, der beim Drucken berücksichtigt werden muss, ist der Seitenrand. Obwohl CSS eine Möglichkeit bietet, die Randgröße einzustellen, sollten Sie bedenken, dass Ihr Browser und Drucker auch die Randeinstellungen selbst beeinflussen können.

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

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

@page {
margin: 2cm;
}

CSS bietet auch die Kapazität für anspruchsvollere Drucklayouts, z. B. das Variieren des Seitenrands je nachdem, ob die Seite ungerade (rechts), gerade (links) oder das Deckblatt ist.

So erstellen Sie ein anonymes Facebook-Konto

Leider wird dies schlecht unterstützt – insbesondere die Deckblattoption –, kann aber in minimalem Umfang verwendet werden. Die folgenden Stile erzeugen Seiten mit etwas größeren unteren Rändern als oben und etwas größeren Rändern am äußeren Seitenrand als am Buchrücken:

@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}

Irrelevante Inhalte ausblenden

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

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

Hyperlinks sind in gedrucktem Material 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 trotzdem, dass die Leser Zugriff auf die Original-URLs haben, und eine einfache Lösung besteht darin, sie automatisch nach dem verlinkten Text einzufügen:

a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}

Dieses CSS liefert Ergebnisse wie die folgenden:

a[href]:nach zielt gezielt auf die Position nach ( :nach ) jedes Linkelement ( zu ), die tatsächlich eine URL ( [href] ). Die Inhalt Deklaration fügt hier den Wert von ein href Attribut zwischen Klammern. Beachten Sie, dass andere Stilregeln angewendet werden können, um die Anzeige des generierten Inhalts zu steuern.

Umgang mit Seitenumbrüchen

Um zu vermeiden, dass Seitenumbrüche isolierte Inhalte hinterlassen oder sie in der Mitte umständlich umbrechen, verwenden Sie die Seitenumbrucheigenschaften: Seitenumbruch-vorher , Seitenumbruch nach und Seitenumbruch nach innen . Zum Beispiel:

table { page-break-inside: avoid; }

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

h1, h2 { page-break-before: always; }

Das 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 einfach den Seitenumbruch mit einem Selektor ab, der auf diese bestimmte Instanz abzielt, zum Beispiel:

Was ist das für ein oranger Punkt auf meinem iPhone?
h1 + h2 { page-break-before: avoid; }

Anzeigen von Druckstilen

In allen Fällen sollten Ihr Browser und Ihr Betriebssystem eine Druckvorschau bieten, oft als Teil des Standard-Druckdialogs.

Der Chrome-Browser macht es bequemer, Ihre Druckstile über die Entwicklertools zu überprüfen und sogar zu debuggen, wie dieses Beispiel zeigt, 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 aus dem neu erscheinenden Bedienfeld Speisekarte , dann Mehr Werkzeuge , gefolgt von Rendering :

Scrollen Sie dann nach unten zum CSS-Medientyp emulieren Einstellung. Mit der Dropdown-Liste können Sie zwischen der Druck- und Bildschirmansicht Ihres Dokuments umschalten:

Beim Emulieren des Druck-Stylesheets ist der Standard Styles-Browser ist verfügbar, um die Live-Style-Regeln zu überprüfen und zu ändern. Beachten Sie, dass die Emulierung der Druckausgabe auf einem Bildschirm immer noch nicht 100% genau ist. Der Browser weiß nichts über das Papierformat und die @Seite 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, um ein hochwertiges Dokument zu erstellen, das sowohl als Anhang versendet als auch gedruckt werden kann.

Sie können ein Druck-Stylesheet verwenden, um hochwertige Dokumente zu erstellen, einschließlich Ihres Lebenslaufs, Rezepten oder Veranstaltungsankündigungen. Webseiten sehen beim Drucken normalerweise hässlich aus und enthalten unerwünschte Details, aber eine kleine Anzahl von Stiloptimierungen kann die Druckergebnisse erheblich verbessern. Das Speichern der Endergebnisse als PDF ist eine schnelle Möglichkeit, attraktive, professionelle Dokumente zu erstellen.

Teilen Teilen Tweet Email So drucken Sie Webseiten in PDF mit Microsoft Edge

Sind Sie schon einmal auf einen interessanten Artikel gestoßen, den Sie für später speichern wollten? Nun, Sie können mit Edge in drei einfachen Schritten als PDF speichern.

Weiter lesen Verwandte Themen
  • Programmierung
  • Drucken
  • CSS
Über den Autor Bobby Jack(58 veröffentlichte Artikel)

Bobby ist ein Technologie-Enthusiast, der fast zwei Jahrzehnte lang als Software-Entwickler gearbeitet hat. Er hat eine Leidenschaft für Spiele, arbeitet als Rezensionsredakteur beim Switch Player Magazine und vertieft sich in alle Aspekte des Online-Publishing und der Webentwicklung.

Mehr von Bobby Jack

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um sich zu abonnieren