So stylen Sie Ihre Website für den Druck mit CSS

Veröffentlicht: 2015-08-28

Was hat Print mit dem Web zu tun?

Die meisten von uns leben online und beziehen alle unsere Informationen aus dem Internet. Wir sind den ganzen Tag, jeden Tag, von vielen Geräten aus verbunden. Sie haben vielleicht gehört, dass Print tot ist, obwohl das sicherlich nicht wahr ist! Wir drucken vielleicht nicht mehr so ​​häufig wie früher, aber es gibt Situationen, in denen das Anzeigen von Inhalten auf einem Gerät einfach kein Ersatz dafür ist, eine gedruckte Kopie zum Ansehen zu haben. Verfügen Sie über wertvolle Anleitungen, einlösbare Coupons, Anleitungen, Portfoliobeispiele oder etwas anderes, das Benutzer lieber in gedruckter Form sehen würden? Wenn ja, wird das Einrichten benutzerdefinierter Druckregeln auf Ihrer Website sicherlich dazu beitragen, das Erlebnis für Ihre Benutzer zu gestalten.

Bürodrucker

Wie man für den Druck entwirft

Die ganze Magie ist in CSS enthalten, indem druckspezifische Stile definiert werden. Es kann hilfreich sein, ein separates print.css Stylesheet zu erstellen, damit es von all Ihren anderen Stilen getrennt ist. Denken Sie daran, dass nicht alle Websites über ein Druck-Stylesheet verfügen. dies ist ein zusätzliches Feature und ein Schritt im Entwicklungsprozess. Wenn keine Druckstile angegeben sind, werden die Standardstile zum Drucken verwendet. Wir werden Stile definieren, um den Druck effizienter zu gestalten, wodurch alle Standardeinstellungen außer Kraft gesetzt werden.

Denken Sie daran: Sie sollten niemals Änderungen an einer Live-Website vornehmen. Unsere kostenlose lokale Entwicklungs-App Local hilft Ihnen dabei, Ihren Arbeitsablauf zu vereinfachen und sicher mit Ihrer Website zu experimentieren. Probieren Sie es noch heute aus!

Die Namenskonvention und bestimmte Stile sind für das Stylesheet Ihres eigenen Projekts einzigartig, aber diese Konzepte gelten. Gehen Sie nach dem Hinzufügen der Grundlagen das Standard-Stylesheet Ihrer Website durch und suchen Sie nach besonderen Situationen, in denen Druckstile erforderlich sind, um das beste Druckerlebnis zu gewährleisten.

Überlegungen zu Farbe und Layout

Die meisten Menschen ziehen es aufgrund der Kosten für farbige Tinte vor, in Schwarzweiß zu drucken. Außerdem gibt es einen höheren Kontrast, wenn Text schwarz ist und auf weißem Papier gedruckt wird. Sie sind wahrscheinlich mit Medienabfragen vertraut, da sie für modernes, responsives Webdesign von entscheidender Bedeutung sind. Medienabfragen sind auch für die Erstellung von Druckstilen erforderlich.

Dadurch wird der Text im Körper schwarz und die Hintergrundfarbe für den besten Druck entfernt:

@media print {
body {
color: #000;
background: #fff;
}
}




Die Chancen stehen gut, dass der Text in Times New Roman gedruckt wird. Daran ist nichts auszusetzen, aber was ist, wenn Sie eine andere Schriftart angeben möchten? Genau wie Sie es in Ihren Standardstilen getan haben, kann dies auch im Druck erfolgen. Wenn wir schon dabei sind, vergessen wir nicht die Zeilenhöhe.
		




body {
font: 13pt Tahoma, Geneva, sans-serif;
line-height: 1.5;
}




Ausblenden unnötiger Elemente


Sie sind wahrscheinlich darauf konditioniert worden, das display: none auf ein Minimum zu beschränken, aber das ist für Ihre Druckstile völlig in Ordnung. Indem Sie einige Elemente ausblenden, geben Sie Ihren Benutzern eine bessere Möglichkeit zum Drucken und halten alles Unnötige vom Ausdruck fern. Das Ziel ist es, ihnen zu ermöglichen, effektiv die wichtigsten Inhalte auszudrucken, nicht die genaue Webseite.


