HTML, CSS, media print: Seitenumbruch

[www-nnnoob (Gast)]

Hallo CSS-Begeisterte,

ich dokumentiere gerne el. Messungen in dem ich Scope-Hardcopies mit 
(moeglichst wenig) HTML umgarne.
HTML ist Handgeschrieben oder fuer Messreihen teils mit Scripts 
generiert (Eintagsfliegen, mal in Bash, mal in Python) und deswegen 
keine konventionelle
Textbearbeitung (kein Wort darueber!).

Das sich bei mir wiederholende Muster lautet z.B:
- Ueberschrift
- Erlaeuterungstext (1..4 Saetze)
- Name der Bilddatei(en)
- eingeblendete Bilddatei(en) (meist in einer HTML-Tabelle)

Am Bildschirm ist alles gut, gut genug.

PROBLEM

Ab und an werden davon (Teil-)AUSDRUCKE gemacht (ja: so richtig auf 
toten Baeume...) und hierbei geraten Seiteumbrueche an ausgesprochen 
doofe Stellen.

Z.B. zwischen Ueberschrift und Erlaeuterungstext, wobei die Ueberschrift 
dann wie ein Schusterjunge wirkt.

* <https://de.wikipedia.org/wiki/Hurenkind_und_Schusterjunge>;


FRAGE

Wie bekomme ich mein o.g. "Informationsblock" als untrennbar hin?


Ich habe aus CSS bisher rumprobiert mit:

:
      @media print {
        h3 {
          page-break-before: auto;
        }
      }
:

Damit bekomme ich nur halbwegs befriedigende Brgebnisse wenn ich mehrere 
Scope-Hardcopies in einem Block habe, weil ein Block immer auf einer 
neuen Seite anfaengt und mehrere Bilder die Seite einigermassen fuellen.

Habe ich aber nur 1 Scope-Hardcopy im Block, fuellt dieser kaum die 
halbe Seite; der naechste Block wuerde auch noch auf die Seite passen.


Ich bin also an einem Ansatz/Loesungsweg interessiert, um das HTML/CSS 
rendering ein wenig besser auf das seitenorientierte Medium "Druck" hin 
zu optimieren.
(es muss nicht so perfekt rauskommen wie Datenblaetter von Motorola, 
Philips, TI & co :-> jedoch orientere ich mich daran)

So es moeglich ist, moechte ich NICHT eine HTML-Tabelle ueber alle o.g. 
Bloecke machen.

[www-nnnoob (Gast)]

ein Ausschnitt vom HTML-Code:

:
  <h3>V12 at C177</h3>
  <p>
      Files: ./PNGs/3935[_m]1_C177.png
  </p>
  <p>
    <table>  
      <tr>
       <td><img src="./PNGs/3935_1_C177.png" /></td>
       <td><img src="./PNGs/3935m1_C177.png" /></td>
      </tr>
    </table>
  </p>
    
  <h3>V5A at C163</h3>
  <p>
      Files: ./PNGs/3935[_m]2_C163.png
  </p>
  <p>
    <table>
      <tr>
       <td><img src="./PNGs/3935_2_C163.png" /></td>
       <td><img src="./PNGs/3935m2_C163.png" /></td>
      </tr>
    </table>
  </p>
:

[Pandur S. (jetztnicht)]

Nachschauen :
https://www.w3schools.com/cssref/pr_print_pageba.asp
https://www.w3schools.com/cssref/pr_print_pagebb.asp
https://www.w3schools.com/jsref/prop_style_pagebreakbefore.asp
https://www.w3schools.com/cssref/pr_break-after.asp
https://www.w3schools.com/cssref/pr_break-inside.asp
..

suchen bei w3schools.com nach "page break"

[www-nnnoob (Gast)]

Joggel E. schrieb:
> https://www.w3schools.com/cssref/pr_break-inside.asp

page-break-inside ist GUT!
:-)
Ich war bei nur "page-break-before" und "page-break-after" haengen 
geblieben...

Ausserdem hat es sich gelohnt den Unterschied von "Block level Elements" 
und "Inline Elements" deutlich zu verinnerlichen.
https://www.w3schools.com/html/html_blocks.asp


MEINE Loesung

Was ich als ein Block betrachte, soll ich auch mit einem "Block level 
Element" umschliessen: nur so laesst es sich auch stylen .
Hier habe ich mich fuer <section> entschieden.


Mein CSS legt nun fuer section fest:

:
   @media print {
      section {
         page-break-inside: avoid;
      }
   } 
:

und obiger Ausschnitt vom HTML-Code ist nun:
(auf das <p> um <table> habe ich gleich verzichtet)

:
 <section>
   <h3>V12 at C177</h3>
   <p>
       Files: ./PNGs/3935[_m]1_C177.png
   </p>
   <table>
     <tr>
       <td><img src="./PNGs/3935_1_C177.png" /></td>
       <td><img src="./PNGs/3935m1_C177.png" /></td>
     </tr>
   </table>
 </section>

 <section>
   <h3>V5A at C163</h3>
   <p>
       Files: ./PNGs/3935[_m]2_C163.png
   </p>
   <table>
     <tr>
       <td><img src="./PNGs/3935_2_C163.png" /></td>
       <td><img src="./PNGs/3935m2_C163.png" /></td>
     </tr>
   </table>
 </section>
:

Siehe auch 5.Abschnitt "Nesting <article> in <section> or Vice Versa?" 
in
https://www.w3schools.com/html/html5_semantic_elements.asp