HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » CSS » Seitendefinition

CSS: Seitendefinition

von Jan Winkler

In CSS Level 2 werden erstmals Eigenschaften sowie ein Aufruf zur Definition der Seite an sich beschrieben. Mit ihnen soll es möglich sein, beispielsweise einen Ausdruck des Dokuments genau zu beschreiben, um so bessere Resultat zu erzielen.

Anzeige

@page-Aufruf  nach oben

Der @page-Aufruf dient, wie in CSS - Aufrufe beschrieben, der Beschreibung des Dokumentes, wenn dieses Seitenumbrüche enthält. Dies ist beispielsweise dann der Fall, wenn das Dokument ausgedruckt wird. Zur (unterschiedlichen) Definition der Seiten (linke und rechte Seite) stehen dazu die folgenden Eigenschaften und Pseudo-Klassen zur Verfügung:

:left, :right und :first Pseudo-Klassen, margin's, marks und size

Dazu werden diese Eigenschaften hinter dem @page-Aufruf innerhalb von geschweiften Klammern notiert. Alles was innerhalb dieser Klammen steht, dient dann der Beschreibung der Seite(n).

Des Weiteren kann jeder @page-Aufruf einen Namen erhalten. Dieser wird direkt nach dem Aufruf notiert und dient als Referenz(-Name). Mit diesem Namen kann nachher auf diesen bestimmten Aufruf verwiesen werden. Beispiel:

@page MeineSeitenDefinition { ... } 

Wird kein Name definiert, so gilt dieser Aufruf automatisch für alle Elemente.

marks  nach oben

Die marks-Eigenschaft beschreibt die Art der Seiten-Marke und somit wie der Seiten- bzw. Elementinhalt behandelt werden soll. Dazu können die beiden Werte cross und crop notiert werden. cross(-Marken) dient zur Ausrichtung. crop(-Marken) beschreibt an welcher Stelle die Seite getrennt/umgebrochen werden soll. Beispiel:

@page { marks: cross crop; } 

page-break-after und page-break-before  nach oben

Die Eigenschaften page-break-after und page-break-before beschreiben den Seitenumbruch vor (page-break-before) bzw. nach (page-break-after) einem Element. Dazu können die folgenden Werte notiert werden:

  • auto - Es wird automatisch entschieden, wo der Umbruch erfolgt.
  • always - Der Umbruch wird vor bzw. nach dem Element unbedingt eingefügt.
  • avoid - Ein Umbruch vor bzw. nach einem Element sollte unbedingt vermieden werden.
  • left - Fügt eine oder zwei (leere) Seiten vor bzw. nach dem Element ein, sodass das Element unbedingt auf einer linken Seite ist.
  • right - Fügt eine oder zwei (leere) Seiten vor bzw. nach dem Element ein, sodass das Element unbedingt auf einer rechten Seite ist.

Beispiel:

P.langerAbsatz { page-break-before:always; 
                 page-break-after:left; } 

page-break-inside  nach oben

Die page-break-inside-Eigenschaft beschreibt, ob und wie ein Umbruch innerhalb eines Elementes erfolgen darf. Dazu können die Werte avoid und auto notiert werden. auto besagt, dass der Umbruch automatisch dort gesetzt wird, wo es sinnvoll ist (am Ende der Seite). avoid bedeutet, dass ein Umbruch innerhalb dieses Elementes zu vermeiden ist. Falls nötig, werden dann leere Zeilen eingefügt, sodass der Inhalt des Elements komplett auf die nächste Seite passt. Beispiel:

P.sehrLang { page-break-inside: avoid; } 

page  nach oben

Die page-Eigenschaft verbindet ein Element mit der Definition der Seite. Dazu wird als Wert der Name des @page-Aufrufes notiert mit dessen Eigenschaften das Element belegt werden soll. Wird das Element dann beispielsweise ausgedruckt, so sollte der Inhalt auf eine Seite kommen, deren Eigenschaften mit denen des referenzierten @page-Aufrufes übereinstimmend sind. Beispiel:

@page Kasimir { margin: 3cm 4cm; }
P.a { page:Kasimir; }

/* P.a wird nur auf Seiten mit einem Margin von 3cm / 4cm 
   ausgegeben */ 

orphans  nach oben

Die orphans-Eigenschaft beschreibt die Anzahl der Zeilen eines Absatzes, die am Ende einer Seite mindestens frei gehalten werden müssen. Der restliche Text des Absatzes soll dann auf der nächsten Seite weitergeführt werden. Als Wert wird dazu die Anzahl der Zeilen angegeben. Beispiel:

P.AmSeitenEnde { orphans: 5; } 

size  nach oben

Die size-Eigenschaft beschreibt die Größe bzw. Form der Seite. Als Werte können dazu die folgenden verwendet werden:

  • Längenangabe - Beschreibt die Seite mit einer exakten Größe. Dabei können entweder ein oder zwei Werte notiert werden. Wird ein Wert notiert, so gilt dieser für Höhe und Breite. Werden zwei Werte notiert, so gilt der erste Wert für die Breite und der zweite für die Höhe.
  • auto - Der Inhalt bzw. die Seiten-Box wird automatisch der Größe des Ausgabeblattes angepasst.
  • portrait - Die Höhe und Breite der Seiten-Box werden der Größe des Ausgabeblattes angepasst und der Inhalt wird im Hochformat (die kurzen Seiten sind horizontal) dargestellt.
  • landscape - Die Höhe und Breite der Seiten-Box werden der Größe des Ausgabeblattes angepasst und der Inhalt wird im Querformat (die langen Seiten sind horizontal) dargestellt.

Beispiel:

@page Bild { size:landscape; }
@page Text { size:portrait; }
@page { size: 20cm x 29cm; margin:auto; } 

widows  nach oben

Die widows-Eigenschaft beschreibt die Anzahl der Zeilen eines Absatzes, die am Anfang einer Seite mindestens frei gehalten werden müssen. Als Wert wird dazu die Anzahl der Zeilen angegeben. Beispiel:

P.AmSeitenAnfang { widows: 5; } 



« zurück weiter »
Bewerten

 

CSS

.Autor:Jan Winkler.
. Bewertung:
CSS: Seitendefinition HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 450 Beiträge im CSS Forum .

Navigation

Images verschiedener Größe gleich anpassen von Alphavader
Seite verzerrt bei anderen Auflösungen. von Gorgomir
img Stretcher auf fluid Div Container von Thunder1985
Dropdown Menu unter den header von Harburger1887
Kreis um Buchstabe... von karinsch
footer unten platzieren von Alex...
css-anfaengerin - schreibschutz von css-tempate entfernen von kiloberta
Programmierer in Festanstellung oder Freiberuflich gesucht von GP.1226
Button Formatierungs Problem mit Transparentem Hintergrund von redlin
Runde Ecken IE 8 / ohne JavaScript und BG Bilder? von kamikaetzelein
3 Div Elemente ausrichten von Kanikkl
Bilder werden nur im IE angezeigt von Schmido
Contentinhalt vor Linkstruktur im Seitenquelltext von tbtip
Browserunterschiede in Darstellung von CrazyPlaya
Wie sollte ich das aufbauen? von Reelay

zum CSS Forum »


 
     
 

Anzeige