{"id":502,"date":"2007-08-29T13:18:13","date_gmt":"2007-08-29T11:18:13","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/2007\/08\/29\/richtig-druck-machen-%e2%80%93-einfaches-stylesheet-fur-die-druckausgabe\/"},"modified":"2017-12-03T11:06:42","modified_gmt":"2017-12-03T09:06:42","slug":"richtig-druck-machen-einfaches-stylesheet-fur-die-druckausgabe","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2007\/08\/richtig-druck-machen-einfaches-stylesheet-fur-die-druckausgabe\/","title":{"rendered":"Richtig Druck machen \u00e2\u20ac\u201c Einfaches Stylesheet f\u00fcr die Druckausgabe"},"content":{"rendered":"

Informative Quellen:
\n http:\/\/www.style-sheets.de\/guide\/medien\/print<\/a>
\n http:\/\/www.mediaevent.de\/css\/pagedmedia.html<\/a>
\n http:\/\/aktuell.de.selfhtml.org\/artikel\/css\/drucklayout\/<\/a><\/p>\n

CSS Webseiten bieten neben vielen anderen, noch einen weiteren netten Vorteil: man kann \u00fcber eine print.css auch das Aussehen des Drucks einer Webseite verbessern. Die Voreinstellungen des Browsers f\u00fcr die Printausgabe sind zwar hinreichend, aber sch\u00f6n ist erstens was anderes und zweitens werden doch auch noch viele Bilder mitegdruckt, was nicht sein muss. Daher war ich erfolgreich in Sachen Print.css unterwegs und beschreibe hier mal kurz, was ich gemacht habe.<\/p>\n

Zuerst eine leere Datei unter print.css abspeichern. Der Name kann nat\u00fcrlich frei gew\u00e4hlt werden.<\/p>\n

Print.css einbinden<\/h2>\n

In einem WordPress-Blog kann man die template-url benutzen um die print.css im „head“ richtig zu verlinken:<\/p>\n

<link rel=\"stylesheet\" type=\"text\/css\" media=\"print\" href=\"<?php bloginfo('template_url') ?>\/print.css\" \/><\/code><\/p>\n

Inhalte entfernen<\/h2>\n

Bei der Erstellung einer Druckausgabe muss man sich nun dem zuwenden, was alles nicht auf der Seite erscheinen soll. Was soll beispielsweise ein User mit der ausgedruckten Navigation? Was kann er mit der Sucheingabemaske anfangen? Nichts \u00e2\u20ac\u201c also weg damit.<\/p>\n

Am besten ist es, etappenweise vorzugehen. Also immer mal wieder in der Druckvorschau schauen, was noch vorhanden ist und weggeschaltet werden muss.<\/p>\n

Inhalte lassen sich auch mit visibilty hidden wegschalten. Im Unterschied zu display:none; wird aber der Platz, den das Element ohne hidden einnehmen w\u00fcrde, frei gehalten, was zu unsch\u00f6nen leeren Passagen f\u00fchrt.<\/p>\n

Schrift w\u00e4hlen<\/h2>\n

Auf einem Bildschirm kann man besser eine serifenlose Schrift lesen, auf gedrucktem Papier eine Schrift mit Serifen, wie z.B. die Times New Roman. Da Grau weniger schwarze Tinte verbraucht, als reines Schwarz, habe ich die Farbe auf einen sch\u00f6nen Grauwert gesetzt. Dagegen halten kann man, dass der User bevormundet wird, weil er nun den Tintenfluss nicht mehr selbst einstellen kann. Ich wei\u00df \u00e2\u20ac\u00a6 aber der Designer in mir war st\u00e4rker und ich habe auch keine Serifenschrift verwendet. Frevel … ;-))<\/p>\n

Zum \u00dcbertragen der Schrifteigenschaften benutze ich den Star-Selektor um in einem Rutsch alle Elemente anzusprechen:<\/p>\n

{font: 10pt 'Times New Roman', serif; color:#7a7a7a;}<\/code><\/p>\n

Man beachte: F\u00fcr die Schriftgr\u00f6\u00dfe wird die Einheit pt gew\u00e4hlt!<\/p>\n

Sp\u00e4ter kann man durch Ausnutzung der \u00dcberschreibregel einzelne \u00dcberschriften (insbesondere Permalink) herausnehmen und hierf\u00fcr ein bisschen Farbe ins Spiel bringen:
\nh1, h2, h3, h4, h5, h6, h1.headtitle, h2.posttitle a.permalink <\/code>
\n{font: normal 12pt Verdana, sans-serif;color:#CD3200;}<\/code><\/p>\n

Hintergrundfarben<\/h2>\n

Ganz wichtig f\u00fcr Webseiten mit farbigem Hintergrund:
\n * {background-color: #FFF;}<\/code>
\nAlle Hintergrundfarben auf wei\u00df setzen.<\/p>\n

Seitenumbruch<\/h2>\n

Sch\u00f6n f\u00fcr einen Blog finde ich es, wenn jedes posting eine eigene Seite bekommt. Hierf\u00fcr k\u00f6nnen page-break-after: always; oder page-break-bevor:always: ins Spiel gebracht werden.<\/p>\n

In meinem WordPress-Theme konnte ich den Seitenumbruch durch Zuordnung zum div post-content erreichen.
\n .post-content {page-break-after:always;}<\/code><\/p>\n

Und das war es auch schon.
\nIch werde das in Zukunft f\u00fcr jede Webseite so machen. Ist ein bisschen Arbeit, aber daf\u00fcr doch etwas benutzerfreundlicher – find ich.<\/p>\n","protected":false},"excerpt":{"rendered":"

Informative Quellen:
\n http:\/\/www.style-sheets.de\/guide\/medien\/print
\n http:\/\/www.mediaevent.de\/css\/pagedmedia.html
\n http:\/\/aktuell.de.selfhtml.org\/artikel\/css\/drucklayout\/
\nCSS Webseiten bieten neben vielen anderen, noch einen weiteren netten Vorteil: man kann \u00fcber eine print.css auch das Aussehen des Drucks einer Webseite verbessern. Die Voreinstellungen des Browsers f\u00fcr die Printausgabe sind zwar hinreichend, aber sch\u00f6n ist erstens was anderes und zweitens werden doch auch noch viele Bilder mitegdruckt, was … Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[14,143,177],"yst_prominent_words":[],"class_list":["post-502","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-webdesign-2","tag-css-xhtml","tag-tipps-und-tricks"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/502","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=502"}],"version-history":[{"count":1,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/502\/revisions"}],"predecessor-version":[{"id":4051,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/502\/revisions\/4051"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=502"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}