Jeder Dokument-Editor hat eine Vorschau, und das PDF entsteht immer woanders. Die Frage, die man
jeder Vorschau stellen sollte, ist nicht, ob sie richtig aussieht, sondern ob Seite 1 dort endet, wo
Seite 1 des PDFs endet. Ein Browserfenster hat überhaupt keine Seiten. Stellt man es auf
Druck-Stile um (@media print), ändern sich die Stile, Seiten gibt es trotzdem keine. Der
Druckdialog des Browsers paginiert zwar, aber mit eigenen Rändern und, solange man sie nicht
abwählt, eigener Kopf- und Fußzeile — nicht mit denen, die Ihre API rendert.
Unser Editor hat eine fortlaufende Vorschau zum Schreiben und eine paginierte fürs Layout. Die paginierte verwendet Paged.js, das HTML im Browser nach den CSS-Regeln für Seitenmedien umbricht; das PDF kommt aus Headless Chromium auf unseren Render-Servern. Also haben wir gemessen, ob beide übereinstimmen.
Der Test
Ein kurzer Bericht: eine Überschrift, ein Banner und 24 Karten. Jede Karte hat height: 22mm mit
padding: 5mm und einem Rahmen, so wie eine Vorlage einem Kasten eine Höhe gibt — und jede wird mit
break-inside: avoid zusammengehalten. A4 mit 20 mm Rand oben und unten und 18 mm an den Seiten,
dazu eine Fußzeile mit Seitenzahl. Wir haben ihn mit unserem Render-Worker gedruckt, in Chromium mit
Paged.js im Lieferzustand und mit unserer paginierten Vorschau umbrechen lassen und die Karten auf
jeder Seite gezählt.
| Karten je Seite | Seiten | |
|---|---|---|
| Paged.js im Lieferzustand (links) | 9 · 10 · 5 | 3 |
| Unsere paginierte Vorschau (Mitte) | 6 · 7 · 7 · 4 | 4 |
| Das PDF (rechts) | 6 · 7 · 7 · 4 | 4 |
Vorschau und PDF stimmen Karte für Karte überein. Paged.js im Lieferzustand liegt auf jeder Seite daneben und bei der Seitenzahl auch.
Die Regel, die den Unterschied macht
Die beiden Vorschauen unterscheiden sich in einer Sache. Das eigene Stylesheet von Paged.js enthält
.pagedjs_pagebox * { box-sizing: border-box }. Gemeint sind die Kästen, die Paged.js um jede Seite
baut, aber der Selektor erreicht alles innerhalb einer Seite, Ihre Vorlage eingeschlossen. Unter
border-box enthält eine Höhe Innenabstand und Rahmen; unter dem Standard des Browsers,
content-box, mit dem Chromium druckt, kommen sie obendrauf. Jede Karte ist in Paged.js im
Lieferzustand also 22 mm hoch und im PDF etwas über 32 mm, und Paged.js bringt neun unter, wo das PDF
sechs bringt.
Unsere Vorschau schreibt genau diese Regel um, sobald das Stylesheet eintrifft und bevor irgendetwas
gesetzt wird, sodass sie nur noch für die Kästen von Paged.js selbst gilt ([class*="pagedjs_"]).
Ihre Elemente behalten das Box-Modell, das sie im PDF haben werden. Derselbe Gedanke gilt für unseren
Print-Reset: Die Kopf- und Fußzeilen-Kästen der Vorschau bleiben davon ausgenommen, weil Chromiums
Kopf- und Fußzeilen-Templates ihn auch nicht bekommen.
Der Fall, den keine Vorschau zeigen kann
Jetzt machen wir das Banner auf die übliche Art „volle Breite“: width: 100% plus sein
padding: 5mm 10mm. Unter content-box ist es damit 20 mm breiter als der Platz zwischen den
Rändern.
Jedes Bild in diesem Beitrag zeigt Seite 1 desselben Dokuments aus drei Quellen — nicht drei Seiten.
Paged.js im Lieferzustand zeigt das Problem nicht einmal: Unter seiner border-box-Regel zählt der
Innenabstand in die 100 % hinein, und das Banner passt. Unsere Vorschau zeigt, was das Dokument
verlangt: Das Banner ragt über den rechten Rand. Das
PDF macht etwas anderes. Chromium verkleinert
das ganze Dokument, bis sein breitestes Element auf die Seite passt — hier auf 89,7 %, sodass die
Kartentitel in 10 pt mit 8,97 pt herauskommen —, und zwar auf jeder Seite, nicht nur auf der mit dem
Banner. Kleinere Seiten fassen mehr: 7 · 8 · 8 · 1 Karten statt 6 · 7 · 7 · 4.
Keine Vorschau, die mit 100 % umbricht, kann das nachbilden, unsere eingeschlossen. Was sie kann, ist
die Ursache finden, und unsere sagt es inzwischen ausdrücklich: Die Vorschau misst nach jedem Umbruch
das breiteste Element, und ragt eines über den Rand, führt der Editor es unter „Probleme“ auf — wie
viele Millimeter zu breit und auf welche Größe das PDF schrumpfen wird (hier 20 mm und 89,7 %) —,
mit einem Sprung zum Tag in der Vorlage. Geben Sie so einem Element box-sizing: border-box, oder
lassen Sie seine Breite in Ruhe — ein Block ist so breit wie sein Container, ohne dass man es ihm
sagt.
Was wir daraus mitnehmen
Eine Vorschau verdient Vertrauen, indem sie umbricht, wo das PDF umbricht, und das ist eine Eigenschaft, die man messen kann: dasselbe Dokument, dasselbe Seitenformat, zählen, was auf jeder Seite landet. Unsere tut es, bis eine Vorlage Chromium zum Verkleinern bringt. Das letzte Wort hat im Editor Echtes Rendering: Es schickt den Entwurf durch denselben Worker, der die PDFs oben gedruckt hat, und kostet nichts.
Die Tour durch den Editor zeigt die Vorschau-Modi und das echte Rendering, und das Rechnungsbeispiel ist ein Dokument, an dem man sie ausprobieren kann.
Gemessen am 21. September 2026 mit Chromium 153.0.8010.12 auf dem Render-Worker und Paged.js 0.4.3.