CSS/Tutorials/Print-CSS/Seitenformate

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Print-CSS(Weitergeleitet von @page)
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
30min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
• HTML
• CSS


Wollen Sie einen Seitenumbruch erzwingen oder verhindern, können Sie dies mittels break-before, break-inside sowie 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, sodass 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.

Ob die erste Seite eines Dokuments eine linke oder rechte Seite ist, wird durch die Schreibrichtung (siehe das dir-Universalattribut) des Wurzelelements bestimmt. Verläuft sie von links nach rechts, ist die erste Seite eine rechte Seite. Verläuft sie von rechts nach links, ist die erste Seite eine linke Seite. Stellen Sie sich dazu ein europäisches Buch und einen japanischen Manga-Comic vor.

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. Durch erzwungene Seitenumbrüche mit den CSS-Eigenschaften break-before oder break-after können Leerseiten entstehen. Um dafür CSS Regeln angeben zu können, ist die Pseudoklasse :blank im Gespräch, aber noch von keinem Browser implementiert.

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]

Die CSS-Eigenschaften zur Umbruchsteuerung waren ursprünglich nur für Seitenumbrüche gedacht. In neueren CSS Spezifkationen wurde dies auch auf Spalten erweitert. Deswegen ist der Begriff page- aus den Eigenschaftsnamen entfernt worden. Die Browserhersteller sind jedoch angehalten, zur Kompatibilität mit CSS2 die alten Eigenschaftsnamen als Aliasname weiterhin zu unterstützen.

Beachten Sie: Die Implementierung der Eigenschaften ist in den Browsern unterschiedlich weit fortgeschritten. Bitte prüfen Sie vor Verwendung die Kompatibilität mittels der beigefügten Links zu caniuse.com. Die verfügbaren Informationen sind teils recht widersprüchlich, sichere Kompatibilitätsangaben sind schwierig.

break-before / page-break-before[Bearbeiten]

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

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Details: caniuse.com

Mit Hilfe der Angabe break-before: page; können sie erzwingen, dass vor einem Element ein Seitenumbruch eingefügt wird. Wenn Sie die CSS2-Fassung dieser Eigenschaft verwenden, müssen Sie page-break-before: always; schreiben!

Eine vollständige Liste der erlaubten Angaben finden Sie auf der Referenzseite zur Eigenschaft.

Beispiel
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>break-before</title> <style> @media print { h1 { break-before: page; } } </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.

break-inside / page-break-inside[Bearbeiten]

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

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Details: caniuse.com

Unter anderem sind folgende Angaben sind erlaubt:

  • avoid = versucht, innerhalb des Elements keinen Umbruch vorzunehmen.
  • auto = keine Angabe zum Seitenumbruch (Normaleinstellung).

Eine vollständige Liste der erlaubten Angaben finden Sie auf der Referenzseite zur Eigenschaft.

Beachten Sie: In der Einstellung auto versuchen manche Browser, bestimmte Elemente auf einer Seite zu behalten. Das betrifft zum Beispiel Tabellenzeilen oder Elemente mit Rahmen. Es gibt keine always-Angabe, die dieses Verhalten deaktiviert und erzwingt, dass innerhalb des Elements umgebrochen wird.
Beispiel
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>break-inside</title> </head> <body> <p style="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>

break-after / page-break-after[Bearbeiten]

Mit der Eigenschaft break-after (in CSS 2: page-break-after) können Sie einen Seitenumbruch nach einem HTML-Element erzwingen oder verhindern.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Details: caniuse.com

Mit Hilfe der Angabe break-before: page; können sie erzwingen, dass vor einem Element ein Seitenumbruch eingefügt wird. Wenn Sie die CSS2-Fassung dieser Eigenschaft verwenden, müssen Sie page-break-before: always; schreiben!

Eine vollständige Liste der erlaubten Angaben finden Sie auf der Referenzseite zur Eigenschaft.

Beispiel
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>break-after</title> <style> @media print { h1 { break-after: page; } } </style> </head> <body> <h1>Überschrift 1. Seite</h1> ... <h1>Überschrift 2. Seite</h1> ... </body> </html>

Schusterjungen und Hurenkinder[Bearbeiten]

Hinweis

Die Website typolexikon.de weist darauf hin, dass der Druckerei-Fachbegriff "Hurenkind" heute als unangemessen betrachtet und nicht mehr verwendet wird. Statt dessen wird analog zum Englischen der Begriff "Witwe" verwendet.[3]

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. Microsoft hat hierfür in seinen Textverarbeitungsprogrammen den Begriff Absatzkontrolle gefunden.

Diese Begriffe wurden von Druckern in einer Zeit geprägt, wo Witwen, Waisen oder Kinder von Prostituierten keine soziale Absicherung hatten oder sogar auf der Straße leben mussten. Schusterjungen (oder Waisenkinder, die auf der Straße leben) mussten zum Geldverdienen oder Überleben schnell und immer vorne weg sein - dies entspricht der ersten Zeile eines Absatzes, die sich frech und ganz allein ans Ende einer Seite gemogelt hat, während der Rest des Absatzes erst auf der nächsten Seite kommt. Eine Witwe oder ein Hurenkind haben den Anschluss an Ehemann bzw. Mutter verloren, so wie eine einsame letzte Zeile eines Absatzes, die nicht mehr auf die gleiche Seite wie der Absatz passt.

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).[4]

  • 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. typolexikon.de: Hurenkind, abgerufen am 17.10.2021
  4. W3C: Breaks Between Lines: orphans, widows