CSS-Tricks bekommt endlich ein Druck-Stylesheet

Das ist längst überfällig... aber es ist endlich da: ein Print-Stylesheet!

Ich werde zunächst das gesamte Stylesheet zeigen und dann kurz erklären, was ich mir dabei gedacht habe.

body {
	font-family: Georgia, serif;
	background: none;
	color: black;
}
#page {
	width: 100%;
	margin: 0; padding: 0;
	background: none;
}
#header, #menu-bar, #sidebar, h2#postcomment, form#commentform, #footer {
	display: none;
}
.entry a:after {
	content: " [" attr(href) "] ";
}
#printed-article {
	border: 1px solid #666;
	padding: 10px;
}

1. Sorgen Sie dafür, dass die Schriftart so gut wie möglich lesbar ist

Im Web ist die Schriftart für Artikel hier eine serifenlose Schrift. Auf der gedruckten Seite sind meiner Meinung nach Serifenschriften besser lesbar, daher setze ich die `font-family` auf Georgia. Kein Hintergrund und schwarzer Text ist der Standard, aber nur für den Fall, dass ich ihn explizit im `body` deklariere.

2. Nutzen Sie so viel wie möglich von der Seite

Auch hier denke ich, dass dies ein Standardverhalten ist, aber da ich meinen Inhalt sowieso in ein „page“-Tag packe, dachte ich, ich nutze das, um eine Breite von 100 % einzustellen und jeglichen Rand und Abstand zu entfernen.

3. Standard-Styling ist für den Druck nicht schlecht

Beachten Sie, dass ich abgesehen von der Einstellung der Schriftart kein typografisches Styling vorgenommen habe. Das Standard-Druck-Styling leistet meiner Meinung nach hier von sich aus gute Arbeit. Dies setzt voraus, dass Sie eine qualitativ hochwertige Auszeichnung verwenden. In meinen Artikeln ist der Titel ein `<h2>`-Tag, die Untertitel sind `<h3>`-Tags und die Textabsätze sind in `<p>`-Tags. Dies führt zu einer schönen Hierarchie von Schriftgrößen auf der gedruckten Seite, ohne dass Styling erforderlich ist.

Code-Beispiele, die in `<code>` und `<pre>`-Tags eingeschlossen sind, verwenden standardmäßig eine Monospace-Schriftart, was großartig ist. Ungeordnete Listen erhalten einen gesunden Einzug und sind mit Aufzählungszeichen versehen.

3. Entfernen Sie den zusätzlichen Kram

Wahrscheinlich, wenn jemand einen Ihrer Artikel ausdruckt, dann, weil er den Inhalt als Referenzmaterial speichern, später lesen oder mit einem Freund teilen möchte. Sie brauchen Ihre Seiten-Navigation, Seitenleiste oder schicke Fußzeile wirklich nicht zu sehen. Wieder davon ausgehend, dass Sie schönen und semantisch korrekt ausgezeichneten Code haben, sollte das Entfernen dieser Bereiche so einfach sein, wie den `display`-Wert der Elternelemente dieser Bereiche auf `none` zu setzen.

4. Zeigen Sie die URLs im Inhaltsbereich an

[Dank an David Walsh für diese Idee] Links in Ihrem Inhalt sind auf der gedruckten Seite nutzlos. Es wäre ziemlich cool, wenn Sie einfach mit dem Finger auf das verlinkte Wort tippen und es die Webseite auf Ihrem Computer öffnen könnte, aber das habe ich noch nicht einmal in Filmen gesehen. Vorerst können wir nur das CSS-Pseudo-Element `::after` verwenden, um die URL direkt neben dem Link einzufügen, indem wir das `content`-Attribut verwenden. IE unterstützt es nicht, aber c'est la vie.

5. Fügen Sie eine Dankesnachricht ein

Am Ende meines Inhalts platziere ich eine kleine „Dankeschön“-Nachricht. Dieser Bereich wird im Web versteckt, aber beim Drucken des Artikels angezeigt. Ich denke, das ist eine nette Geste und dient auch als Erinnerung, dass sie auf die Website zurückkehren sollten, um neue Inhalte zu finden.

6. Optional: Seitenumbrüche

Ich hatte nicht das Gefühl, dass meine Artikel spezielle Seitenumbrüche erforderten, aber wenn Sie *wirklich lange* Artikel mit Unterüberschriften schreiben, sollten Sie definitiv in Erwägung ziehen, Seitenumbrüche vor jeder dieser Unterüberschriften zu platzieren. Ein weiterer guter Ort für einen Seitenumbruch ist direkt vor einer recht großen Tabelle. Nichts ist schlimmer, als zwischen Seiten blättern zu müssen, um eine Tabelle zu betrachten, weil sie zufällig zwei Seiten überlappt hat, obwohl sie auf eine gepasst hätte. Ich plane, diese von Fall zu Fall zu verwenden. Mehr zu Seitenumbrüchen hier.

---

Also können Sie jetzt hingehen und meine Artikel nach Belieben ausdrucken! Lassen Sie mich wissen, ob Sie noch andere Tipps für Druck-Stylesheets haben oder Kommentare zu meinen haben.