Print-CSS/Druckvorlage

30min

einfach

• HTML
• CSS

Die unterschiedlichen Darstellungsmöglichkeiten auf verschiedenen Geräteklassen, insbesondere dem Printmedium, bieten weitreichende Möglichkeiten. Dieses Kapitel beschreibt, wie man Besuchern mit einem herkömmlichen Webformular die Möglichkeit bietet, eine Druckvorlage maschinell auszufüllen, bevor sie dann auf Papier tatsächlich ausgedruckt wird.

Beachten Sie: Wenn Sie Schriftstücke zum Unterschreiben auf Ihrer Website anbieten und wenn diese eine rechtliche Grundlage für irgendwelche Vorgänge bilden, dann ist dieses Vorgehen völlig ungeeignet! (Benutzer könnten das HTML vor dem Ausdrucken und Unterschreiben verändern!)
In solchen Fällen hat es sich bewährt, Print-Dokumente im PDF-Format bereitzuhalten. Je nach Software des Benutzers geht dann vielleicht ein gewisser Komfort verloren, da ein maschinelles Ausfüllen wie in diesem Beispiel nicht gewährleistet werden kann, jedoch ist derzeit diese Sicherheit auf anderem Wege kaum erreichbar.

Die Druckvorlage

Das folgende Beispiel öffnen Sie besser in einem neuen Fenster oder Tab, damit Sie die Druckvorschau sinnvoll nutzen können, die für dieses Beispiel sehr wesentlich ist:

komplexes Druck-Stylesheet ansehen …

Sie können jede inhaltliche Änderung in den Eingabefeldern direkt in der Druckvorschau Ihres Browsers mitverfolgen. Dabei sehen Sie auch, wie bestimmte Inhalte, die nur für entweder den Bildschirm, oder den Drucker beabsichtigt sind, in der jeweils anderen Ansicht unsichtbar bleiben.

Wie wird's gemacht? Im Folgenden werden schrittweise die notwendigen technischen Kniffe besprochen.

@media zur Unterscheidung

Als Basis dient die Abfrage des Medientyps mit @media. Im style-Element wird daher für jeden dieser beiden Medientypen ein Bereich notiert:

Beispiel

@media print {
  
}
@media screen {

}

Damit die Darstellung auf dem Ausdruck anderen Vorgaben folgt, wurde in einem style-Element mit @media print {...} bzw. @media screen {...} jeweils ein eigenes Stylesheet für die Druck- bzw. Bildschirm-Ausgabe eingerichtet.

besondere Klassen zum Verbergen

Die Inhalte, die ausschließlich auf dem Bildschirm angezeigt werden sollen, erhalten die Klasse screen, die exklusiv für den Ausdruck reservierten Inhalte entsprechend print. Damit ist beim Lesen des Codes sofort klar, für welchen Medientyp das jeweilige Element gemeint ist. Außerdem repräsentiert der Klassenname eine Bedeutung, was gute Praxis ist, denn Klassennamen sollten keine visuellen Eigenschaften benennen (wie etwa bold_red_underlined, "fett, rot und unterstrichen"), sondern eine Bedeutung transportieren (hier eben screen, "für den Bildschirm gemeint").

medien-spezifische Klassen zum Verbergen von Inhalten

@media print {
  .screen {
    display: none;
  }
}

@media screen {
  .print {
    display: none;
  }
}

Inhalte, die ausschließlich für den Ausdruck auf Papier gedacht sind, bekommen die Klasse print. Für die Anzeige am Bildschirm sollen diese Inhalte unsichtbar sein, daher wird für diesen Medientyp die Klasse print mit der CSS-Eigenschaft display:none; versehen, der die Inhalte am Bildschirm unsichtbar macht. Für die Inhalte, die exklusiv auf dem Bildschirm angezeigt werden sollen, wurde mit der Klasse screen analog verfahren.

Damit wird erreicht, dass die Bearbeitungshinweise auf dem Papier später nicht zu sehen sind, und dass die Anschrift, die auf dem Papier sehr wesentlich ist, auf dem Bildschirm nicht angezeigt wird.

Die Sache mit den Checkboxen

Wie sieht eine ausgedruckte Checkbox aus? Richtig, das kommt auf den verwendeten Browser und auf das verwendete Betriebssystem an, denn die Eingabeelemente werden von den Browsern im Regelfall so dargestellt, wie sie auf der verwendeten Plattform auch in anderen Kontexten üblich sind.

Aber welchen Sinn hat denn eine Checkbox auf Papier, die nicht angekreuzt ist? Wäre es nicht besser, sie erst gar nicht auszudrucken? Und die Beschreibung für welche Wahl sie steht, ebenso? Das lässt sich mit CSS lösen.

Für das Drucklayout werden Checkboxen generell unsichtbar gemacht. Man kann sie mit dem Selektor [type="checkbox"] auswählen, da ein input-Element nur dann als Checkbox dargestellt wird, wenn man in seinem type-Attribut den Wert checkbox notiert. Genau bei diesem Attributwert setzt dieser Selektor an:

Checkboxen vor dem Ausdruck verstecken

@media print {
  [type="checkbox"] {
    display: none;
  }
}

Elemente, die ein type-Attribut mit dem Wert checkbox haben, werden mit dem Selektor ausgewählt und mit der oben schon erwähnten display-Eigenschaft unsichtbar gemacht.

