PDF mit Schönheitsfehlern

[dominiklawetzky]

PDF weist am Ende der ersten Seite einige Textüberschneidungen auf. Mehrfach versucht, immer das Gleiche – unabhängig vom Reader.

[vollkorn1982]

Moin, das Problem liegt in der Generierung des PDFs aus der Webseite heraus. Welchen Browser benutzt du? Hast du den Zoom auf 100% gestellt?

[dominiklawetzky]

Ja, Zoom auf 100 Prozent. Browser ist Safari.

[vollkorn1982]

Da habe ich mich etwas missverständlich ausgedrückt: Nicht der Zoom beim Drucken, sondern der Zoom des Browser, wenn du die Seite anzeigst.

[dominiklawetzky]

Schon richtig verstanden, beides auf 100 Prozent gestellt. Habe den Zoom hoch- und runtergedreht: keine Veränderung.

[vollkorn1982]

Hm, kannst du mal schauen, wie es aussieht, wenn du die Kopf- und Fußzeilen nicht ausdruckst? Dadurch wird der Druckbereich verkleinert und ich vermute es könnte sein, dass, da der Zoom nach wie vor auf 100% steht, alles zusammengeschoben wird.

[dominiklawetzky]

Nein, leider auch da keine Besserung – selbst wenn ich die Größe auf Werte < 100 Prozent ändere.

[vollkorn1982]

Sehr spannender Fall. Ich weiß, dass das ab und an vorkommt und vermute ein Problem mit Safari oder Macs. Hast du noch einen anderen Browser auf deinem Mac? Firefox oder Chrome z.B.? Dann würde ich dich bitten damit zu schauen, wie es aussieht um herauszufinden, ob es ein Safari-spezifisches Problem ist oder eher am Betriebssystem liegt.

[RonjaPonja]

Safari (so wie viele andere Browser) injecten eine page margin um oben das Datum und die Uhrzeit und unten die URL und die Seitenzahl in den Druck zu embedden. Unser print CSS geht aber davon aus die gesamte a4 Seite zur Verfügung zu haben. Safari ist problematisch, da es bei default @page CSS rule-at support nicht erlaubt. Es ignoriert also leider unser CSS welches die page margin zurücksetzt.

In neuen Safaris kann man via Safari->Preferences...->Advanced->Show develop menu in menu bar das Developer Menu aktivieren. Damit kann man dann via Develop->Experimental Features->@page CSS rule-at support dieses Problem Lösen.

Das macht das PDF weniger kaputt, es ist aber immer noch kaputt. Sollte Apple sich entscheiden dieses Feature by default zu aktivieren, können wir uns die dann noch übrigen Probleme gerne genauer anschauen.

Alternativ wäre es auch eine Option das PDF via Javscript zusammen zu stöpseln. Dann könnte man dieses Formular allerdings überhaupt nicht mehr ohne Javascript nutzen. Zudem wäre das eine Stange Arbeit. PR welcome.

[vollkorn1982]

Was, wenn wir einfach selbst einen genügend großen Margin definieren? Wird dann noch immer ein zusätzlicher Margin durch Safari "angewendet"?

[RonjaPonja]

Keine Ahnung, aber ich habe schon einmal ein paar Nachforschungen angestellt. Der Print Dialog sieht so aus:

Ich habe hierzu schon einmal zwei Erkenntnisse.

1. Die Vorschau links im Bild ist wertlos. Das ist zwar für den Nutzer egal, sollte aber jemensch der versucht das Problem zu fixen im Hinterkopf behalten :P
2. Das verhalten ist ohne das experimental feature leider sogar auf zwei unterschiedliche Arten kaputt.

Hier noch ein paar test PDFs.

Variante 1: Alles default mit Header und Footer an und ohne das Experimental feature.

Variante 2: Man sollte jetzt denken, man kann die Header und Footer aus machen um das Ergebnis zu verbessern. Das ist in Firefox z.B. glaube ich auch nötig und lässt sich auch nicht via CSS überschreiben. In Chrome ist das IIRC der default. Safari rendered stattdessen in dem Fall trotzdem einen schön fetten drop shadow...

^ Das bedeutet, dass wir im Print CSS höchstens vom schlimmsten ausgehen können, also Variante 1. Da es aber schon in Safari zwei Optionen gibt, können wir leider nicht wirklich einfach in allen Browsern \~die\~ Safari Margin setzen.

Variante 3: Mit @page CSS rule-at support aktiviert verhält sich alles wie erwartet. Hier ist es dann sogar egal, ob die Header und Footer aktiviert sind. Das ist schön, weil dies in anderen Browsern nicht so ist.

Zum Vergleich ein aktuelles PDF mit default Settings aus Chrome.