HTML, CSS, media print: Seitenumbruch

www-nnnoob Gast #6174017 
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:
1
:

2
      @media print {

3
        h3 {

4
          page-break-before: auto;

5
        }

6
      }

7
:


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.
Angehängte Dateien:
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Langsamer Modus Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Melden Danke
www-nnnoob Gast #6174032 
ein Ausschnitt vom HTML-Code:
1
:

2
  <h3>V12 at C177</h3>

3
  <p>

4
      Files: ./PNGs/3935[_m]1_C177.png

5
  </p>

6
  <p>

7
    <table>  

8
      <tr>

9
       <td><img src="./PNGs/3935_1_C177.png" /></td>

10
       <td><img src="./PNGs/3935m1_C177.png" /></td>

11
      </tr>

12
    </table>

13
  </p>

14
    

15
  <h3>V5A at C163</h3>

16
  <p>

17
      Files: ./PNGs/3935[_m]2_C163.png

18
  </p>

19
  <p>

20
    <table>

21
      <tr>

22
       <td><img src="./PNGs/3935_2_C163.png" /></td>

23
       <td><img src="./PNGs/3935m2_C163.png" /></td>

24
      </tr>

25
    </table>

26
  </p>

27
:
Antwort Zitieren Bearbeiten Löschen Melden Danke
www-nnnoob Gast #6176650 
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:
1
:

2
   @media print {

3
      section {

4
         page-break-inside: avoid;

5
      }

6
   } 

7
:


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

2
 <section>

3
   <h3>V12 at C177</h3>

4
   <p>

5
       Files: ./PNGs/3935[_m]1_C177.png

6
   </p>

7
   <table>

8
     <tr>

9
       <td><img src="./PNGs/3935_1_C177.png" /></td>

10
       <td><img src="./PNGs/3935m1_C177.png" /></td>

11
     </tr>

12
   </table>

13
 </section>

14


15
 <section>

16
   <h3>V5A at C163</h3>

17
   <p>

18
       Files: ./PNGs/3935[_m]2_C163.png

19
   </p>

20
   <table>

21
     <tr>

22
       <td><img src="./PNGs/3935_2_C163.png" /></td>

23
       <td><img src="./PNGs/3935m2_C163.png" /></td>

24
     </tr>

25
   </table>

26
 </section>

27
:



Siehe auch 5.Abschnitt "Nesting <article> in <section> or Vice Versa?" 
in
https://www.w3schools.com/html/html5_semantic_elements.asp
Antwort Zitieren Bearbeiten Löschen Melden Danke
Thread beobachten

Antwort schreiben

Eine eigene Frage? Dieser Thread ist über 6 Jahre alt. Stell sie in einem eigenen Thread – dort lesen mehr Leute mit, und sie wird öfter und schneller beantwortet.

Neuen Thread starten

Eine Lösung, Ergänzung oder Rückmeldung zu diesem Thread? Dann antworte hier.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Dein Name und deine E-Mail-Adresse

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.