Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PDF mit Schönheitsfehlern #47

Open
dominiklawetzky opened this issue Apr 14, 2021 · 11 comments
Open

PDF mit Schönheitsfehlern #47

dominiklawetzky opened this issue Apr 14, 2021 · 11 comments

Comments

@dominiklawetzky
Copy link

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

CleanShot 2021-04-14 at 19 29 13@2x

@vollkorn1982
Copy link
Collaborator

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
Copy link
Author

Ja, Zoom auf 100 Prozent. Browser ist Safari.

CleanShot 2021-04-14 at 21 13 45@2x

@vollkorn1982
Copy link
Collaborator

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
Copy link
Author

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

@vollkorn1982
Copy link
Collaborator

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
Copy link
Author

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

CleanShot 2021-04-16 at 09 50 21@2x

@vollkorn1982
Copy link
Collaborator

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
Copy link
Owner

RonjaPonja commented Apr 18, 2021

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
Copy link
Collaborator

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

@RonjaPonja
Copy link
Owner

RonjaPonja commented Apr 18, 2021

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

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.

@perelin
Copy link

perelin commented Nov 18, 2024

Da ich gerade ich drüber gestolpert bin: ist immer noch so. Safari 17.6 auf macOS 14.6.1 - ich geh dann jetzt wohl auch über Chrome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants