mixmastertobsi: CSS page-break-after Headline

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>
  1. 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

  2. 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

    --
    Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
    Toller Dampf voraus von Terry Pratchett
    1. 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.

      1. 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

        --
        Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
        Toller Dampf voraus von Terry Pratchett
  3. 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.

    --
    Die Krawatte ist das Kopftuch des Westens
    1. 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.

      --
      Die Krawatte ist das Kopftuch des Westens
    2. 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

      --
      Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
  4. 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?

    1. 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.

      --
      Die Krawatte ist das Kopftuch des Westens
    2. 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

      1. 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.

        --
        Die Krawatte ist das Kopftuch des Westens
        1. @@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 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. 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.

            --
            Die Krawatte ist das Kopftuch des Westens
            1. @@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 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. 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

                --
                Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                1. @@Matthias Apsel

                  Und meine Antwort hat er offensichtlich auch nicht gelesen

                  Die war ja auch nicht in bunter Laufschrift.

                  LLAP 🖖

                  --
                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              2. 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.

                --
                Die Krawatte ist das Kopftuch des Westens
      2. @@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 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory