HTML, CSS, media print: Seitenumbruch

www-nnnoob Gast #6174017
Lesenswert?
• ▲
▼ 
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 Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
www-nnnoob Gast #6174032
Lesenswert?
• ▲
▼ 
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 Beitrag melden
www-nnnoob Gast #6176650
Lesenswert?
• ▲
▼ 
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 Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren