WP – Druckversion

Jeder, der sich ernsthaft mit der Gestaltung von Webseiten beschäftigt hat, weiß es: Die beim Print-Design geltenden Regeln und Arbeitsweisen lassen sich nicht ohne weiteres aufs Web übertragen. Andersrum klappt’s aber ebenfalls nicht: Die meisten Webseiten lassen sich nicht ohne weiteres auf Papier übertragen.

Viele Leute lesen allerdings insbesondere längere Texte aber lieber auf Papier. Bei Arbeiten für Schule & Uni ist es mitunter nötig, die verwendeten Internetquellen ausgedruckt beizufügen. Kurzum: es gibt viele Gründe Webseiten auszudrucken und auch viele Leute die ebendies tun.

Print-Stylesheets von Gerrit Kaiser

Um das ganze auch bei WordPress zu integrieren geht man folgendermaßen vor. Im ersten Schritt solltet ihr euch ein Stylesheet erstellen, mit dem das Layout festgelegt wird, genauso wie bei der Screen-Version. Dazu benötigt man in der Regel weniger Code, da man ja für die Druckversion viele Klassen und IDs weglassen kann. Für den Anfang nehmt ihr am besten das Stylesheet, welches ihr hier downloaden könnt. Die vielen kleinen Feinarbeiten könnt ihr dann im Nachhinein anpassen. Nach dem Download der Datei müsst ihr sie in eine .css -Datei umbenennen. Den Code, den ihr darin findet erkläre ich im folgenden etwas. Für mehr Information gibt es genügend Seiten im Netz, die sich ausgiebig und wesentlich qualifizierter mit dem Thema CSS beschäftigen.

Demo:

Um das ganze mal life zu sehen, müsst ihr nur diese Seite in der Druckvorschau ansehen. (im Browser: Datei –> Druckvorschau)

Anmerkung:

Der Artikel dient vorrangig Web-Anfängern. Echte CSS-Profis wissen mit Sicherheit mehr un detailreicher zu berichten. Trotzdem sind fast alle WordPress-Seiten in den Unweiten des Internets ohne Print-Stylesheet zu finden. Vielleicht kann ich hermit eine kleine Anregung geben, so dass sich der eine oder andere auch an die Integration eines Print-Stylesheets macht. Für die vielen Tutorials und Berichte, auf den unterschiedlichsten Websiten, wäre es jedenfalls hilfreich, wenn man beim Ausdrucken derartiger Texte schnell zu einem vernünftigen Ergebniss kommt.

Um unnötige IDs oder Klassen auszublenden erweitert ihr Sie mit diesem Code im Stylesheet:

display: none;

Zu den einzelnen Code-Schnipseln:

Im folgenden liste ich alle IDs auf, die ich nicht benötige und blende Sie aus.

#header, #respond, #footer, #commentform, #headerimg, a#tooCool, #searchform, #s,
 #submit, #sidebar, #wp-calendar {
	display: none;
}

Das gleiche machen wir mit xhtml-Befehlen, die an IDs angelegt sind. Außerdem sind da noch einige Klassen, die ich in der Print-Version ausblenden möchte.

#respond p, #comment p, #commentform p {
	display: none;
}

select, input, textarea, ckeckbox, img, dd {
	display: none;
}

.navigation, .postmetadata, .subscribe {
	display: none;
}

Serifen – Ja oder Nein

Im folgende legen wir die grundlegenden Eigenschaften für das Dokument fest, also im body. Hierbei sollte beachtet werden, dass für Printmedien in der Regel Schriften mit Serifen genutzt werden damit erhöht sich die Lesbarkeit für das menschliche Auge auf dem Papier. Bei der Farbgebung aller auszugebenden Elemente ist darauf zu achten, dass von vielen Nutzern der Schwarz-Weiß-Druck bevorzugt wird, also das ganze mal in Graustufen ansehen.

body {
  text-align: left;
  margin: 0;
  padding: 0;
  font: 12pt Garamond, Palatino, "Times New Roman", Times, serif;
  color: black;
  background: transparent;
}

