CSS page-break-after Headline

[mixmastertobsi]

Hallo,

leider gelingt es mir nicht, mit page-break-after: avoid zu verhindern, dass es einen Zeilenumbruch NACH der Headline gibt. Was mache ich mit page-break-after: avoid falsch?

Beispiel

<p>Ich bin ein Text, und nur ein Text, aber dieser Text, ist der Text</p>
<h2>Ich bin die Headline</h2>
<p>Ich bin ein Text, und nur ein Text, aber dieser Text, ist der Text</p>

[MudGuard]

Hi,

leider gelingt es mir nicht, mit page-break-after: avoid zu verhindern, dass es einen Zeilenumbruch NACH der Headline gibt. Was mache ich mit page-break-after: avoid falsch?

Du glaubst, daß es implementiert ist. CanIUse page-break-after:avoid

(ich hab mir erlaubt, in Deinen Beitrag einzugreifen, damit der Code besser dargestellt wird: da fehlte eine Leerzeile vor den Tilden)

cu,
Andreas a/k/a MudGuard

[Auge]

Hallo

leider gelingt es mir nicht, mit page-break-after: avoid zu verhindern, dass es einen Zeilenumbruch NACH der Headline gibt. Was mache ich mit page-break-after: avoid falsch?

Du beschreibst dein Problem nicht richtig oder hast die Aufgabe von page-break-after nicht verstanden.

Wie der Name schon sagt, soll mit page-break-after eine Trennung von Seiten in der Anzeige gesteuert werden. Mit page-break-after: avoid; im speziellen soll in seitenbasierten Medien (z.B. Papier) der dem ausgezeichneten Element folgende Inhalt nicht von ihm getrennt werden. Ein Zeilenumbruch, gerade, wie in deinem Beispiel, zwischen Überschrift und folgendem Textabsatz, bleibt davon aber unberührt.

<p>Ich bin ein Text, und nur ein Text, aber dieser Text, ist der Text</p>
<h2>Ich bin die Headline</h2>
<p>Ich bin ein Text, und nur ein Text, aber dieser Text, ist der Text</p>

Könntest du bitte noch einmal beschreiben, was du zu erreichen gedenkst?

Tschö, Auge

[mixmastertobsi]

Hallo und danke für die Rückmeldung.

Ich möchte erreichen, dass NACH eine Headline KEIN Umbruch erlaubt ist. Wenn ich zum Beispiel zwei spalten habe und die Überschrift "theoretisch" noch in der linken Spalte wäre, soll die Überschrift mit in die rechte Spalte genommen wird, wenn dort dann auch der Text kommt.

[Auge]

Hallo

Ich möchte erreichen, dass NACH eine Headline KEIN Umbruch erlaubt ist.

Ok, wir sollten uns zuallererst über die Begriffe einig werden. Welcher „Umbruch“ ist gemeint? Im OP sprachst du von einem Zeilenumbruch. page-break-before steuert einen Seitenumbruch. Also, wovon reden wir?

Wenn ich zum Beispiel zwei spalten habe und die Überschrift "theoretisch" noch in der linken Spalte wäre, soll die Überschrift mit in die rechte Spalte genommen wird, wenn dort dann auch der Text kommt.

Wo kommen jetzt noch die Spalten her? Bist du bei mehrspaltigem Satz? Für einen Ausdruck oder gar auf dem Bildschirm?

Entschuldige, dass ich so penetrant nachfrage, aber mir ist noch nicht klar, wohin die Reise gehen soll.

Tschö, Auge

[TS]

Hello,

leider gelingt es mir nicht, mit page-break-after: avoid zu verhindern, dass es einen Zeilenumbruch NACH der Headline gibt. Was mache ich mit page-break-after: avoid falsch?

Beispiel

<p>Ich bin ein Text, und nur ein Text, aber dieser Text, ist der Text</p>
<h2>Ich bin die Headline</h2>
<p>Ich bin ein Text, und nur ein Text, aber dieser Text, ist der Text</p>

Für Mehrspalten-Layout gelten andere CSS-Angaben, als für den Seitenumbruch.
Ich kämpfe in meinem Spalten-Layout allerdings auch noch damit und es will und will nicht funktionieren.

    break-after: avoid;
    break-after: avoid-column;
   /* und diverse -moz und -webkit-Angaben ... */