Es gibt Seitenelemente, die nicht notwendig sind, wie Navigation, Fußzeile, Seitenleiste und Hintergrundbilder, also ist hier unsere display: none wird sich als nützlich erweisen.
		




@media print {
nav, aside, footer {
display: none;
}

section {
background: none
}
/* section had a patterned background in the default styling which is best removed in the print style */
}




Artikel werden oft gedruckt, daher ist es großartig, wenn jeder Artikel auf einer separaten Seite beginnt. Es ist für den Benutzer viel einfacher, seine Ausdrucke zu organisieren, wenn die wichtigsten Informationen gruppiert und nicht auf mehrere Seiten verteilt sind.


Indem Sie dies zu Ihrem Druck-Stylesheet hinzufügen, beginnen die Artikel immer auf einer neuen Seite:


article {
page-break-before: always;
}




Es ist auch eine großartige Idee, die ungeordneten Listen auf derselben Seite zusammenzuhalten:
		




ul {
page-break-inside: avoid;
}




Gehen wir noch einen Schritt weiter und machen dasselbe für Überschriften, Bilder, Blockzitate, Tabellen und andere Listenelemente:


h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid
}

img {
page-break-inside:avoid;
page-break-after:avoid;
}

blockquote, table, pre {
page-break-inside:avoid
}

ul, ol, dl {
page-break-before:avoid
}

[/code]

</pre>
<img class="aligncenter wp-image-12547 size-full" src="https://getflywheel.com/wp-content/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" />
<pre>
<h3>Page margin measurements</h3>

We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing.



body, article {
width: 100%;
margin: 0;
padding: 0;
}




Hier kann der Abstand für Ausdrucke wirklich fein abgestimmt werden. Im Webdesign sieht man nicht allzu oft Zentimeter, aber es funktioniert hervorragend, um Seitenränder zu bestimmen. Mit der @page Regel zielen wir auf den Abstand ab. Dieses Beispiel lässt 2 cm um alle Ränder herum zu. Diese Messung kann angepasst werden, um mehr oder weniger Platz zu ermöglichen. Beispielsweise möchten Ihre Benutzer möglicherweise Notizen machen, und es wäre hilfreich, einen größeren Spielraum zuzulassen.
		




@page {
margin: 2cm;
}




Wenn Seiten gedruckt und in einen Ordner gesteckt werden sollen, denken Sie daran, dass es die Möglichkeit gibt, die Ränder für jede zweite Seite anzupassen. Die linke Seite ist für die Seiten 1, 3, 5… und die rechte Seite ist für die Seiten 2, 4, 6…


@page :left {
margin: 1cm 3cm 1cm 2cm;
}

@page :right {
margin: 1cm 2cm 2cm 3cm;
}




Die Anpassung der ersten Seite ist in bestimmten Fällen praktisch. Durch die Verwendung der Pseudoklasse :first page kann das Styling der ersten gedruckten Seite bestimmt werden:


@page :first {
margin: 1cm 2cm;
}




print-styling-02


Stresst Sie das Drucken? Hier sind ein paar Tipps, um Ihr Projekt wie ein Profi zu drucken.
		




Bild- und Einführungstextideen


Diese können auf Ihre Website zutreffen oder auch nicht, aber sie sollten dennoch beachtet werden.


Um zu verhindern, dass Bilder abgeschnitten werden und über den Rand der gedruckten Seite verlaufen, wird dies durch Hinzufügen einer Deklaration einer maximalen Breite verhindert.


img {
max-width: 100% !important;
}




Eine nette Willkommensnachricht ist eine großartige Ergänzung. Gedruckte Inhalte werden es noch eine Weile geben, daher ist es immer schön, eine freundliche Nachricht oder Erinnerung hinzuzufügen.


header:before {
display: block;
content: "Thank you for visiting my website at www.mysite.com.   Please check back for upcoming specials and new products.";
margin-bottom: 15px;
padding: 5px 8px;
font-style: italic;
}




Nachdem wir nun einige der Grundlagen der Drucküberlegung behandelt haben, ist es einfach, diese Ideen in Ihr Druck-Stylesheet zu integrieren. Obwohl Print nicht das ist, woran wir letztendlich denken, wenn wir das Internet nutzen, ist es eine großartige Möglichkeit, Ihren Benutzern die gleiche großartige Erfahrung zu bieten, unabhängig davon, wie sie auf Inhalte zugreifen.