CSS/Tutorials/Print-CSS/Seitenformate

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
• HTML
• CSS

Wollen Sie einen Seitenumbruch erzwingen oder verhindern, können Sie dies mittels page-break-before sowie page-break-after erreichen.

Damit bei längeren Absätzen nicht einzelne Zeilen am Ende (Schusterjunge), bzw. Beginn (Hurenkind) der Seite isoliert stehen, kann man die CSS-Eigenschaften widows und orphans verwenden.

@page - Außenabstände in aufgeteilten Medien[Bearbeiten]

Wenn ein Medium die Inhalte eines Dokuments nicht kontinuierlich wiedergeben kann (z.B. durch Scrollen oder Vorlesen), wird der Inhalt in mehrere Seiten aufgeteilt. Die Regel @page erlaubt es, diese Seiten anzusprechen, so dass ein Außenabstand definiert werden kann. Als Außenabstand wird zum Beispiel die Entfernung zwischen den Rändern eines Blatt Papiers und dem aufgedruckten Inhalt bezeichnet.[1]

  • CSS 2.1
  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

Auf @page folgt ein durch geschweifte Klammern getrennter Abschnitt, in dem der Außenabstand definiert wird. Dies erfolgt über die margin-Eigenschaften.

Außenabstände, die durch @page festgelegt werden, müssen nicht zwingend eingehalten werden. Ein Browser kann und wird dem Benutzer die Möglichkeit geben, Außenabstände selbst zu bestimmten. Dies gilt vor allem für Printmedien.

Beispiel
@page { margin: .5in; }
@page { margin-top: 1.5cm; margin-left: 2.5cm; }
Beachten Sie: Per !important festgelegte Außenabstände überschreiben sogar die Browsereinstellungen unter "Seite einrichten ..." und dabei wird nicht beachtet, dass die Drucker in der Regel nicht das gesamte Papier bedrucken können.

Erste, linke und rechte Seiten[Bearbeiten]

Mit Hilfe von @page können auch Regeln definiert werden, die nur für die erste Seite, nur für linke oder nur für rechte Seiten gelten sollen.

Die erste Seite ist eine linke Seite, wenn die Schreibrichtung (siehe die direction-Eigenschaft) des Wurzelelements von links nach rechts verläuft und eine rechte Seite, wenn die Schreibrichtung des Wurzelelements von rechts nach links verläuft.

Durch das Einfügen eines Seitenumbruches (page-break-*-Eigenschaften) vor dem ersten auszugebenden Inhalt kann die erste Seite von einer linken in eine rechte Seite (und umgekehrt) verwandelt werden.

Um eine bestimmte Art von Seiten anzusprechen wird nach @page, getrennt durch ein Leerzeichen, eine der Pseudoklassen :first (die erste Seite), :left (linke Seiten) bzw. :right (rechte Seiten) angegeben. Diese Pseudoklassen existieren allein für die Verwendung mit @page.

Beispiel
@page :first { margin-top: 5cm; }
@page :left  { margin-right: 3.5cm; }
@page :right { margin-left: 3.5cm; }
@page        { margin: 2.5cm; }
In diesem Beispiel erhält die erste Seite einen großen Abstand an der Oberseite des Blatts. Die linken und rechten Seiten erhalten jeweils zusätzlichen Abstand am Bundsteg. Zuletzt werden die übrigen Abstände allgemein definiert. Dies ist möglich, da @page-Regeln mit Pseudoklasse höher gewichtet werden als solche ohne.

Seitengrößen bei Druckausgabe[Bearbeiten]

Die Eigenschaft size legt bei paged-Medien die Außenmaße fest. Absolute Seiten haben feste Maße, während relative Seiten den Inhalt an den Medientyp anpassen.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Folgende Angaben sind möglich:

  • auto: (Standardwert) relative Seitenverhältnisse
  • 1 oder 2 Längenangaben: absolute Seitengröße, wird nur 1 Wert angegeben, wird ein Quadrat erzeugt, zwei Werte ermöglichen ein Rechteck
  • portrait: Hochformat, relative Seitengröße
  • landscape: Querformat, relative Seitengröße
  • inherit
Beachten Sie: Wenn die Seitengröße mit einer width, height, device-width, device-height, aspect-ratio, device-aspect-ratio oder orientation Media Query festgelegt wurde, muss die Größenangabe in size ignoriert werden.

Seitenumbruch[Bearbeiten]

page-break-before[Bearbeiten]

Mit der Eigenschaft page-break-before können Sie bei der Druckausgabe einen Seitenumbruch vor einem HTML-Element erzwingen oder verhindern.[2]

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Details: caniuse.com

Folgende Angaben sind erlaubt:

  • always = immer einen Seitenumbruch vor dem aktuellen Element einfügen.
  • avoid = nie einen Seitenumbruch vor dem aktuellen Element einfügen.
  • left = bei linken/rechten Seiten Seitenumbruch einfügen, aktuelles Element auf nächste linke Seite.
  • right = bei linken/rechten Seiten Seitenumbruch einfügen, aktuelles Element auf nächste rechte Seite.
  • inherit = Angabe zum Seitenumbruch vom Elternelement übernehmen (erben).
  • auto = keine Angabe zum Seitenumbruch (Normaleinstellung).