obige sind bestimmt auch noch falsch. Da steigt ja keiner mehr durch.

Gunnar hatte mir da schon mal Hilfestellung gegeben, aber es ging trotzdem nicht. Das lässt mich vermuten, dass die Browser das einfach noch nicht (sauber) implementiert haben, auch wenn in Can-I-Use steht, dass sie es könnten.

Liebe Grüße
Tom S.

[TS]

Hello,

leider gelingt es mir nicht, mit page-break-after: avoid zu verhindern, dass es einen Zeilenumbruch NACH der Headline gibt. Was mache ich mit page-break-after: avoid falsch?

Beispiel

<p>Ich bin ein Text, und nur ein Text, aber dieser Text, ist der Text</p>
<h2>Ich bin die Headline</h2>
<p>Ich bin ein Text, und nur ein Text, aber dieser Text, ist der Text</p>

Für Mehrspalten-Layout gelten andere CSS-Angaben, als für den Seitenumbruch.
Ich kämpfe in meinem Spalten-Layout allerdings auch noch damit und es will und will nicht funktionieren.

    break-after: avoid;
    break-after: avoid-column;
   /* und diverse -moz und -webkit-Angaben ... */

obige sind bestimmt auch noch falsch. Da steigt ja keiner mehr durch.

Gunnar hatte mir da schon mal Hilfestellung gegeben, aber es ging trotzdem nicht. Das lässt mich vermuten, dass die Browser das einfach noch nicht (sauber) implementiert haben, auch wenn in Can-I-Use steht, dass sie es könnten.

Da ich das selber auch immer noch auf dem Zettel habe, habe ich es eben nochmal in einem Firefox 51.0.1 ausprobiert. Die Selektoren greifen, aber das break-after oder break-before funktioniert nicht.

Liebe Grüße
Tom S.

[Matthias Apsel]

Hallo TS,

Für Mehrspalten-Layout gelten andere CSS-Angaben, als für den Seitenumbruch.
Ich kämpfe in meinem Spalten-Layout allerdings auch noch damit und es will und will nicht funktionieren.

    break-after: avoid;
    break-after: avoid-column;
   /* und diverse -moz und -webkit-Angaben ... */

obige sind bestimmt auch noch falsch. Da steigt ja keiner mehr durch.

Gunnar hatte mir da schon mal Hilfestellung gegeben, aber es ging trotzdem nicht. Das lässt mich vermuten, dass die Browser das einfach noch nicht (sauber) implementiert haben, auch wenn in Can-I-Use steht, dass sie es könnten.

Sie können das alle nicht:

• Supports the page-break-* alias from the CSS 2.1 specification, but not the break-* properties from the latest spec.
• Does not support avoid for page-break-before & page-break-after (only page-break-inside).

Bis demnächst
Matthias

[Linuchs]

leider gelingt es mir nicht, mit page-break-after: avoid zu verhindern, dass es einen Zeilenumbruch NACH der Headline gibt. Was mache ich mit page-break-after: avoid falsch?

Es ist nicht zuständig für Zeilenumbrüche, sondern für Seitenumbrüche, wie die Vokabel page vermuten lässt.

Und falls du nach der zweiten Zeile einen Seitenumbruch hast, stimmt mit deiner Seite was nicht. Also was ist dein wirkliches Problem?

Mich würde interessieren, wie viel Platz noch ist bis zum Seitenende, um Schusterjungen und Hurenkinder (Begriffe der Buchdrucker) behandeln zu können. Aber Javascript macht wohl Pause, wenn Firefox druckt.

Vielleicht könnte man die Überschrift und den folgenden Absatz in einen div Container packen und den mit page-break-inside: avoid belegen?

[TS]

Hello,

leider gelingt es mir nicht, mit page-break-after: avoid zu verhindern, dass es einen Zeilenumbruch NACH der Headline gibt. Was mache ich mit page-break-after: avoid falsch?

Es ist nicht zuständig für Zeilenumbrüche, sondern für Seitenumbrüche, wie die Vokabel page vermuten lässt.

Und falls du nach der zweiten Zeile einen Seitenumbruch hast, stimmt mit deiner Seite was nicht. Also was ist dein wirkliches Problem?

