Styles für bestmögliche Druckergebnisse in Onlinedokumentation

Druckt sich ein Nutzer ein Topic einer Onlinedokumentation aus, ist ihm dieses Topic besonders wichtig. Dementsprechend professionell sollte der Ausdruck gestaltet sein und genau das enthalten, was beim Lesen auf Papier wichtig ist.

Schon mit wenigen Zeilen zusätzlichem CSS- und HTML-Code können Sie hier erheblich zu einer positiven User-Experience beitragen.

Beispiel 1: Für den Druck irrelevante Elemente ausblenden

Sehen Sie sich einmal die Druckvorschau zu der Seite an, die Sie gerade lesen. Dort werden Sie den Kopfbereich der Website sowie den Footer und die Navigationsleiste nicht sehen.

Implementierung zu Beispiel 1

Setzen Sie in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage für alle im Druck zu verbergenden Elemente für das Medium Druck die Eigenschaft display auf den Wert none.

Anmerkung: Im Output der meisten Redaktionssysteme werden diese Eigenschaften bereits entsprechend per Voreinstellung gesetzt sein. Wenn Sie jedoch am Layout Änderungen vorgenommen oder selbst Elemente zur Seitenvorlage hinzugefügt haben, müssen Sie für diese Elemente die Sichtbarkeit im Druck gegebenenfalls ebenfalls noch deaktivieren.

@media print {
  header {display: none;}
  nav {display: none;}
  footer {display: none;}
  .my-custom-object-with-this-class {display: none;}
  #my-custom-object-with-this-id {display: none;}   
}

Beispiel 2: Bei Hyperlinks die Zieladresse mit ausdrucken

Hyperlinks lassen sich auf dem Papier nicht anklicken. Nutzer können eine auf Paper erwähnte Seite nur dann besuchen, wenn sie deren Adresse (URL) kennen.

Mit vorausschauend definierten CSS-Angaben für Links lässt sich genau das bewirken: Wo auf der Onlineseite ein aktiver, anklickbarer Link steht, erscheint auf dem Ausdruck hinter dem (dort funktionslosen) Ankertext zusätzlich die im Link stehende URL.

Sehen Sie sich einmal die Druckvorschau dieser Seite an und betrachten Sie dort folgenden Verweis:

indoition information development

Implementierung zu Beispiel 2

Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

@media print {
 a:link {color: #000 !important; text-decoration: none; font-style: italic;}
 a:visited {color: #000 !important; text-decoration: none; font-style: italic;}
 a[href]::after {
   content: " ["attr(href)"]";
   color: #000;
   background-color: inherit;
   font-style: italic;
   size: 80%;
 }  
}

Beispiel 3: Kopf- und Fußzeile

Wenn Sie für einen besonders professionellen Ausdruck sorgen wollen, gibt es sogar eine Möglichkeit, eine sich auf jeder Seite des Ausdrucks wiederholende Kopf- und Fußzeile zu definieren.

Probieren Sie es aus. Drucken Sie einmal diese Seite oder sehen Sie sich die Druckvorschau an!

Implementierung zu Beispiel 3

Die Lösung ist etwas verschachtelt, muss aber nur ein einziges Mal auf der Seitenvorlage eingerichtet werden und funktioniert dann überall automatisch.

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

.print-page-header, .print-page-header-space {
  height: 10mm;
  margin-bottom: 7.5mm;
  display: none;  
}
.print-page-footer, .print-page-footer-space {
  height: 10mm;
  margin-top: 5mm;
  display: none;
}
.print-page-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid black;
  display: none;
}
.print-page-header {
  position: fixed;
  top: 0mm;
  width: 100%;
  border-bottom: 1px solid black;
  display: none;
}
@page {
  margin-left: 25mm;
  margin-top: 15mm;  
  margin-right: 20mm;  
  margin-bottom: 15mm;  
}
@media print {
 .print-page-footer {
   display: block;
 }
 .print-page-header {
   display: block;
 }
 .print-page-header, .print-page-header-space {
  display: block;  
 }
 .print-page-footer, .print-page-footer-space {
  display: block;
 }
 thead {display: table-header-group;} 
 tfoot {display: table-footer-group;}
 body {margin: 0;}
}

Schritt 2: Setzen Sie am Beginn Ihrer Seitenvorlage den Inhalt der zu druckenden Kopfzeile zwischen folgende zwei HTML-Schnipsel:

<div class="print-page-header">

</div>

Schritt 3: Setzen Sie unmittelbar darunter den Inhalt der zu druckenden Fußzeile zwischen folgende zwei HTML-Schnipsel:

<div class="print-page-footer">

</div>

Schritt 4: Setzen Sie wiederum darunter die zwei folgenden HTML-Schnipsel und schließen damit den regulären, auch auf dem Bildschirm anzuzeigenden Topic-Inhalt ein:

<table>
 <thead>
  <tr>
   <td>
    <div class="print-page-header-space"></div>
   </td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>

   </td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>
    <div class="print-page-footer-space"></div>
   </td>
  </tr>
 </tfoot>
 </table>

___
 
Haben Sie von diesen Informationen profitiert?

Bitte verlinken Sie im Gegenzug auf diese Seite, erwähnen Sie die Seite in sozialen Netzwerken, oder erwerben Sie eines meiner Bücher.

Vielen Dank!

Lust auf mehr? Siehe auch weitere Code-Schnipsel zum Aufwerten einer Onlinedokumentation sowie meine anderen Arbeitshilfen zur Technischen Dokumentation.