Beachten Sie: Internet Explorer und Firefox interpretieren die Werte left und right nicht.
Beispiel
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>page-break-before</title> <style> @media print { h1 {page-break-before:always;} } </style> </head> <body> <h1>Überschrift 1. Seite</h1> ... <h1>Überschrift 2. Seite</h1> </body> </html>
Beachten Sie: Sie können dies nicht auf leere divs und absolut positionierte Elemente anwenden.

page-break-inside[Bearbeiten]

Mit der Eigenschaft page-break-inside können Sie einen Seitenumbruch innerhalb eines HTML-Elements verhindern.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Details: caniuse.com

Folgende Angaben sind erlaubt:

  • avoid = nie einen Seitenumbruch vor dem aktuellen Element einfügen.
  • auto = keine Angabe zum Seitenumbruch (Normaleinstellung).
Beispiel
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>page-break-inside</title> </head> <body> <p style="page-break-inside:avoid"> Innerhalb<br>dieses<br>Abschnitts<br>darf<br>kein<br>Seitenumbruch<br>erfolgen.<br> Er wandert daher beim Ausdruck auf die nächste Seite. </p> </body> </html>

page-break-after[Bearbeiten]

Mit der Eigenschaft page-break-after können Sie einen Seitenumbruch nach einem HTML-Element erzwingen oder verhindern.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Details: caniuse.com

Folgende Angaben sind erlaubt:

  • always = immer einen Seitenumbruch nach dem aktuellen Element einfügen.
  • avoid = nie einen Seitenumbruch nach dem aktuellen Element einfügen.
  • left = bei linken/rechten Seiten Seitenumbruch einfügen, nachfolgendes Element auf nächste linke Seite.
  • right = bei linken/rechten Seiten Seitenumbruch einfügen, nachfolgendes Element auf nächste rechte Seite.
  • inherit = Angabe zum Seitenumbruch vom Elternelement übernehmen (erben).
  • auto = keine Angabe zum Seitenumbruch (Normaleinstellung).
Beispiel
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>page-break-after</title> <style> @media print { h1 {page-break-after:always;} } </style> </head> <body> <h1>Überschrift 1. Seite</h1> ... <h1>Überschrift 2. Seite</h1> ... </body> </html>
Beachten Sie: Internet Explorer und Firefox interpretieren die Werte left und right nicht.

Schusterjungen und Hurenkinder[Bearbeiten]

Mit den CSS-Eigenschaften orphans und widows können Sie verhindern, dass Seitenumbrüche innerhalb von Fließtext den Text so unglücklich trennen, dass eine einzelne Zeile auf der neuen Seite steht und alle anderen Absatzzeilen auf der Seite vor dem Seitenumbruch bleiben.

orphans[Bearbeiten]

Mit orphans können Sie bestimmen, wie viele Zeilen eines längeren Fließtextabsatzes auf der Seite vor dem Umbruch mindestens stehen sollen. Erlaubt ist eine Zahl für die Anzahl Zeilen. Voreinstellung ist 2.(DTP-Fachjargon hierzulande: Schusterjungen).[3]

  • CSS 2.0
  • Chrome
  • Leer
  • IE 8
  • Opera
  • Safari

Details: caniuse.com

Beispiel
<!doctype html> <html lang="de"> <head> <title>orphans</title> <style type="text/css"> p { orphans:3; font: 50pt/100pt Verdana,sans-serif; margin:1cm 0 0; padding:0; } </style> </head> <body> <p> Absatz_1:_Zeile_1 Absatz_1:_Zeile_2 Absatz_1:_Zeile_3 Absatz_1:_Zeile_4 Absatz_1:_Zeile_5 </p> <p> Absatz_2:_Zeile_1 Absatz_2:_Zeile_2 Absatz_2:_Zeile_3 Absatz_2:_Zeile_4 Absatz_2:_Zeile_5 Absatz_2:_Zeile_6 </p> </body></html>
Beachten Sie: Derzeit (Stand: November 2020) unterstützt Firefox diese Eigenschaft nicht.

widows[Bearbeiten]

Mit widows können Sie bestimmen, wie viele Zeilen eines längeren Fließtextabsatzes auf der Seite nach dem Umbruch auf der neuen Seite mindestens stehen sollen (DTP-Fachjargon hierzulande: Hurenkinder). Erlaubt ist eine Zahl für die Anzahl Zeilen. Voreinstellung ist 2.

  • CSS 2.0
  • Chrome
  • Leer
  • IE 8
  • Opera
  • Safari

Details: caniuse.com

Beispiel
<!doctype html> <html lang="de"> <head> <title>widows</title> <style type="text/css"> p { widows:4; font:50pt/100pt Verdana,sans-serif; margin:1cm 0 0; padding:0; } </style> </head> <body> <p> Absatz_1:_Zeile_1 Absatz_1:_Zeile_2 Absatz_1:_Zeile_3 Absatz_1:_Zeile_4 Absatz_1:_Zeile_5 </p> <p> Absatz_2:_Zeile_1 Absatz_2:_Zeile_2 Absatz_2:_Zeile_3 Absatz_2:_Zeile_4 Absatz_2:_Zeile_5 Absatz_2:_Zeile_6 </p> </body></html>
Beachten Sie: Derzeit (Stand: November 2020) unterstützt Firefox diese Eigenschaft nicht.



Weblinks[Bearbeiten]

  1. W3C: page size property
  2. W3C: Page breaks
  3. W3C: Breaks Between Lines: orphans, widows