Lies bitte auch den Rest seiner Postings. Mixmastertobsi hat vermutlich ein mehrspaltiges Layout und möchte nicht, dass es eine verlorene Überschrift in einer Spalte gibt, also der eigentliche Text zur Überschrift einfach in die nächste Spalte umbricht. In diesem Falle meint er also "Spaltenumbruch" und nicht Zeilenumbruch.

Und wenn es sich um eine ganze Seite handelt (vermutlich im Druck), möchte er nicht, dass die Überschrift noch auf der vorherigen Seite unten alleine steht und der Text erst auf der nächsten Seite beginnt.

Leider funktionieren die Spaltenumbrüche in den meisten Browsern noch nicht, wie gewünscht.

Liebe Grüße
Tom S.

[Linuchs]

Bingo!

Vielleicht könnte man die Überschrift und den folgenden Absatz in einen div Container packen und den mit page-break-inside: avoid belegen?

Habe es gerade probiert, es funktioniert. Zumindest im Firefox 48.0 unter Linux.

Wenn ich einen Kalender drucke, steht der neue Monat als Überschrift nicht mehr allein unten auf der Seite, sondern wird auf die neue Seite gezogen.

Endlich ein Problem gelöst, danke für diese Diskussion.

Linuchs

[TS]

Hello,

Vielleicht könnte man die Überschrift und den folgenden Absatz in einen div Container packen und den mit page-break-inside: avoid belegen?

Habe es gerade probiert, es funktioniert. Zumindest im Firefox 48.0 unter Linux.

Wenn ich einen Kalender drucke, steht der neue Monat als Überschrift nicht mehr allein unten auf der Seite, sondern wird auf die neue Seite gezogen.

Endlich ein Problem gelöst, danke für diese Diskussion.

Das ist zwar eine Krücke, die auch nicht in allen Fällen funktionieren kann, wie gewünscht, aber ich probiere das gleich mal für mein Spaltenproblem aus...

Ergebnis:
Leider funktioniert es im Spaltendesign nicht.

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Ergebnis:
Leider funktioniert es im Spaltendesign nicht.

Wie meinen? Einfach in meinem Pen die Auskommentierung von Zeile 30 entfernt – sieht dann so aus.

Ergebnis:
Funktioniert in Firefox und Chrome. Nicht in Edge(?) und noch nicht in Safari 10.0 (laut Can I Use aber in 10.1).

LLAP 🖖

[TS]

Hello Gunnar,

Ergebnis:
Leider funktioniert es im Spaltendesign nicht.

Wie meinen? Einfach in meinem Pen die Auskommentierung von Zeile 30 entfernt – sieht dann so aus.

Ergebnis:
Funktioniert in Firefox und Chrome. Nicht in Edge(?) und noch nicht in Safari 10.0 (laut Can I Use aber in 10.1).

Danke. Du hast mir den Tag versüßt ;-)
Mit page-break-inside: avoid funktioniert es tatsächlich.
Ich hatte break-inside: avoid; und break-inside: avoid-column; versucht.

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Danke. Du hast mir den Tag versüßt ;-)
Mit page-break-inside: avoid funktioniert es tatsächlich.
Ich hatte break-inside: avoid; und break-inside: avoid-column; versucht.

Ich hätte wohl damals auf Can I Use verweisen sollen – so in 96pt großer Schrift.

Was Linda sagte …

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ich hätte wohl damals auf Can I Use verweisen sollen – so in 96pt großer Schrift.

Was Linda sagte …

Und meine Antwort hat er offensichtlich auch nicht gelesen, sonst hätte ich ihm schon den gestrigen Tag versüßt.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Und meine Antwort hat er offensichtlich auch nicht gelesen

Die war ja auch nicht in bunter Laufschrift.

LLAP 🖖

[TS]

Hello,

Ich hätte wohl damals auf Can I Use verweisen sollen – so in 96pt großer Schrift.

Aber bitte in bunter Laufschrift ;-P

Was Linda sagte …

Stimmt. Und macht auch viel mehr Spaß.

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@Linuchs

Zumindest im Firefox 48.0 unter Linux.

Du hast da einiges verpasst. Aktuell ist 51.0.1.

Es gehört wohl schon bösartiger Wille dazu, seinen Browser nicht auf dem neusten Stand zu halten.

LLAP 🖖