CSS fürs Drucken: @media print, @page und saubere Seitenumbrüche

Ein Layout, das im Browser perfekt sitzt, ist noch lange kein gutes PDF. Beim Druck gelten andere Regeln: feste Seitengrößen, physische Ränder, harte Umbrüche zwischen den Blättern. Navigation, Buttons und Sticky-Header haben auf Papier nichts verloren, und Farben, die am Bildschirm selbstverständlich sind, verschwinden plötzlich. Wer HTML druckfertig machen will, steuert das Druckergebnis mit einer eigenen CSS-Schicht. Die wichtigsten Werkzeuge dafür sind die Media-Query @media print, die At-Rule @page und die Umbruch-Eigenschaften rund um break-before, break-after und break-inside.

Das print-Medium als eigene Ebene

Browser unterscheiden zwischen Medientypen. Alles, was du in @media screen definierst, gilt nur am Bildschirm, alles in @media print nur beim Drucken oder bei der PDF-Erzeugung. Diese Trennung ist der Hebel, mit dem du das Druckbild unabhängig vom Web-Layout formst, ohne das eigentliche Stylesheet anzufassen.

@media print {
  body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
}

Wichtig ist, dass die Print-Regeln spät genug greifen, um die Bildschirmstile zu überschreiben. In der Praxis lädst du sie entweder als letzten Block im Haupt-Stylesheet oder über ein eigenes Stylesheet mit Media-Attribut. Beide Varianten sind gleichwertig, die Inline-Variante spart einen zusätzlichen Request.

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

Du kannst die Druckansicht jederzeit ohne echten Drucker testen. Im Browser zeigt die Druckvorschau das Ergebnis, und in den DevTools lässt sich das Rendering-Medium fest auf print umschalten. So siehst du live, wie deine Regeln wirken, ohne ständig ein PDF erzeugen zu müssen.

Seitenformat und Ränder mit @page

Die At-Rule @page steuert die physische Seite selbst: Format, Ausrichtung und die Ränder zwischen Inhalt und Blattkante. Das ist der Punkt, an dem aus einem endlosen Web-Dokument ein blattgebundenes wird.

@page {
  size: A4 portrait;
  margin: 20mm 18mm;
}

size akzeptiert benannte Formate wie A4 oder letter, optional mit portrait oder landscape, oder konkrete Maße wie 210mm 297mm. Die Ränder gibst du sinnvollerweise in mm oder cm an, weil sie physisch sind. Beachte dabei, dass viele Drucker einen nicht bedruckbaren Randbereich haben. Ränder unter etwa 10mm sind riskant, weil Inhalt sonst abgeschnitten werden kann.

@page kennt außerdem Pseudoklassen, mit denen du die erste Seite oder linke und rechte Seiten getrennt behandelst. Das ist nützlich für Dokumente mit Bundsteg oder einer abweichenden Titelseite.

@page :first {
  margin-top: 40mm;
}

@page :left {
  margin-left: 25mm;
}

@page :right {
  margin-right: 25mm;
}

Die Unterstützung der @page-Eigenschaften variiert zwischen den Engines. size und margin funktionieren breit, exotischere Margin-Boxes für Kopf- und Fußzeilen werden im Browser-Druck nur teilweise umgesetzt. Wenn du verlässliche Seitenzahlen oder Kopfzeilen brauchst, ist es oft robuster, diese Elemente direkt ins HTML zu legen, statt sie über @page-Margin-Boxes zu erzeugen.

Saubere Seitenumbrüche steuern

Der häufigste Bruch im Druckbild ist ein Umbruch an der falschen Stelle: eine Überschrift unten allein, eine Tabelle in der Mitte zerrissen, ein Bild halb auf der nächsten Seite. Dafür gibt es die modernen break-*-Eigenschaften, die die älteren page-break-*-Varianten ablösen. Beide funktionieren, aber neue Stylesheets sollten auf break-before, break-after und break-inside setzen.

break-before: page erzwingt einen Umbruch vor einem Element, break-after: page danach. So beginnt etwa jedes Kapitel auf einer frischen Seite.

@media print {
  .kapitel {
    break-before: page;
  }

  h2 {
    break-after: avoid;
  }
}

break-after: avoid auf einer Überschrift verhindert, dass direkt nach ihr umgebrochen wird, sie bleibt also mit dem folgenden Inhalt zusammen. Noch wichtiger ist break-inside: avoid, das ein Element davor schützt, mitten durchgeschnitten zu werden. Das ist der entscheidende Hebel für Tabellen, Bildunterschriften, Karten und alles, was als Einheit gelesen werden soll.

@media print {
  table,
  figure,
  .karte,
  blockquote {
    break-inside: avoid;
  }

  tr,
  li {
    break-inside: avoid;
  }
}

Bei langen Tabellen, die garantiert über mehrere Seiten laufen, willst du das Gegenteil: Dort hilft es, thead als wiederkehrende Kopfzeile zu definieren, damit der Spaltenkopf auf jeder Seite erneut erscheint.

@media print {
  thead {
    display: table-header-group;
  }
}

