Webseiten druckfähig machen

Webseiten druckfähig machen

In Deutschland gibt es diesen böse gemeinten Begriff „Internetausdrucker“, der besonders gerne Politikern aufgedrückt wird. Aber sollte man nicht trotz aller Häme den Ausdruckern entgegen kommen?

Genau diesen Gedanken machte ich mir vor Kurzem, als ich so auf meine Webseite schaute. Ehrlich gesagt, hatte ich mich nicht darum gekümmert, wie meine Seite gedruckt aussieht. Ich machte die Probe aufs Exempel und schaute mir mal die Druckvorschau an.

Das Ganze sah nicht besonders gut aus. Viele Seitenelemente, die für den Druck vollkommen egal sind, wären ebenfalls ausgedruckt worden. Zum Beispiel die Seitenleiste und die Kommentare.

Unwichtiges ausklammern

Ich entschloss mich dazu, ein Druck-Stylesheet anzulegen und begann damit, alle unwichtigen Sachen auszublenden. Das betraf die Seitenleiste, die Kommentare und Navigationselemente. Für die Druckansicht wollte ich wirklich nur noch den eigentlichen Text sehen.
Als Grundlage für das CSS nahm ich mir einfach mein CSS aus dem Mobile-Breakpoint. Ergänzend dazu blendete ich noch die Navigation aus.

Um ein Stylesheet einzubinden, dass nur für einen Drucker greift, gibt man folgendes im <head></head> an:

<link href="print.css" rel="stylesheet" media="print">

Fonts

Nun hatte ich nur noch den eigentlichen Artikel vor mir. Sofort war klar: der Fließtext muss kleiner. Für den Druck setzte ich diesen also auf 12pt und passte zudem noch ein paar Paddings und Margins an.

Links kann man nicht ausdrucken. Ich könnte die enthaltenen Links natürlich unten an den Artikel hängen und dann kann, wer will, diese nach dem Ausdrucken brav abtippen. Wirklich toll ist das aber nicht.
Das Problem was ich sah, war: wenn nun jemand nach ein paar Tagen den gedruckten Artikel sieht und auf einen weiterführenden Link will, was dann?

Endlich ein sinnvoller Einsatz für QR-Codes!

In der Druckansicht blende ich deshalb unter jedem Artikel einen QR-Code ein, der auf die Seite zeigt. Wer immer also irgendwann den gedruckten Artikel vor sich hat, braucht nur den Code zu scannen und landet wieder auf dem Original im Web.

Um den QR-Code zu erstellen, benutze ich eine JavaScript-Bibliothek, der ich nur die URL und ggf. eine QR-Code-Größe reingeben muss, um einen Code zu erhalten.

Meinungen?

Ich bin gespannt, wie relevant das Thema Print-Stylesheets noch für andere ist und freue mich über Kommentare und Anregungen zum Thema!

Bonus

0
0
blog comments powered by Disqus