Veit Schiele Communications

Veit Schiele Communications

Print-Medium

Für das Print-Medium lassen sich eine Reihe von CSS-Regeln festlegen, die dem Buchsatz entnommen sind. Darüberhinaus lassen sich auch QR-Codes mit der URL der Seite ausdrucken.
erstellt von Veit Schielezuletzt verändert: 03.05.2017 14:39 © Veit Schiele Communications GmbH, 2007–2017

Das CSS-Seitenmodell ermöglicht die Angabe von Rändern, Bedingungen für Seitenumbrüche usw.

@page-Regel

Beispiel:

@page {
    size: A5;
    margin-top: 50mm;
}
@page:first {
    background: url(beispielbild.png) no-repeat;
}
@page:left {
    margin: 16mm 16.84mm 13mm 16.84mm;
}
@page:right {
    margin: 16mm 16.84mm 13mm 16.84mm;
}

Seitenränder margin

Da der Seitenkontext kein Konzept für Schriften besitzt, sind die Einheiten em und ex nicht erlaubt.

Negative Werte (sowohl für die Seiten-Box als auch für Elemente) oder die absolute Positionierung von Inhalt können dazu führen, dass Inhalt außerhalb der Seiten-Box angeordnet ist – gegebenenfalls kann dieser Inhalt zugeschnitten werden.

Seitenumbrüche

Die Eigenschaften page-break-before, page-break-after, page-break-inside können folgende Werte annehmen:

auto
Ein Seitenumbruch vor (nach, innerhalb) der erzeugten Box wird weder erzwungen noch verboten.
always
Vor (hinter) der erzeugten Box wird immer ein Seitenumbruch erzwungen.
avoid
Ein Seitenumbruch vor (nach, innerhalb) der erzeugten Box wird vermieden.
left
Vor (nach) der erzeugten Box werden ein oder zwei Seitenumbrüche erzwungen, so dass die nächste Seite als linke Seite formatiert wird.
right
Vor (nach) der erzeugten Box werden ein oder zwei Seitenumbrüche erzwungen, so dass die nächste Seite als rechte Seite formatiert wird.

Benannte Seiten

Die page-Eigenschaft kann verwendet werden, um einen bestimmten Seitentyp anzugeben, auf dem ein Element angezeigt werden soll, z.B.:

@page tables {
    size: landscape;
}

table {
    page: tables;
}

platziert alle Tabellen auf einer horizontalen Seite namens tables.

Umbrüche innerhalb von Elementen

orphans
(auch Schusterjungen genannt) gibt an, wie viele Zeilen eines Abschnitts mindestens unten auf einer Seite noch angezeigt werden müssen.
widows
(auch Hurenkinder genannt) gibt an, wie viele Zeilen eines Abschnitts oben auf einer Seite mindestens noch angezeigt werden müssen.

Umbrüche innerhalb von Boxen

box-decoration-break

spezifiziert mit zwei zusätzlichen Eigenschaften, wie z.B. background, margin oder border sich bei einem Seitenumbruch verhalten:

slice
Der Standardwert, der die Box offensichtlich in mehrere Abschnitte teilt
clone
dupliziert die Stile für jede Seite

QR-Codes als URL-Referenzen

Mit QR-Codes können Sie Lesern einfach die URL der ausgedruckten Seite mitteilen:

@media print {
   header h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://www.veit-schiele.de/dienstleistungen/schulungen/css/seitenmedium&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

Ausblick

Erfreulicherweise kommen mit der Paged Media Specification weitere Eigenschaften, die zu einer umfassenden Gestaltung von Druckseiten erforderlich sind.

Hier ein Beispiel:

@page {
    counter-increment: page;
    @top-center {
        content: "Veit Schiele: Plone-Entwicklerhandbuch"
    }
}
@page:left {
    @bottom-left {
        counter-increment: page;
        content: counter(page);
    }
}
@page:right {
    @bottom-right {
        counter-increment: page;
        content: counter(page);
    }
}

Diese werden auch bereits von einer ganzen Reihe von Browsern unterstützt; siehe Can I use CSS Paged Media (@page).