Für den Fließtext sorgen orphans und widows dafür, dass keine einzelnen Zeilen eines Absatzes allein am Seitenende oder -anfang hängen. Der Wert gibt die Mindestzahl zusammenhängender Zeilen an.

@media print {
  p {
    orphans: 3;
    widows: 3;
  }
}

Erzwinge Umbrüche nur dort, wo sie wirklich nötig sind. Zu viele harte break-before: page-Regeln erzeugen halbleere Seiten und blähen das PDF auf. In den meisten Fällen reicht ein gezieltes break-inside: avoid auf den zusammengehörigen Blöcken, und die Engine verteilt den Rest selbst sinnvoll.

Bildschirm-Elemente ausblenden

Auf Papier braucht niemand die Navigation, das Suchfeld, den Cookie-Banner oder den Teilen-Button. Diese Elemente blendest du im Druck konsequent aus. Das spart Platz und entfernt visuellen Lärm, der im Druck ohnehin keine Funktion hat.

@media print {
  header nav,
  .sidebar,
  .cookie-banner,
  .share-buttons,
  button,
  .skip-link,
  footer .social {
    display: none !important;
  }
}

Das !important ist hier vertretbar, weil Print-Regeln spezifische Bildschirmstile zuverlässig überstimmen müssen. Wer den Markup-Zugriff hat, kann den ausblendbaren Elementen auch eine gemeinsame Hilfsklasse wie .no-print geben und nur diese eine Klasse im Druck verstecken.

Umgekehrt gibt es Inhalte, die nur im Druck Sinn ergeben, etwa ein Hinweis auf die Quell-URL oder ein Stand-Datum. Solche Elemente blendest du am Bildschirm aus und im Druck ein. Besonders elegant ist es, Links im Druck um ihre Ziel-URL zu ergänzen, weil ein klickbarer Link auf Papier sonst nutzlos ist.

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

@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}

Farben und Hintergründe erzwingen

Standardmäßig unterdrücken Browser beim Drucken Hintergrundfarben und -bilder. Das ist als Tintensparmaßnahme gedacht, zerstört aber jedes Layout, das auf farbigen Flächen aufbaut. Tabellenzeilen verlieren ihre Zebra-Streifen, Buttons werden zu kontur losen Kästen, farbige Info-Boxen verschwinden.

Die Lösung ist print-color-adjust: exact. Damit weist du den Browser an, die Farben exakt so zu drucken, wie sie definiert sind. Für ältere Engines brauchst du zusätzlich die Variante mit -webkit-Präfix.

@media print {
  .badge,
  .info-box,
  thead th,
  tr:nth-child(even) {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

Setze das gezielt auf die Elemente, die ihre Farbe brauchen, statt global auf body. Ein flächendeckendes exact druckt sonst jeden dezenten Hintergrund mit, was das PDF dunkel und die Lesbarkeit schlechter macht. Für den Fließtext selbst willst du in der Regel schwarzen Text auf weißem Grund, weil das am sparsamsten und am besten lesbar ist.

Denke auch an Kontraste. Eine helle Schrift auf farbigem Grund, die am Bildschirm gut aussieht, kann im Schwarz-Weiß-Druck verschwinden. Für solche Fälle lohnt es sich, im Print-Block bewusst auf dunkle Schrift umzustellen und auf reine Farbsignale zu verzichten.

Typografie und Maßeinheiten

Im Druck sind physische Einheiten oft die bessere Wahl. pt für Schriftgrößen, mm oder cm für Ränder und Abstände binden das Layout an reale Papiermaße statt an Pixeldichten. Für Fließtext sind 11pt bis 12pt ein bewährter Bereich, Überschriften skalierst du entsprechend nach oben.

@media print {
  body {
    font-size: 12pt;
  }
  h1 {
    font-size: 22pt;
  }
  h2 {
    font-size: 16pt;
  }
  h3 {
    font-size: 13pt;
  }
}

Serifenschriften gelten auf Papier traditionell als etwas lesbarer für längere Texte, das ist aber Geschmackssache und hängt vom Inhalt ab. Wichtiger ist ausreichende Zeilenhöhe von etwa 1.4 bis 1.6 und ein klarer Kontrast. Vermeide im Druck reine vw- oder vh-Maße, weil der Viewport-Begriff auf einer festen Seite weniger eindeutig ist als am Bildschirm.

Worauf es ankommt

Druckfertiges CSS ist keine Magie, sondern eine zweite, bewusst gepflegte Ebene. Du trennst Bildschirm und Druck über @media print, definierst das Blatt mit @page, schützt zusammengehörige Inhalte mit break-inside: avoid und erzwingst gezielte Umbrüche nur dort, wo sie nötig sind. Bildschirm-Ballast wie Navigation und Buttons fliegt raus, Farben kommen über print-color-adjust: exact zuverlässig aufs Papier, und physische Einheiten in pt und mm machen das Ergebnis reproduzierbar. Wer diese Bausteine sauber kombiniert, bekommt ein PDF, das aussieht wie geplant, statt wie ein zufällig abgeschnittener Bildschirmausdruck. Am besten prüfst du jeden Schritt in der Druckvorschau, denn dort siehst du sofort, was wirklich aufs Blatt kommt.