CSS und Drucker

[TS]

Hello,

ich habe mit den Angaben für @media print herumexperimentiert.

       @media print {
          body {
             max-width: 17.0cm;
             font-family: "century gothic", helvetica, sans-serif;
             font-size: 11pt;
             margin-left: 2.0cm;
             margin-right: 2.0cm;
           }

           h2 {
             break-before: page;
           }
       }

      @page {
          margin-left: 2cm;
      }

Font-Size scheint zu funktionieren, die Ränder werden aber ignoriert... Da habe ich beim Druck links jetzt 3cm und rechts ca. 1,5cm. Mit den 17cm für die Breite habe ich auch herumexperimentiert, leider auch ohne Wirkung.

Wie macht man es denn nun richtig?

Hingegen funktioniert break-before ausgezeichnet. Allerdings möchte ich diese Anweisung für die jeweils erste H2 nach einer H1 nicht umgesetzt haben. Was muss ich da schreiben?

Ob das @page da überhaupt eine Wirkung haben könnte? Ich habe es nur kurz ausprobiert - ohne Wirkung - und wieder rausgenommen.

[edit] @page verschoben ins @media print und angepasst. Hat eine Wirkung... Der linke und der rechte Rand stimmen jetzt beim Druck.

Gleich noch eine weitere Frage:
Wie kann ich einen Kopf und einen Fußz auf jeder Druckseite darstellen lassen?
Da gibt es ein Thread in Stackoverflow, aber damit bin ich noch nicht zum Erfolg gekommen.

Glück Auf
Tom vom Berg

[Raketenwilli]

Gleich noch eine weitere Frage:
Wie kann ich einen Kopf und einen Fuß auf jeder Druckseite darstellen lassen?

Ich hab mal die Spec bezüglich @page gequält. Im „Editor’s Draft, 24 May 2022“ finde ich ein Beispiel welches passen könnte:

h1 { break-before: left }

@page :blank {
  @top-center { content: none }
}

@page :right {
  @top-center { content: "Preliminary edition" }
  @bottom-center { content: counter(page) }
}

Das ließe sich wohl noch um ein

@page :left {
  @top-center { content: "Preliminary edition" }
  @bottom-center { content: counter(page) }
}

ergänzen. Oder man verzichtet auf die Pseudoklassen…

Weitere Anhaltspunkte, ebenda, Punkt 3.1: Page Backgrounds and Painting Order - dort wird auch @top-left, @top-right, @bottom-left und @bottom-right freundlich erwähnt.

Ich bin auf das Ergebnis Deiner Versuche gespannt.

• Denn „can i use“ kennt „@top-center“ und so weiter noch nicht… - ich glaube daher, das ist „Zukunftsmusik“. Es kann aber sein, das der eine oder andere sehr aktuelle Browser (oder einer aus dem jeweiligen Testing-Bereich) das dennoch schon kann.

[Raketenwilli]

• Denn „can i use“ kennt „@top-center“ und so weiter noch nicht… - ich glaube daher, das ist „Zukunftsmusik“. Es kann aber sein, das der eine oder andere sehr aktuelle Browser (oder einer aus dem jeweiligen Testing-Bereich) das dennoch schon kann.

Chromium, Version 101.0.4951.15 (Entwickler-Build) Ubuntu 22.04 (64-Bit), kann es noch nicht.

Was hast Du eigentlich gegen die schönen Kopf- und Fußzeilen, die man im Drucken-Dialog einstellen kann? 😜

Ansonsten bleibt Dir:

HTML→PDF→Postscript→LaTex→(automatisch Editieren)→LaTex→PDF||PS→Drucker

[Gunnar Bittersmann]

@@TS

Hingegen funktioniert break-before ausgezeichnet. Allerdings möchte ich diese Anweisung für die jeweils erste H2 nach einer H1 nicht umgesetzt haben. Was muss ich da schreiben?

Das hängt – Überraschung! – von deinem Markup ab. Hast du die Abschnitte als section ausgezeichnet? Oder hast du Spaghetti-Code à la

	<h1>Allgemeine Erklärung der Menschenrechte</h1>
	<h2>Artikel 1</h2>
	<p>Alle Menschen sind  frei und gleich an Würde und Rechten geboren. Sie sind mit Vernunft und  Gewissen begabt und sollen einander im Geiste der Brüderlichkeit begegnen.</p>
	<h2>Artikel 2</h2>
	⋮

Im zweiten Fall kannst du eine für alle h2 gesetzte Eigenschaft für die unmittelbar nach h1 folgende zurücksetzen, bspw.:

h2 { break-before: page }

h1 + h2 { break-before: revert }

Das geht freilich nur, wenn zwischen h1 und h2 kein anderer Inhalt ist.

Besser dran bist du also mit

h2 { break-before: page }

h2:first-of-type { break-before: revert }

Noch besser: Du setzt die Eigenschaft für die erste h2 gar nicht erst:

h2:not(:first-of-type) { break-before: page }

☞ Beispiel (dort für margin-top)

---

Im ersten Fall, wenn du deinen Inhalt ordentlich strukturiert hast

	<h1>Allgemeine Erklärung der Menschenrechte</h1>
	<section>
		<h2>Artikel 1</h2>
		<p>Alle Menschen sind  frei und gleich an Würde und Rechten geboren. Sie sind mit Vernunft und  Gewissen begabt und sollen einander im Geiste der Brüderlichkeit begegnen.</p>
	</section>
	<section>
		<h2>Artikel 2</h2>
		⋮

kannst du die h2 aller Abschnitte außer des ersten per
section:not(:first-of-type) h2 selektieren.

Brauchst du aber nicht, sondern nicht auf die Überschriften, sondern gleich auf die Abschnitte anwenden:

section:not(:first-of-type) { break-before: page }

☞ Beispiel (dort für margin-top)

🖖 Живіть довго і процвітайте