HTML to PDF

Dieser Skill erzeugt aus HTML/CSS ein PDF, das gedruckt, verschickt und archiviert werden kann – mit echtem Text, sauberen Umbrüchen und einer verpflichtenden Sichtprüfung jeder Seite.

Wann dieser Skill greift

• Angebote, Rechnungen, Reports, Handouts, Zertifikate, Onepager.
• Ein bestehendes HTML-Dokument soll versandfertig werden.
• Ein PDF hat Layoutfehler (abgeschnittener Text, leere Seiten, gebrochene Tabellen).

Schritt 1 – HTML bereinigen

• Semantische Struktur: h1–h3, table, figure, keine Layout-Divs ohne Rolle.
• Keine Skripte, die Inhalte erst nach Interaktion oder verzögert laden.
• Keine externen Blocker: Webfonts, Bilder und CSS lokal einbinden.
• Interaktive Elemente (Buttons, Navigation, Cookie-Banner) per @media print ausblenden.

Schritt 2 – Print-CSS ergänzen

@page {
  size: A4;
  margin: 20mm 18mm;
  @bottom-center { content: counter(page) " / " counter(pages); }
}
table, figure, .card { break-inside: avoid; }
h2 { break-after: avoid; }
section.chapter { break-before: page; }
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
a[href]::after { content: " (" attr(href) ")"; }
img { max-width: 100%; }

Weitere Punkte:

• Masseinheiten in mm, pt oder %, nicht in px.
• Waisen und Witwen vermeiden: orphans: 3; widows: 3;.
• Farben: print-color-adjust: exact nur dort, wo Flächen wirklich gedruckt werden sollen.

Schritt 3 – Rendern

chromium --headless --disable-gpu --print-to-pdf=out.pdf \
  --no-pdf-header-footer --run-all-compositor-stages-before-draw input.html

Alternativen: weasyprint input.html out.pdf (gute @page-Unterstützung), playwright mit page.pdf({ format: 'A4', printBackground: true }).

Schritt 4 – Schriften und Bilder

• Schriften als lokale WOFF2/TTF einbetten, kein CDN zur Renderzeit.
• Fallback-Stack definieren, damit fehlende Glyphen sichtbar bleiben.
• Bilder mit mindestens 150 dpi bezogen auf die Druckgrösse; keine hochskalierten Screenshots.
• Logos möglichst als SVG.

Schritt 5 – Qualitätskontrolle (Pflicht)

pdftoppm -jpeg -r 150 out.pdf page

Jede Seite ansehen, nicht nur die erste. Geprüft wird:

Prüfpunkt	Fehlerbild
Textbeschnitt	Zeilen laufen aus dem Satzspiegel
Überlappung	Elemente liegen übereinander
Leere Seiten	Falsche break-before-Regeln
Tabellen	Kopfzeile fehlt auf Folgeseiten
Ränder	Ungleiche oder zu kleine Margins
Schriften	Ersatzschrift statt eingebetteter Schrift
Reihenfolge	Kapitel in falscher Abfolge
Umbrüche	Überschrift allein am Seitenende

Fehler beheben, neu rendern, erneut prüfen – bis ein kompletter Durchgang sauber ist.

Ausgabeformat

• Das PDF selbst.
• Kurzprotokoll: Seitenzahl, Format, geprüfte Punkte, gefundene und behobene Fehler, verbleibende Einschränkungen.

Anti-Patterns

• Screenshots statt echtem PDF-Text (nicht durchsuchbar, nicht barrierefrei).
• Feste Pixelbreiten statt mm/pt.
• Layout erst im PDF testen statt in der Druckvorschau.
• Dunkle Vollflächen über ganze Seiten (Tonerverbrauch, schlechte Lesbarkeit im Druck).
• Nur die erste Seite prüfen.

Qualitätscheck vor Abgabe

• Print-CSS mit @page, Umbruchregeln und Tabellenkopf
• Schriften und Bilder lokal eingebettet
• Alle Seiten als Bild geprüft
• Text im PDF markierbar und durchsuchbar
• Protokoll mitgeliefert

---

Zuletzt aktualisiert: 14.08.2026 · Version 1.2.0 · skills.fragroger.ai

Lizenz: CC BY-NC-ND 4.0 (Namensnennung – nicht kommerziell – keine Bearbeitungen). Nutzung nur für den Eigengebrauch. https://creativecommons.org/licenses/by-nc-nd/4.0/deed.de