CSS für HTML-zu-PDF-Konvertierung optimieren
HTML-zu-PDF-Konvertierungen scheitern oft an schlechtem CSS. Responsive Web-Layouts, die für große Bildschirme optimiert sind, konvertieren oft schlecht zu A4-PDF-Seiten. Dieser Artikel zeigt die CSS-Techniken, die zuverlässige PDF-Ausgaben erzeugen.
@media print – Print-spezifische Styles definieren
Die @media print-CSS-Regel definiert Styles, die nur beim Drucken oder bei der PDF-Konvertierung angewendet werden. Das ist die grundlegende Technik für Print-optimiertes CSS. Grundstruktur: @media print { body { font-size: 11pt; line-height: 1.4; } h1 { font-size: 18pt; } h2 { font-size: 14pt; } } Wichtiges: Schriftgrößen in Punkten (pt) angeben, nicht in Pixeln. Pixel sind bildschirmabhängig, Punkte sind absolute physische Einheiten. 1pt = 1/72 Zoll = ca. 0.35mm. Hintergrundfarben und -bilder: Viele Browser drucken Hintergrundfarben nicht standardmäßig. Fügen Sie -webkit-print-color-adjust: exact; print-color-adjust: exact; hinzu, um sicherzustellen, dass Farben korrekt gedruckt werden. Navigationselemente ausblenden: @media print { nav, header.site-header, footer.site-footer, .sidebar, .cookie-banner { display: none; } }. Nur den relevanten Inhalt drucken, nicht Navigationsmenüs. Links ohne Unterstreichung: @media print { a { text-decoration: none; color: black; } }. Oder Link-URLs nach dem Text anzeigen: a::after { content: " (" attr(href) ") "; }.
@page-Regel für Seitenformat und Ränder
Die @page CSS-Regel definiert Eigenschaften für die gedruckte Seite selbst, nicht für den Inhalt. Grundkonfiguration: @page { size: A4 portrait; margin: 20mm; } Seitenformat-Optionen: A4, A5, Letter, Legal. Portrait oder landscape als zweites Argument. Ränder: margin: 20mm setzt alle Ränder auf 20mm. Asymmetrische Ränder: margin: 20mm 15mm 25mm 20mm (oben, rechts, unten, links). Für gedruckte Dokumente, die gebunden werden: größerer innerer Rand (margin-left für ungerade Seiten, margin-right für gerade Seiten). Named Pages: Sie können Seiten mit Namen versehen und unterschiedliche Einstellungen für verschiedene Seitentypen definieren. Zum Beispiel: Deckblatt im Querformat, alle anderen Seiten im Hochformat. Das ist fortgeschrittenes CSS, aber sehr nützlich für professionelle Dokumente. @page :first { margin-top: 30mm; } definiert zusätzliche Einstellungen nur für die erste Seite.
Seitenumbrüche kontrollieren
Unkontrollierte Seitenumbrüche sind das häufigste visuelle Problem bei HTML-zu-PDF-Konvertierungen. Hauptproperties: page-break-before: always; erzwingt einen Seitenumbruch vor dem Element. page-break-after: always; erzwingt einen Seitenumbruch nach dem Element. page-break-inside: avoid; verhindert Seitenumbrüche innerhalb des Elements. Praktische Anwendungen: Jedes Kapitel auf einer neuen Seite beginnen: h2 { page-break-before: always; }. Tabellenzeilen nicht durch Seitenumbrüche trennen: tr { page-break-inside: avoid; }. Bilder und ihre Beschriftungen zusammenhalten: figure { page-break-inside: avoid; }. Überschrift und ersten Absatz zusammenhalten: h2, h3, h4 { page-break-after: avoid; } verhindert, dass eine Überschrift allein am Ende einer Seite bleibt während der Text auf der nächsten Seite beginnt (Hurenkinder vermeiden). Moderne CSS-Eigenschaften: break-before, break-after, break-inside sind die modernen Entsprechungen zu den älteren page-break-*-Properties. Beide sind in modernen Browsern unterstützt.
Tabellen für PDF-Ausgabe optimieren
Tabellen stellen besondere Herausforderungen bei der HTML-zu-PDF-Konvertierung dar. Basisoptimierung: table { width: 100%; border-collapse: collapse; } th, td { padding: 4pt 6pt; border: 0.5pt solid #ccc; } Spaltenbreiten definieren: Ohne explizite Spaltenbreiten kann der Browser die Breiten beim PDF-Rendering anders berechnen als im Browser. Definieren Sie: col.datum { width: 20%; } col.betrag { width: 15%; } usw. Tabellenkopf auf jeder Seite wiederholen: Bei langen Tabellen, die mehrere Seiten überspannen, soll der Tabellenkopf auf jeder Seite erscheinen. CSS: thead { display: table-header-group; }. Das wiederholt den thead-Inhalt auf jeder Seite. Fußzeilen-Wiederholung: Ähnlich für Tabellenfußzeilen: tfoot { display: table-footer-group; }. Sehr breite Tabellen: Wenn eine Tabelle breiter ist als A4 (190mm Druckbereich), gibt es zwei Lösungen: Schriftgröße reduzieren und Spaltenbreiten anpassen, oder die Tabelle im Querformat drucken. Für Querformat: @page { size: A4 landscape; }.
Häufig gestellte Fragen
- Welche CSS-Einheiten sollte ich für HTML-zu-PDF verwenden?
- Für Schriftgrößen: pt (Punkte, physisch exakt). Für Seitenränder und Abstände: mm oder cm. Für Bildbreiten: % (relativ zur Seitenbreite) oder mm. Vermeiden Sie px für Druck-CSS, da Pixel bildschirmabhängig sind und bei Druckausgabe variieren können.
- Wie verhindere ich, dass Hintergrundfarben im PDF fehlen?
- Fügen Sie -webkit-print-color-adjust: exact; und print-color-adjust: exact; zum betroffenen Element hinzu. Das erzwingt die Hintergrundfarbe auch im Druck. Ohne diese Einstellung unterdrücken Браuzер standardmäßig Hintergrundfarben beim Drucken.
- Können Web-Fonts (Google Fonts) in HTML-zu-PDF-Konvertierungen verwendet werden?
- Ja, wenn die Konvertierung mit Internetzugang erfolgt und die Google Fonts CDN erreichbar ist. Für zuverlässigere Ergebnisse betten Sie Schriftarten als Base64 ein oder verwenden Sie System-Schriftarten (Arial, Helvetica, Times New Roman), die immer verfügbar sind.