Seitenumbruch auf Papier…

Der Ausdruck von Webseiten wird meistens etwas stiefmütterlich behandelt. Grundsätzlich besteht die Möglichkeit, ein Stylesheet für den Druck einzubinden, das üblicherweise als print.css abgelegt wird. Das findest du aber nur in wenigen Themes. In den Standard-Themes Twenty Nineteen und Twenty Twenty gibt es diese Datei, bei den anderen Standard-Themes hat man darauf verzichtet.

Alternativ besteht die Möglichkeit, mit einer Media-Query Formatierungsanweisungen speziell für den Druck anzugeben. Hiervon machen auch die meisten Standard-Themes Gebrauch. Eine Media-Query kann z.B. so aussehen:

/* Print Style Sheet */
@media print {
  #header { height:75px; 
    font-size: 24pt; 
    color:black; }
  #content { margin-left:0; 
    float:none; 
    width:auto; 
    color:black; 
    font-size:12pt; }
}

Diese CSS-Regel kann dann auch einfach im Customizer unter Zusätzliches CSS eingetragen werden. Das Code-Beispiel habe ich der Dokumentation zu Print-Stylesheets entnommen, die du hier findest: Styling for Print

Es gibt nun kein HTML-Tag oder Block, mit dem du einen Seitenumbruch vorgeben kannst. In CSS gibt es nur die Eigenschaften page-break-before, page-break-after und page-break-inside. Mit page-break-before und page-break-after kannst du angeben, dass vor oder nach einem Abschnitt ein Seitenumbruch erfolgen soll. (vgl. https://css-tricks.com/almanac/properties/p/page-break/)

Möchtest du z.B. vor jeder Überschrift <h2> immer einen Umbruch, sieht die Regel so aus:

@media print {
  h2 { 
    page-break-before: always;
  }
}

Möchtest du hingegen in bestimmten Bereichen einen Umbruch vermeiden, sieht das so aus:

@media print {
  pre, blockquote, code {
    page-break-inside: avoid;
  }
}

Da du wahrscheinlich nicht vor jeder Überschrift einen Seitenumbruch erzeugen möchtest, ist es sinnvoller, dem Block mit der Überschrift „Beschreibungen“ über die Sidebar unter Erweitert eine eigene CSS-Klasse zuzuweisen. Ich nenne sie hier einfach mal seitenumbruch:

(zum Vergrößern anklicken)

Die CSS-Regel zum Seitenumbruch oberhalb dieser Zwischenüberschrift lautet dann

@media print {
  .seitenumbruch { 
    page-break-before: always;
  }
}

Die CSS-Regel trägst du entweder im Stylesheet eines Child-Themes oder aber im Customizer unter Zusätzliches CSS ein. Achte darauf, dass unter Erweitert der CSS-Klassenname ohne Punkt angegeben wird (seitenumbruch), während in der CSS-Regel ein Punkt verwendet werden muss (.seitenumbruch).

Im Druckdialog wird die Seite dann so angezeigt:

(zum Vergrößern anklicken)

Quod erat demonstrandum … 😉

Hallo,
denkst du bitte daran, das Thema dann auch als gelöst zu markieren, wenn das Thema für dich erledigt ist. Danke.
Viele Grüße
Hans-Gerd

Hallo Markus,
alles gut.
Der Dank gilt Bego, ich war ja nur der Kontrolletti 😉
Viele Grüße
Hans-Gerd