Wie können Sie Seiten für den Druck optimieren?

Um Seiten für den Druck zu optimieren, verwende ich @media print in CSS. Darin verstecke ich Elemente, die beim Drucken nicht benötigt werden (Navigation, Fußzeilen, Seitenleisten), ändere die Stile zur Verbesserung der Lesbarkeit (Schriftgröße, Abstände), entferne Hintergrundbilder und Schatten. Außerdem füge ich Seitenumbrüche mit break-before, break-after hinzu und steuere die Ausrichtung mit @page. Ich kann spezielle Klassen wie .no-print verwenden, um Elemente schnell auszublenden.

Hier einige Beispiele:

/* Elemente, die beim Drucken nicht benötigt werden, verstecken */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Das Erscheinungsbild zur Verbesserung der Lesbarkeit anpassen */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Schwarzer Text für besseren Kontrast */
  }
  a {
    color: #000; /* Entfernen der blauen Linkfarbe */
    text-decoration: none;
  }
  /* URL der Links nach dem Text hinzufügen */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Hintergrundbilder ausblenden */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Seitenumbrüche steuern */
@media print {
  h2 {
    break-before: page; /* Vor jedem h2 eine neue Seite beginnen */
  }
}

/* Seitenorientierung festlegen */
@page {
  size: A4 portrait; /* Oder landscape */
  margin: 1cm; /* Ränder einstellen */
}

Für eine komplexere Anpassung oder das Hinzufügen von Informationen (z.B. Seitenzahlen, Kopf- und Fußzeilen) kann die Direktive @page verwendet werden. Außerdem können bestimmte spezifische Stile (wie position: fixed) beim Drucken unerwartet reagieren und erfordern separate Regeln für @media print.

Es ist wichtig, das Druckergebnis in verschiedenen Browsern zu testen.