Ähnliche Beiträge
- CSS1K
- Simple Media Queries Debugging
- WordPress Admin Style Guide
- WordPress Admin Bar nach unten verschieben
- HTML5 – Webseiten innovativ und zukunftssicher
- Simple Media Queries Tester
Journal
- Trend. Meiner.
- WordPress mehrsprachig nutzen – ein Lösungsvorschlag
- Besser die Wahrheit?
- Einschränken der Daten-typen im WordPress Upload
- Trenne Logik von der Ausgabe, mittels Hooks in WordPress
Projekte
Abonniere die neusten Artikel via Sidebar
ein-/ausblenden
Design für den Druck mit CSS
Anzeige
Leider ist es immer noch nicht selbstverständlich, dass Webseiten ein entsprechendes Layout für den Printbereich, zum Drucken der Seite in Papierform, bereit stellen. Bei der Umsetzung einer Seite gehört es meines Erachtens zum guten Ton und Qualität, dass ein Stylesheet für den Druck bereit gestellt wird.
Um das Thema mal wieder ein wenig aktuell zu machen, stelle ich hier mal als Download ein Stylesheet bereit, mit dem man man schon eine ganze Menge an Optimierung für den Druck abdecken kann. Die einzelnen Abschnitte sind dokumentiert, so dass auch der Laie den Einstieg findet und entsprechende Anpassungen für die Verwendung im jeweiligen Projekt vornehmen kann. Weitere Hinweise und Einbindungssyntax im folgenden Artikel.
Eine druck-freundliche Version der Webseite sorgt für Genuss beim Leser, gerade wenn es umfassende Texte oder Tutorials geht, ist dass Ausdrucken keine Seltenheit. CSS hat dafür wunderbare Eigenschaften und macht es dem Entwickler leicht, eine optimierte Ausgabe für den Druck bereit zu stellen. Bitte nutze diese Möglichkeit auch!
Ganz besonders sind Links zu Händeln, denn nach dem Druck sind diese Informationen noch immer relevant und so sollten sie auch bestehen bleiben. Daher zeige ich alle Pseudeklassen an und gebe sie in abweichender Form aus. Damit gehen Sie dem Leser nicht verloren und man kann beim Lesen der Papierform darauf zurück greifen. Ein typisches Beispiel in HTML sieht so aus ...
<a href="http://bueltge.de/" title="Klick, um zur Startseite zu gelangen.">Link zu Startseite</a>
... und wird in der Druckform wie folgt ausgegeben.
Link zu Startseite (Link zu: http://bueltge.de/)
Einbinden des Stylesheet
Der Schlüssel für die Nutzung des Stylesheet als Drucklayout ist das Attribut media mit dem Wert print. Der folgende Beispielcode bindet das Stylesheet print.css ein und sorgt dafür, dass man es gezogen wird, wenn die Ausgabe Druck erfolgt. Diese wird unter anderem auch gezogen, wenn man im Browser Druckvorschau wählt, was das Testen sehr angenehm gestaltet.
<link rel="stylesheet" href="http://example.com/css/print.css" type="text/css" media="print" />
Bei der Nutzung von WordPress gehört es ebenso zum guten Ton, dass man ein Print-Stylesheet anbietet. leider stellen nur sehr wenige Themes dieses bereit. Dahingehend der Aufruf an Theme-Entwickler - bitte macht euch die Mühe und erweitert euer Theme um ein Stylesheet für den Druck!
Ablegen sollte man das Stylesheet dann im Theme-Ordner, so dass es nur Verwendung findet, wenn das Theme aktiv ist und der Verweis in die header.php des Themes hinterlegen.
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" type="text/css" media="print" />
Alternativ kann man auch mit meinem Basis-Theme arbeiten, bei dem es ein Druck-Stylesheet gibt. Das Theme ist für den Start in ein neues Theme für WordPress ausgelegt und bringt einige Vorgaben mit.
Download:
Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.
Download als zip-Datei: print.css - 2 kByte
Weitere Infos zum Thema
Historie
- 0.1 - erster Wurf
- 0.2 - Abbrevations aufgenommen, #header verfeinert, so dass der Blogtitle bleibt, Links optimiert, ...
19 Kommentare und 3 Trackbacks zu „Design für den Druck mit CSS“
Kommentar schreiben
Kommentar-Hilfe
händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.
Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.
xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>
Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als < und > als > einfügt.
E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.
Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.
Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.
Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.
Das Weblog wird angetrieben von
17. Juni 2008 um 18:11
Hallo Frank,
Du hast völlig Recht. Super Vorbereitung Deine print.css, die ich gleich zur Anpassung benutzt habe. Eine Frage habe ich noch. Auf der Druckseite werden bei auch die Anker einer Seite in Form von [#top] zum Beispiel mit angezeigt. Hast Du vielleicht einen Tipp, wie ich auch diese Ausgabe auf der Druckseite unterdrücken kann?
Gruß Stephan
17. Juni 2008 um 20:03
17. Juni 2008 um 20:33
Deine Lösung finde ich so ein Zwischending. Die einen wollen die Links dabei haben, den anderen geht es nur um den Text. Für diejenigen die die Links dabei haben wollen, könnte deine Lösung zu unübersichtlich sein. Die anderen stören sich an den immer wieder eingeschobenen Links. Zudem leidet die Lesbarkeit und Übersicht extrem wenn häufiger lange Links im Fließtext vorkommen.
Ich habe mir auch mal ein Stylesheet für die Druckausgabe zusammen gebastelt. Allerdings habe ich lediglich die Bereiche ausgeblendet, die nicht gedruckt werden sollen. Meistens sind das schmückende Grafiken oder verschiedene Menüs die im Ausdruck wenig Sinn machen.
Für jemanden der oft Texte schreibt die ausgedruckt werden, zum Beispiel ein mehrteiliges Tutorial, würde es sich anbieten dem Besucher mehrere Druckvarianten anzubieten. Die "schnelle" Methode über das Stylesheet welches auch von den meisten Browsern verwendet wird wenn der Druckbefehl aus dem Menü gewählt wird.
Dabei sollte auf schmückendes Beiwerk und Designeskapaden verzichtet werden. Der Fokus sollte darin liegen den Text aufs Papier zu bekommen.
Und für diejenigen die "mehr" wollen, sollte dann auch ein entsprechender Link (Druckversion) zur Verfügung gestellt werden. In einem kleinen Script kann man dann den Text druckfreundlicher umgestalten (mehrspaltig?), Links am Seitenende zusammenfassen und ggf. andere Optionen anbieten (Grafiken/Bilder ausblenden).
Mal konkret zu deiner Lösung:
- das "Link zu:" vor jedem Link finde ich überflüssig. Ich denke doch das ich weiß das ein http:// am Anfang meist einen Link darstellt.
- das selbst die Links zu den Grafiken ausgegeben werden, finde ich auch ein wenig überflüssig. Die Grafik wird ja ausgedruckt, wozu dann der Link?
- HTML-Acronyme sind etwas feines. Im Web. Einmal mit der Maus drüber gefahren, schon weiß man wozu die Abkürzung steht. Wird die Abkürzung jedoch in einem Fließtext 20, 30 mal oder öfters verwendet, ist es irgendwann nur noch störend wenn sie ständig in Klammern dahinter ausgeschrieben wird.
- Schmuckschriften finde ich bei links deplatziert. Vor allem wenn sie dann auch noch kursiv und kleiner als der eigentliche Text sind. Drucke ich mehrere Seiten auf ein Blatt Papier, kann ich die Links nicht mehr entziffern. Eine klare, schmucklose Schrift (Courier, Arial, Verdana, usw.) wäre hier vielleicht die bessere Wahl.
- Warum sind die Grafiken online im Absatz eingebunden, stehen in der Druckversion jedoch außerhalb des Absatzes? Ich sehe keinen Grund warum die Grafiken in der Druckversion nicht genauso platziert werden sollten wie in der Onlineversion.
So. Ich hoffe das war ausreichend Feedback
Die Idee das Thema mal anzuschneiden finde ich aber wirklich gut und wichtig. Es gibt genug Blogger die tolle Geschichten schreiben die man sich ausdrucken könnte. Leider verzichten sie alle durch die Bank weg auf Print-Stylesheets so das man das mit dem Ausdrucken dann doch lieber lässt.
18. Juni 2008 um 07:39
@Stephan: Die ID #top mit ausblenden:
display: none;; bzw. in die print.css im ersten Abschnitt aufnehmen18. Juni 2008 um 08:02
@Ralf: Danke dir für deine ausführliche Rückmeldung. Die Idee eine Vorlage beriet zu stellen, kam mir, weil mich die vielen Seiten im Netz stören, die diese Möglichkeit nicht haben und zum Teil noch von sich behaupten, wie toll ihr Wissen und Können ist.
Sicher wäre das Anbieten von unterschiedlichen Varianten sehr gut; ich glaube aber nicht, dass die Leser das Nutzen. Nach meiner Erfahrung im Unternehmen klicken die Besucher im Browser auf Drucken und dann wird ja die erste Print-Variante gezogen.
Ich schwanke ebenso zu Nichtdarstellung von Bilder, da sie in meinem Fall meist Beiwerk sind, welches im Druck nur Kosten verursacht.
Die Möglichkeit mit "Link zu" ist nur eingeflossen, weil ich aufzeigen wollte, was geht, in diesem Bereich sind ja viele User unbedarft und bewegen sich vorrangig auf CSS1-Level.
Ich werde deine Ideen noch einfließen lassen und eine neue Version hochladen.
Danke, wie immer von dir, überlegte und direkte Hilfe und Kritik.
19. Juni 2008 um 14:17
Habe mal ein wenig am CSS geschraubt und nun sind wieder einige Optimierungen eingeflossen, unter anderem die Hinweise von Ralf. Außerdem wurden Abbrevations berücksichtigt, die aktuell aber auskommentiert sind.
22. Juni 2008 um 22:37
24. Juni 2008 um 11:51
21. Juli 2008 um 18:11
Danke für diesen Beitrag. Habe ich gleich eingebaut. In meinem bisherigen Lieblings-Theme war sowas noch nicht drin. Die Druckvorschau war dementsprechend katastrophal.
Das Ausschreiben der Links habe ich aber auf den Beitragstext eingeschränkt, da sonst auch der verlinkte Blogtitel und z.B. der Autor-Link das Design sprengen würden.:
[DAU-mode]
#entrytext a[href]:after {...}#entrytext *[name]:after {...}
#entrytext *[title]:after {...}
[/DAU-mode]
Noch genialer wäre es allerdings, wenn im Text Fußnoten an den Linktext gehängt werden könnten und dann am Ende der Seite die Linkadressen zu den Fuß- bzw. Endnoten aufgelistet werden.
28. Juli 2008 um 17:19
@Holger:
Im normalen CSS:
.fussnote, #linkliste {display:none; visibility:hidden}Im Print-Css:
.fussnote, #linkliste {display:inline; visibility:visible}Dann benötigst du nur noch ein Plugin welches an den Links Fußnoten hängt und am Ende des Beitrages eine Liste mit den Links erstellt. Ich hatte mir mal so ein Plugin gebastelt, dass sind relativ wenige Zeilen PHP. Vielleicht findet sich auch noch ein geeignetes Plugin, welches sich dann dementsprechend anpassen lässt.
25. August 2008 um 13:24
Hallo, Frank!
Vielen Dank für die vielen nützlichen Tipps! Aufgrund deiner Anregungen baue ich mir derzeit ebenfalls eine print.css für meine entstehende Seite. Ist neu für mich, daher eine Frage: Wie kann ich erreichen, dass Bilder, die mittels .alignleft oder .alignright nach links oder rechts gefloatet wurden, in der Druckausgabe ebenfalls entsprechend vom Text umflossen werden? Mit floats in der print.css schaffe ich mir Ärger an den Hals mit den nachfolgenden Text und muss die floats irgendwo wieder aufheben etc... Umständlich. Soll man ja auch vermeiden. Text immer unterm Bild sieht aber in vielen Fällen auch nicht gut aus. Vielleicht denke ich ja nur kompliziert. Geht´s auch einfach? Wäre sehr dankbar für einen Tipp!
25. August 2008 um 14:04
@SiGa: In der print.css gelten die gleichen CSS-Möglichkeiten, also geht es nur per float.
25. August 2008 um 14:39
@Frank: Danke für die rasche Auskunft! Also umständlich oder gar nicht. OK...
Gleich noch eine Frage: Die vielen Link-URL´s (auch für Überschriften oder die Metadaten) stören mich irgendwie. Hat ein Post/Artikel "von Haus aus" eine Klasse, sodass ich mitteilen könnte, dass Link-infos nur innerhalb von Artikeln hinzugefügt werden sollen? Oder wie könnte man das bewerkstelligen?
25. August 2008 um 15:29
@SiGa: nein, die Id oder die Klasse werden im Template bzw. im Theme fest gelegt.
26. August 2008 um 17:24
@Frank: class post? Ich denke die meisten Themes verwenden die Standard-Klasse "post" für den Beitrag.
@SiGa: Meistens hilft ein Blick in den HTML-Quellcode um zu sehen welche Bereiche welche Klassen/IDs besitzen. Für den FireFox gibt es relativ viele Add-ons um sich den Quellcode formatiert anzeigen zu lassen. Ein recht einfaches ist z.B. View Source Chart
26. August 2008 um 19:48
@Ralf: meist schon, aber nicht immer, denn die Klasse wird ja im jeweiligen Template zugewiesen. Gleiche IDs und class sind ja wieder eigener Stoff zum Diskutieren, wäre aus meiner Sicht schön.
Ich nutze immer gern den Firebug zum suchen von IDs und Klassen.
26. August 2008 um 20:57
Würde quasi auf ein Gütesiegel (Standardkonformes Template/Theme) hinauslaufen. Dazu zwingen kann man ja niemanden, aber es würde, wie bei so vielen Dingen, einiges einfacher machen. zum Beispiel das Umsetzen von Tipps&Ratschlägen.
Web Developer Toolbar. Durch Auswahl von "Aktuelles Element hervorheben" bleibt die Sache dann auch recht übersichtlich.
26. August 2008 um 22:12
Danke für die Hinweise, Ralf. Die genannten Addons hab ich schon länger, bin aber im Umgang (wie halt auch mit WordPress php) noch ein Anfänger, daher die vielen lästigen Fragen...
Aber durch Fragen lernt man dazu, oder?
Web Developer zeigt das so an: #post-80 (als Beispiel). In meiner Theme-css (die ich selbst schreibe - ich habe mir ein eigenes Theme in den Kopf gesetzt) gibt es (noch) keine ID/class post. Von mir kommt nur ein div #content um das Ganze rum. Woher stammt dann #post-80 und wie könnte ich das ansprechen? Oder nochmal ein div mit ID #post um den Loop rum und die Linkangaben in der print.css dann nur diesem zuordnen?
6. September 2008 um 21:16
Interessanter Ansätze. Wenn ich mal Zeit habe, werde ich dies auch mal probieren. Ich hatte bislang nur das Plugin WP-Print im Einsatz, wobei mir das Styling egal war.
4. März 2009 um 14:24
Hallo und vielen Dank für die tolle Anleitung! Ich habe bisher auch WP-Print genutzt, war damit aber nie wirklich zufrieden - diese Lösung ist viel besser!
Eine Frage habe ich noch dazu: Ich benutze das Plugin Multipage-Toolkit. Gibt es eine Möglichkeit, in der Druckansicht nicht nur die aktuell angezeigte Seite, sondern den ganzen Post mit allen Seiten anzuzeigen?
(Hier habe ich zusätzlich eine Anleitung zum Verlinken der Druckvorschau gefunden.)
4. März 2009 um 14:34
@Eva: nein, da WordPress die Seiten zerlegt, ist der Inhalt einfach nicht da.
2. Mai 2009 um 20:14
So jetzt bin ich endlich mal zum Ausprobieren gekommen. Die Umstellung auf eine print.css hat Dank der sehr guten Anleitung auf dieser Seite (inklusive der konstruktiven Kommentare) wunderbar geklappt. Da kann man sich ein Plugin wie WP-Print wirklich sparen! Warum wird so etwas nicht gleich in den Standard-Wordpress-Themen wie classic, default oder default_de vorgesehen?