Die Überschriften werden gesondert festgelegt. Bei Printmedien werden hier eigentlich serifenlose Schriften angewandt, mir gefiel allerdings eine serifenhaltige Schrift besser und deshalb also folgender Code.

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin: .75em 0 .5em 0;
  text-align: left;
  page-break-after: avoid;
}

Als nächstes rücke ich alle Absätze ein wenig ein, um es etwas übersichtlicher zu gestallten. Aber auch hier gilt, keine Grenzen an die Vielfalt.

p {
  margin: .5em;
}

Wer es besonders nah an das „genormte“ Printmedium heran bringen möchte, der setzt jede erste Zeile noch ein wenig nach innen. Allerdings hier aufgepasst, WP setzt bei den geschriebenen Beiträgen gerne einige unnötige Tags. Einfach mal ausprobieren.

p+p {
  margin-top: -1em;
  text-indent: 2em;
}

Kommen wir nun zu den Links, diese stellen am Bildschirm eine wichtige Grundlage dar und müssen also irgendwie an das Papier übergeben werden. Dafür hat CSS eine Lösung parat. Im ersten Abschnitt lege ich eine Farbe für die Links fest, damit sie beim Lesen trotzdem auffallen. Im folgenden hinterlege ich hinter jedem Link die Adresse in Klammern, damit kann jederzeit der Link nachvollzogen werden. Das ganze sieht dann so aus:

Linktest (Link zu: http ://bueltge.de)

a, a:visited, a:hover, a:visited:hover {
  color: darkolivegreen;
  background: transparent;
  text-decoration: none;
}

a[href]:after {
	content:" (Link zu: < "attr(href)">) ";
	color: lightgrey;
	background-color:inherit;
	font-style:italic;
	font-size: 9pt;
}

Das gleiche mache ich mit den Attributen title und acronym. Hier lassen sich sicher weitere Attribute ergänzen.

*[title]:after {
	content:" ("attr(title)")";
	color: lightgrey;
	background-color:inherit;
	font-style:italic;
	font-size: .7em;
} 

*[acronym]:after {
	content:" ("attr(acronym)")";
	color: lightgrey;
	background-color:inherit;
	font-style:italic;
	font-size: .7em;
}

Bei der Verwendung von Zitaten und deren Quellen nutze ich auf dieser Website eine farbige Formatierung, auf dem Papier ist dies ungünstig, deshalb habe ich folgenden Code eingefügt. Dabei werden alle Zitate zwischen zwei Anführungszeichen ausgegeben. Die müssen im Unicode angegeben werden, damit sie der deutschen Typographie entsprechen. Das ganze wird auf q– und blockquote-Elemente angewendet.

*[cite]:after {
	content:close-quote" (Quelle: "attr(cite)")";
	font-size: .7em;
} 

* {
	quotes: "\201E" "\201C" "\201A" "\2018";
} 

q:before, blockquote:before {
	content:open-quote;
} 

q:after, blockquote:after {
	content:close-quote;
}

blockquote, q, cite {
	padding-left: 2em;
}

Der letzte Abschnitt im Stylesheet dient der Formatierung von Code. Diese Art der Zuweisung kann natürlich auf jedes beliebige Element angewendet werden.

code {
	font: .8em 'Courier New', Courier, Fixed;
  color: gray;
	padding-left: 2em;
}

code a[href]:after {
	content:"";
}

Einbinden des Stylesheet

Damit das Print-Stylesheet mit WordPress genutzt werden kann, solltet ihr den kommenden Code in euren Header implementieren. Das könnt ihr natürlich über die Admin-Oberfläche eures WP machen (Themes –> Theme-Editor).

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" 
type="text/css" media="print" />

Wenn ihr diesen Code einfügt, dann muss eure Datei „print.css“ natürlich im Theme-Ordner liegen, welches ihr verwendet – stylesheet_directory.

Download als txt-Datei: print.css.txt – 2KByte