Mit den Beschreibungen kann man nicht ebenso verfahren, denn diese sollen bei "angekreuzter" Checkbox sichtbar bleiben. Hier hilft der Nachbar-Selektor, denn im HTML-Code steht zuerst die Checkbox und dann ihre Beschriftung. Ob eine Checkbox angekreuzt ist oder nicht, lässt sich in CSS über die Pseudoklasse :checked prüfen. Und wenn wir unangekreuzte Checkboxen wollen, dann benötigen wir die Pseudoklasse :not, um auf ein Nichtvorhandensein zu prüfen.

Beschriftungen von nicht-angekreuzten Checkboxen ausblenden

@media print {
  [type="checkbox"]:not(:checked) + label {
    display: none;
  }
}

Der Nachbar-Selektor selektiert ein label-Element. Dieses muss als vorherigen Nachbarn ein Element haben, welches ein type-Attribut hat, und welches nicht angekreuzt ist. Die oben schon erwähnten display-Eigenschaft macht ein solches label unsichtbar.

weitere "Verschönerungen"

Die Inhalte aus den Eingabezeilen benötigen nun keine eigenen Rahmen mehr, da sie nun wie regulärer Text abgebildet werden sollen. Durch das Entfernen der Rahmen sehen Sie wie reguläre Wörter in einem Fließtext aus. Das erzeugt ein neues Problem:

Auf dem Bildschirm kann man die Beschriftung eines Eingabefeldes vom Inhalt desselben durch die visuelle Gestaltung leicht unterscheiden. Um eine solche Unterscheidung auch auf dem Papier zu erleichtern, bietet es sich an, neben der Verwendung von Fettschrift einen trennenden Doppelpunkt dazwischen anzuzeigen. Auch die aufgelisteten Checkbox-Beschreibungen sind visuell besser verständlich, wenn sie wie Listenpunkte, also mit einem Spiegelstrich voran, abgebildet werden. Dieses tut man mit generiertem Inhalt, wozu die CSS-Eigenschaft content dient.

Verschönerungen auf dem Papier

@media print {
  label:first-child::after {
    content: ":";
  }

  input:not([type="checkbox"]) {
    border: none;
    font-weight: bold;
  }

  [type="checkbox"] + label::before {
    content: " - ";
  }
}

Damit die Beschriftungen der Eingabe-Elemente auf dem Papier einen abschließenden Doppelpunkt erhalten, wurde ihnen ein Pseudoelement ::after angehängt. Dieses erhält durch die Eigenschaft content: ":"; einen Doppelpunkt als Inhalt.

Ort, Datum und Unterschrift

Das Papier soll von einer Person nach dem Ausdrucken unterschrieben werden. Dabei ist es üblich zusätzlich zur Unterschrift auch noch Ort und Datum zu notieren. Also benötigen wir eine Schreibzeile. Diese kann durch einen Textabsatz erreicht werden, der einen oberen Rahmen von einem Pixel Dicke erhält. Schöner wäre aber, wenn die Linie für den Bereich von Ort und Datum von der Linie für die Unterschrift abgesetzt wäre. Der eben genannte Textabsatz müsste also unterteilt werden. Zum Beispiel mit zwei span-Elementen. Wenn diese einen oberen Rahmen erhalten, und wenn diese eine Breite von jeweils 40% der verfügbaren Breite bekommen, ist das Gewünschte erreicht:

Ort, Datum und Unterschrift

<p class="print" id="signature">
  <span>Ort, Datum</span>
  <span>Unterschrift</span>
</p>

#signature span {
  border-top: 1px solid black;
  display: inline-block;
  width: 40%;
}

Die Unterschriftenzeile hat auf dem Bildschirm keinen Sinn, weshalb sie der Klasse print zugewiesen wurde, welche dafür sorgt, dass sie nur auf dem Papier erscheint. Außerdem hat sie eine ID erhalten, damit die span-Elemente darin explizit selektiert werden können. Die CSS-Eigenschaft display:inline-block; war notwendig, damit die CSS-Eigenschaft width wirken kann.

JavaScript für mehr Komfort

Mit JavaScript kann man erreichen, dass ein Druck-Dialog des Browsers für die aktuelle Seite erscheint, um einen Ausdruck einzuleiten. Ebenso gut kann man aus dem üblichen Browser-Menü heraus den Ausdruck starten. Mit einem schönen drucken-Button ist das natürlich komfortabler. Jedoch darf dieser Button nur dann erscheinen, wenn JavaScript auch verfügbar ist, da er sonst keine Funktion hat. Daher wird er mit JavaScript überhaupt erst erzeugt und ins Dokument eingehängt.

Wenn wir schon dabei sind, mit JavaScript mehr Komfort einzubringen, könnte das Betätigen des Buttons auch gleich das aktuelle Tagesdatum einfügen und den im Formular eingetragenen Wohnort als Ort der Unterzeichnung auflisten.

Damit diese Inhalte über der Unterschriftenzeile abgebildet werden, musste etwas tiefer in die Trickkiste gegriffen werden. Wenn Sie sich nun über HTML und CSS hinaus für JavaScript interessieren, dann seien Sie herzlich eingeladen doch in den Quelltext des fertigen Beispiels zu schauen!