Du hast eine Webseite ohne Print-Stylesheet und willst deine Seite für die Druckausgabe optimieren. Gehen wir es an!

Der Weg zu einem Print-Stylesheet

media=„screen“ oder lieber überschreiben?

Die Zeile im Head-Bereich unseres (X)HTML-Dokuments, in der das Stylesheet aufgerufen wird schaut für gewöhnlich so aus:
<link type=„text/css“ href=„style.css“ rel=„stylesheet“.
Das bedeutet, es wird eine CSS-Datei aufgerufen, die für ALLE Medien verwendet wird. Mit folgender Zeile rufen wir eine CSS-Datei auf, die sich nur auf das Medium „Print“ bezieht:
<link type=„text/css“ href=„print.css“ rel=„stylesheet“ media=„print“>
Achtung: Haben wir diese 2 Zeilen in der selben Reihenfolge wie oben in unserer (X)HTML-Datei stehen, wird erst style.css für alle Medien aufgerufen, da das Attribut „media“ nicht genutzt wird und standartmäßig auf „all“ gesetzt ist, dann wird print.css aufgerufen, und überschreibt für den Druck alle Style-Anweisungen, die vorher schon in style.css aufgerufen wurden. Man könnte es auch anders machen: wäre die erste Zeile
<link type=„text/css“ href=„style.css“ rel=„stylesheet“ media=„screen“>,
so würde style.css garkeine Style-Anweisungen für den Druck zu vergeben haben. Wir müssten also theoretisch jeden einzelnen Selektor, den wir auf dem Medium Druck ansprechen möchten nochmals seinen „Style“ geben.

Bevor wir mit unserer print.css anfangen sollten wir also gut überlegen, was hier für uns einfacher ist; gegebene Styles überschreiben oder alle neu anlegen.

@print — Anweisungen

Als allererstes, ganz oben in unsere Datei print.css müssen die Anweisungen für das Medium print erscheinen. Bei mir sieht das so aus:
@page {
size: auto;
margin: 0.5cm 0.5cm 1cm 1.5cm;
}

Diese Zeilen helfen dem Browser, die Seite einzurichten und geben einen Rand zum Inhalt an — dieses Beispiel zeigt einen Satzspiegel mit 0,5cm Kopf– und Außensteg, 1cm Fußsteg und 1,5cm Innensteg. Aber Achtung! Wir können keine Angaben über Außen– und Innensteg machen. Ich gehe bei dem Beispiel davon aus, das Außensteg rechts und Innensteg links ist.

Display:none;

#navi {
display:none;
}

Diese Eigenschaft lässt ein Element von der Ausgabe verschwinden. Im Gegensatz zur Eigenschaft „visibility“ wird auch der Platz an dem das Element steht für andere Elemente freigemacht. Auf diese Weise können Menu und andere Bereiche auf der Seite ausgeblendet werden.

Brauchbar trotz S/W-Drucker

Viele Gestalter setzen bei typografischen Auszeichnungen im Internet auf Farbe — wie wir in diesem Blog — beispielsweise Hyperlinks werden im knalligen Orange oder Blau angezeigt. Doch viele Internetsurfer haben keinen Farbdrucker, farbige Links würden somit Grau aus dem Drucker kommen — die Links sind schlechter lesbar und Hervorhebungen evtl. überhaupt nicht erkennbar. Daher sollten die Auszeichnungen für den Druck angepasst werden! Geeignet sind die CSS-Eigenschaften font-weight, letter-spacing, font-variant, text-decoration oder auch border und background (z.B. grau). Auf SELFHTML wird gezeigt, wie man die Attribute der HTML-Elemente im Druck visualisieren kann, beispielsweise gibt es Stylesheet-Anweisungen, die das Ziel für einen Hyperlink nach selbigem anzeigen lassen.

nur für den Druck!

Auf den Seiten agentur-lindner.com und taschenkalender.org haben wir Elemente untergebracht, die nur im Druck angezeigt werden. Dies erreichen wir indem wir dem Element auf dem Medium „Screen“ die Eigenschaft display:none; und auf dem Medium „Print“ display:inline oder block geben. Auf diesem Weg kann man beispielsweise am Rande darauf hinweisen, dass die Seite gedruckte Seite für die Druckausgabe optimiert und nicht mit dem Screendesign identisch ist.

Positionierung anders als sonst

Auf Seiten wie www.agentur-lindner.com werden beim Layout absolut positionierte Elemente eingesetzt. Sie „kleben“ an den Rändern des Browserfensters oder haben einen festen Abstand zu den Rändern oben, unten rechts, oder links, egal wie man das Fenster vergrößert oder verkleinert. Im Druck wird sowas jedoch ziemlich witzlos: „position:absolute;“ bedeutet für den Druck, dass das Element auf jeder gedruckten Seite auf seiner Position angezeigt wird und kann somit auf der 2ten und folgenden Seiten den Inhalt überdecken. Layouts, die von der absoluten Positionierung leben müssen komplett überdacht werden, möchte man ein absolut positioniertes Element auch auf dem bedruckten Blatt Papier zu sehen bekommen.
Dieses Verhalten der Browser bei der Druckausgabe bietet allerdings auch neue Möglichkeiten: ein Wasserzeichen auf jede gedruckte Seite zu setzen oder ein Layoutelement auf jeder gedruckten Seite am unteren Rand anzuzeigen. Wer kreativ ist, dem fallen bestimmt noch weitere Möglichkeiten ein.

In Webseiten werden Bilder üblicherweise auf 3 Arten platziert:

1. links ausgerichtet mit rechts umfließenden Text
2. rechts ausgerichtet mit links umfließenden Text
3. Bild mittig ohne umfließenden Text

So gut wie nie benötigt man ein links oder rechts ausgerichtetes Bild OHNE umfließenden Text.

Wenn man eine Webseite „per Hand„erstellt, dann legt man am besten drei Styles für diese Zwecke an, also z.B. <img class=„left“ src=… >, <img class=„right“ src=…>, <img class=„center“ src=…>. Die Styles werden dann z.B. folgendermaßen definiert:

img.left{
	float: left;
	margin: 5px 13px 5px 0;
}

entsprechend für die rechts ausgerichteten Bilder:

img.right{
	float: right;
	margin: 5px 0px 5px 13px;
}

So erreicht man, dass zwischen Bild und Text ein Abstand von 13px erhalten bleibt, ein Bild, das am linken Rand ausgerichtet ist, aber nicht vom Rand weg gerückt wird.

In Joomla geht es leider nicht so einfach wie OHNE CMS. Das CMS macht uns das Leben schwer, indem es für Bilder nicht eine Klasse definiert, die man dann bequem in der Stylesheetdatei so formatieren kann, wie man es will, sondern Joomla verwendet statt dessen direkt die Formatierung <img style=„float:right“ …>.

Mir ist leider kein Weg bekannt, wie man Joomla dazu bewegen kann (ohne im Code zu hacken oder Erweiterungen zu installieren, die dann mehr Probleme mitbringen, als sie lösen) eine Möglichkeit zu bieten Bilder bündig am Seitenrand und mit Abstand zum umfließenden Text zu formatieren. Ich kann gar nicht glauben, dass es dafür keine „saubere“ Lösung gibt. Das Problem müsste doch jeder haben, der Joomla einsetzt. Wie kann es sein, dass es nur uns stört — oder haben wir eine ganz banale Lösung für dieses Problem einfach ÜBERSEHEN?

Wie macht ihr das?