Design für den Druck mit CSS

bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.

Kommentare

  
  1. Stephan sagt:

    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

  2. Ralf sagt:

    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.

  3. @Stephan: Die ID #top mit ausblenden: display: none;; bzw. in die print.css im ersten Abschnitt aufnehmen

  4. @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.

  5. 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.

  6. Holger sagt:

    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.

  7. Ralf sagt:

    @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.

  8. SiGa sagt:

    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!

  9. @SiGa: In der print.css gelten die gleichen CSS-Möglichkeiten, also geht es nur per float.

  10. SiGa sagt:

    @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?

  11. @SiGa: nein, die Id oder die Klasse werden im Template bzw. im Theme fest gelegt.

  12. Ralf sagt:

    @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

  13. @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.

  14. Ralf sagt:

    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.

  15. SiGa sagt:

    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?

  16. BTTV sagt:

    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.

  17. Eva sagt:

    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.)

  18. BTTV sagt:

    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?

Trackbacks

  1. [...] im Theme eingefügt. Nach Anleitung von Frank Bueltge function showForm(obj) { obj.style.display = 'none'; var ele = [...]

  2. [...] Hier findet ihr eine Vorlage (ganz unten bei print.css) [...]

© 2016, since 2005 bueltge.de [by:ltge.de] · Theme is built by ThemeShift