CSS page-break-after funktioniert nicht

[Timo Schmidt]

Ich möchte in einem Text einen Seitenumbruch einbauen der in der Druckansicht auftaucht. Grundliegend weiß ich wie das geht. @media print{...}. Dazu gibt es ja auch genug Dokumentationen im Internet. Allerdings funktioniert das ganze bei mir nicht. Ich habe verschiedene Elemente ausprobiert auf die ich den page-break gesetzte habe(hr,div,h1). Ich habe mit und ohne @media print geabrbeitet. Ich habe alle Parent Elemente auf float none gesetzt. Ich habe Parent Elemente entfernt bis der Text direkt im Body stand. Ich habe auch verschiedene Browser getestet(Edge,Chrome).

Alles hat aber nichts genützt daher die Frage was habe ich in den anderen Dokumentationen übersehe, dass meine Seite darin hindert einen Seitenumbruch in der Druckansicht anzuzeigen.

Anbei noch Bilder von dem CSS und der HTML Seite.

[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

[Timo Schmidt]

Hallo Rolf,

1. Ja das <page> Tag könnte ich umbenennen hat aber nicht mit meinem Problem zu tuen.

2. Doch das <div> mit der Klasse Pagebreak existiert. Es wird mit PHP zur Laufzeit reingeladen und hat auch wenn man sich das ganze im Inspektor anguckt die passenden CSS-Eigenschaften gekriegt. Trotzdem kein Seitenumbruch.

3. Die restlichen Hinweise haben auch nichts mit dem Problem zu tuen und ergeben zwar im Bezug auf diese eine Seite Sinn. Aber diese Anwendung hat mehr als nur eine Seite, welche auch Einfluss auf diese Seite nehmen wodurch diese wieder Sinn ergeben.

4. Der Extra schließen Button mag überflüssig sein ist aber so gewünscht vom Kunden.

5. Ich habe mich bewusst dafür entschieden Bilder statt Quellcode hier ein zu stellen, weil jedes Testen aufgrund des Zusammenhanges mit anderen Seiten dieser Anwendung und Daten, welche erst zu Laufzeit aus der Datenbank geholt werden fehlgeschlagen wäre.

Daher ist mein Problem leider noch nicht gelöst.

Gruß

Timo

[Rolf B]

Hallo Timo,

Daher ist mein Problem leider noch nicht gelöst.

page-break-after: always; funktioniert bei mir (Chrome 92 und Firefox 91). Dein Problem wird demnach durch die Rahmenbedingungen erzeugt.

MDN schreibt noch dies:

• This property applies to block elements that generate a box. It won't apply on an empty <div> that won't generate a box.

Willst Du den Umbruch vielleicht durch eingefügte Zusatz-DIVs erzeugen? Leere DIVs erzeugen keine Box. Da müsste zumindest ein &nbsp; hinein. Wenn Du zweiseitig druckst und lediglich den Kapitelbeginn auf eine rechte Seite bringen willst, schau Dir die Werte "recto" oder "right" statt "always" an.

Ein hr-Element mit page-break-after und display:none, wie in deinem CSS zu sehen, wird auf Grund dieser Regelung aber auf keinen Fall einen Umbruch erzeugen. "display:none" sorgt dafür, dass keine Box entsteht. Falls Du ein Leer-Div mit display:none und page-break-after ins HTML setzen wolltest, um den Umbruch zu erzeugen - nope, keine Box, kein Umbruch. Setz ein &nbsp; hinein und die font-size auf 0, damit es Dir keinen überflüssigen vertikalen Leerraum erzeugt.

Je nach Art des von Dir erzeugten Dokuments solltest Du aber überlegen, ob Du nicht auch ohne Zusatz-DIVs auskommen kannst. Abschnitte auf einer Seite zusammen zu halten sollte auch über page-break-inside:avoid gehen... "Sollte". Das ist alles noch relativ frisch in den Specs, die Browser waren nie als DTP Programm konzipiert und lernen das erst jetzt.

• The page-break-after property is now a legacy property, replaced by break-after.

Das ist etwas, das Du mitnehmen solltest, was aber dein Problem nicht auslösen sollte.

Ich habe mich bewusst dafür entschieden Bilder statt Quellcode hier ein zu stellen, weil jedes Testen aufgrund des Zusammenhanges mit anderen Seiten dieser Anwendung und Daten, welche erst zu Laufzeit aus der Datenbank geholt werden fehlgeschlagen wäre.

Damit kannst Du erklären, warum Du Auszüge zeigst, aber nicht, warum Du sie als Bilder postest. Warum Bilder schlecht sind, schrieb ich oben.

<div> mit der Klasse Pagebreak existiert. Es wird mit PHP zur Laufzeit reingeladen

Ja. Schön. Und wie soll man das deinen Bildern ansehen?

Wenn meine Hinweise von oben es nicht lösen, und dein Problem innerhalb einer großen Anwendung auftritt, dann löse es bitte heraus. Nimm das HTML, das vom PHP an den Browser gegeben wird und speichere es als eigene Datei, und nimm alles raus, was nicht erforderlich ist, aber so, dass das Problem noch existiert. Und das zeige dann vor. Als geposteten Code, besser noch als Onlinebeispiel.

Anders werden wir Dir wohl nicht helfen können. Wie von Dir und mir gesagt: grundsätzlich geht es mit page-break-after, und wenn es nicht geht, passt irgendwas im Zusammenhang nicht. Den wir aber nicht kennen.

Rolf

[Timo Schmidt]

Hallo Rolf,

habe das Problem jetzt gelöst. Es scheint an einem Parentelement zu liegen, welches die Eigenschaft position: absolute hat. Leider ist diese Eigenschaften für die Funktion dieser Seite nicht verzichtbar wodurch ich wohl auf die Seitenumbrüche verzichten muss.

Was deine Hinweise angeht: Das mit den Blockendenelementen habe ich schon gelesen und folglich war das div auch nicht leer. Das hr soll nach einigen Dokumentationen auch funktionieren wenn es nicht angezeigt wird.

Gruß Timo

[MudGuard]

Hi,

habe das Problem jetzt gelöst. Es scheint an einem Parentelement zu liegen, welches die Eigenschaft position: absolute hat. Leider ist diese Eigenschaften für die Funktion dieser Seite nicht verzichtbar wodurch ich wohl auf die Seitenumbrüche verzichten muss.

ist das position:absolute denn auch bei @media:print unverzichtbar?

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo Timo,

position: absolute

Ah! Das hätte ich auch nicht gewusst. Ist aber irgendwie nahe liegend.

Ein Stackoverflow-Beitrag zum Thema

Leider ist diese Eigenschaften für die Funktion dieser Seite nicht verzichtbar

Hm. Das muss ich Dir, da Du deine Seite nicht offenlegst, so glauben.

Aber vielleicht hilft Dir der ja Tipp im Stackoverflow-Beitrag. Oder ein Redesign mit Grid-Layout?

Rolf