CSS page-break-after funktioniert nicht

[Rolf B]

Hallo Timo,

herzlich Willkommen bei SelfHTML.

Drei Punkte vorab:

• Du sprichst mit Menschen, nicht mit einem Bot, deswegen würden wir uns über ein kurzes Hallo freuen bevor Du gleich loslegst.
• es ist wenig hilfreich, Screenshots von Code zu posten. Wenn jemand mit deinem Code etwas probieren will, muss der Code abgeschrieben werden. Du kannst im Forum Codeblöcke erstellen und deinen Code hineinkopieren. Für HTML z.B. so:

~~~html
<main>
Lorem Ipsum
</main>
~~~

Für CSS beginnst Du mit ~~~css.

• noch besser ist es, deine problematische Seite online bereitzustellen und einen Link darauf zu setzen.

Jetzt zu deiner Frage.

• es gibt kein <page> Element in HTML. Der Browser interpretiert dieses Element so, als wäre es ein <span>.
• das heißt nicht, dass Du so etwas wie <page> nicht machen kannst, aber HTML setzt Regeln für „selbsterfundene“ Elemente. Ihr Name muss ein "-" Zeichen enthalten. Damit soll sichergestellt sein, dass deine eigenen Elemente niemals zu Kollisionen mit neuen Elementen führen, die später in den HTML Standard aufgenommen werden. Du könntest dein <page> Element zum Beispiel <ts-page> nennen.
• Dein CSS enthält eine Regel für ein div mit Klasse pageBreak, aber ich sehe keine Stelle, wo Du ein solches div erzeugst. Demzufolge bekommst Du auch keinen Seitenumbruch. Du könntest aber, wenn ich deine Absichten korrekt errate, eine CSS Regel dieser Art erstellen (vorausgesetzt, du folgst dem zuvor genannten Punkt):

ts-page {
   page-break-after: always;
}

• oder Du verwendest statt <page></page> ein <div class="pageBreak"></div>.
• nützlicher wäre auf jeden Fall ein Onlinebeispiel mit einer Seite, die nach deiner Auffassung funktionieren sollte, es aber nicht tut.
• Dein window.focus() hilft nichts. Zum einen ist das Fenster nicht fokussierbar, höchstens der Button darauf, zum anderen wirst Du es nicht schaffen, dass der Browser von allein zu Drucken beginnt. Du bekommst immer den Druckdialog vorgesetzt.
• Warum programmierst Du einen close-Button? Dein Browser hat diese Funktion doch bereits. Abgesehen davon geht das eh nicht. Du kannst nur die Fenster schließen, die Du selbst geöffnet hast.
• die print-Methode war früher einmal modal, d.h. das JavaScript hinter dem print-Aufruf wurde erst ausgeführt, nachdem print fertig war. Das ist im aktuellen Chrome nicht mehr so, hier musst Du Dich auf das afterprint-Event registrieren; es wird ausgelöst, wenn der Druckvorgang zu Ende ist. Im Firefox ist es noch schlimmer, der löst aus irgendwelchen unbegreiflichen Gründen das afterprint-Event sofort aus. Das würde ich für einen Bug halten. Heißt für Dich nur: ruf print auf, aber verlass Dich nicht darauf, irgendeinen Einfluss auf das zu haben, was im Druckablauf geschieht. Überlass das Schließen dem User, und lass ihn dafür die gewohnten Controls zum Schließen von Fenstern verwenden.

Rolf