Mitgliederversammlung 2017


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 7.10.2017 um 10:00 Uhr in Berlin statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite Mitgliederversammlung 2017.

Interessierte Gäste sind gern gesehen.

Anmeldung: https://forum.selfhtml.org/events/2

CSS/Anwendung und Praxis/Print-CSS

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Für eine optimal formatierte Druckausgabe bietet CSS die Möglichkeit, für verschiedene Medientypen unterschiedliche Layouts festzulegen – es ist somit nicht nötig, serverseitig eine extra HTML-Seite zu erstellen. Mit den im Folgenden vorgestellten Methoden lässt sich das Layout für die Druckausgabe (auch Print-Stylesheet genannt) optimieren.

Hinweis

Dieser Artikel handelt von der Erstellung eines Layouts für die Druckausgabe, dennoch müssen Sie die Beispiele nicht unbedingt ausdrucken, um das Ergebnis zu sehen. Durch Auswahl folgender Menüpunkte und Tastaturkürzel gelangen Sie zur Druckansicht bzw. Druckvorschau Ihres Browsers, die der tatsächlichen Ausgabe entspricht:
  • Firefox: Menü/Drucken
  • Chrome: Menü/Drucken
  • Safari: Ablage/Drucken (Befehlstaste-P), dort der Button „Vorschau“
  • Internet Explorer: Datei / Druckvorschau
  • Opera: Menü/Drucken

Einbindung von Medientypen[Bearbeiten]

Sie können entweder pro Medientyp ein externes Stylesheet einbinden oder alle Medientypen mittels Media Queries innerhalb eines Stylesheets zusammenfassen.

Beachten Sie: Enthält das allgemeingültige Stylesheet Definitionen, die auf einem Ausdruck störend wären, müssen Sie diese im Druck-Stylesheet „print.css“ explizit überschreiben. Es ist daher vorteilhaft, ausschließlich für die Monitor-Ansicht notwendige Definitionen in „screen.css“ zu schreiben.
Empfehlung: Die hier gezeigten Beispiele arbeiten alle mit media queries, da dies übersichtlicher ist. Auch bei großen Projekten ist ein Stylesheet mit integrierten Angaben für mobile Endgeräte und die Druckausgabe vorteilhafter.


Abweichende Formatierung[Bearbeiten]

Es ist sinnvoll, für den Druck andere Formatierungen einzusetzen, als für die Anzeige auf dem Bildschirm. Dies gilt vor allem für positionierte Bereiche, ebenso für Farbgestaltung und Schriftarten.


Positionierung und Farbgestaltung[Bearbeiten]

Beispiel: Abweichende Positionierung und Farbgestaltung
@media screen {
  h1 {
    text-align: right;
    border-bottom: 3px dashed #00f;
    color: #008;
    background-color: inherit;
  }
}
 	
@media print {
  h1, ... {
    color: #000;
    background-color: #fff;
  }
}

Die Gültigkeit der oben notierten Zeilen ist auf den Medientyp screen beschränkt, welcher bei der Anzeige auf dem Bildschirm Anwendung findet.
Im letzten Block (@media:print) schließlich, werden alle für den Druck relevanten Definitionen zusammengefasst. Im Beispiel wird den meisten Elementen schwarze Schrift auf weißem Hintergrund zugewiesen.


Beachten Sie: Die meisten Druckertreiber ermöglichen es, einen Ausdruck in Graustufen zu erstellen, um teure Farbtinte zu sparen. Umgekehrt ist dies nicht möglich – formatieren Sie im Druck-Layout alles in Graustufen, wird der Ausdruck, selbst wenn Ihre Besucher dies wünschen, keine Farben enthalten. Es gilt hier abzuwägen, wie weit Sie Ihren Besuchern entgegenkommen wollen, ohne sie zu bevormunden. Zudem ignorieren die meisten Browser beim Druck die von Ihnen definierten Hintergrundfarben und -bilder, um auch an dieser Stelle Farbe bzw. Toner zu sparen. Dies ist sinnvoll und gewollt, Sie als Autor der Seite können dies nicht umgehen.

Schriftarten mit und ohne Serifen[Bearbeiten]

Serifen sind die abschließenden Striche an Buchstaben. Während auf dem Monitor serifenlose Schriftarten besser zu lesen sind, sollten Sie für die Erstellung des Drucklayouts auf Schriften mit Serifen zurückgreifen.

Beispiel: Abweichende Positionierung und Farbgestaltung
@media screen {
  * {
    font-family: verdana,arial,sans-serif;
  }
} 

@ media print{
  * {
    font-family: "times new roman",times,serif;
    text-align: justify;
  }
}

Die Ausgabe aller Elemente erfolgt auf dem Monitor mit einer serifenlosen Schrift,
… auf dem Drucker jedoch mit Serifen und im Blocksatz.

"Screenshot Serifen

Die linken zwei Buchstaben stellen die Schriftart „Verdana“ (ohne Serifen), die rechten beiden „Times New Roman“ (mit Serifen, rot markiert) dar.

Ausblenden von Elementen[Bearbeiten]

Mittels display:none lassen sich Elemente ausblenden, die auf einem Ausdruck nicht benötigt werden, beispielsweise Formulare, aber auch ganze Bereiche, wie etwa die Suche oder die Navigation. Um Seitenbestandteile auszublenden, bieten sich mehrere Möglichkeiten an:

Beispiel: Ausblenden von Elementen
@media print {
#id {
  display: none;
} 
element {
  display: none;
} 
.klasse {
  display: none;
} 
#id, element, .klasse {
  display: none;
}

Der erste Selektor #id eignet sich, wenn Bereiche, die nicht gedruckt werden sollen, klar mit einer ID abgegrenzt wurden.
Der zweite Selektor betrifft Elemente, die auf einem Ausdruck nicht benötigt werden, wie etwa Formulare.
Der dritte Selektor gilt für alle Elemente, denen eine entsprechende Klasse zugewiesen wurde.
Diese Methoden lassen sich problemlos kombinieren.

Ebenso ist es möglich, Elemente ausschließlich beim Ausdruck zu berücksichtigen. Weisen Sie dem gewünschten Element im allgemeingültigen Stylesheet display: none zu, im Drucklayout @media:print überschreiben Sie dies mit der gewünschten Eigenschaft, meist block oder inline.

Beachten Sie: Textbrowser und Suchmaschinen ignorieren CSS und somit die von Ihnen definierte Ausblendung. Das Dokument sollte daher auch bei gänzlichem Verzicht auf CSS logisch aufgebaut sein. visibility: hidden; ist an dieser Stelle übrigens nicht geeignet, es bewirkt zwar ebenfalls, dass Elemente nicht angezeigt werden, doch gibt es den für das Element reservierten Raum im Dokument nicht frei, es entstünden daher freie Flächen. display: none; hingegen entfernt Bereiche vollständig aus dem Elementenfluss – so, als wären sie im Quelltext nicht vorhanden.


Manueller Seitenumbruch[Bearbeiten]

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


Absatzkontrolle[Bearbeiten]

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.

Hochformat / Querformat[Bearbeiten]

Muss ein relativ breites Layout auf ein Blatt Papier passen, weil eventuell eine Tabelle mit vielen Spalten auf der Seite vorhanden ist, kann man die Ausgabe auf dem Drucker mittels @page { size: landscape } im Querformat definieren.


Beispiele mit generierten Inhalten[Bearbeiten]

Visualisierung des Verweisziels[Bearbeiten]

Beim Ausdruck von Webseiten geht eines der wichtigsten Merkmale von Hypertext verloren – die Verlinkung. Mit generiertem Inhalt ist es jedoch möglich, das Attribut href, welches das Linkziel beinhaltet, auf Papier sichtbar darzustellen:

Beispiel: Sichtbarmachung von Links
a[href]::after {
  content: " <"attr(href)">";
  color: #888;
  background-color: inherit;
  font-style: italic;
  size: 80%;
} 

Allen Elementen a, welche ein Attribut href besitzen, wird der Inhalt dieses Attributs nach einem Leerzeichen und einer spitzen öffnenden Klammer angefügt. Hinter dem Attributwert wird eine schließende spitze Klammer eingefügt. Die restlichen Definitionen entsprechen denen dieses und der folgenden Beispiele und sind frei variierbar.


Visualisierung von Ankernamen[Bearbeiten]

Nicht nur die Verweisziele, sondern auch die im Dokument gesetzten Anker gehen beim Ausdruck normalerweise verloren. Da der generierte Inhalt damit bei allen IDs im Dokument eingefügt wird, ist es zweckmäßig, den Selektor auf Überschriften zu begrenzen. Folgende Definition im Stylesheet fügt diese wieder ein:

Beispiel: Sichtbarmachung von Ankern
h1[id]::after,h2[id]::after,h3[id]::after {
  content:" [#"attr(id)"]";
  color: #888;
  background-color: inherit;
  font-style: italic;
  size: 80%;
}
Allen Elementen, die ein id-Attribut aufweisen und somit als Anker dienen, wird der Inhalt des Attributs in der Form „[#ankername]“ angefügt.
Dies wäre auch zur Anwendung im Bildschirm-Stylesheet geeignet.

Visualisierung weiterführender Information des title-Attributs[Bearbeiten]

Wenn Sie das title-Attribut einsetzen, um Zusatzinformationen per Tooltip zugänglich zu machen, müssen Sie beim Ausdruck nicht darauf verzichten.

Beispiel: Sichtbarmachung von Title-Attributen
[title]::after {
  content: " ("attr(title)")";
  color: #888;
  background-color:inherit;
  font-style: italic;
  size: 80%;
}
Allen Elementen, die ein Attribut title aufweisen, wird der Inhalt dieses Attributs angefügt. Der generierte Inhalt besteht aus einem Leerzeichen, einer öffnenden runden Klammer, dem Attribut-Inhalt und einer schließenden runden Klammer: „ (title-Attribut)“

Hinweis

Mit dieser Methode lassen sich auch Abkürzungen wie abbr, aber auch Bilder, Verweise usw. mit einem zusätzlichen Erklärungstext versehen.


Visualisierung von Zitat-Quellen und -Zeichen[Bearbeiten]

Das für kurze Zitate vorgesehene Element q und das für längere Zitat-Blöcke bestimmte Element blockquote lassen sich mit einem Attribut cite versehen, das eine Quelle in Form des URI beinhaltet. Mit generiertem Inhalt lässt sich der Attribut-Inhalt visualisieren:

Beispiel: Visualisierung von Zitaten
[cite]::after {
  content: close-quote" (Quelle: "attr(cite)")";
  font-size: 80%;
}
Hinter jedem Element, das ein Attribut cite aufweist, wird die Quelle des Zitats in Form des URI angefügt: „ (Quelle: http://example.com/) “
Beachten Sie: Die „Gänsefüßchen“, die Sie auf Ihrer Tastatur finden, entsprechen nicht der deutschen Typographie. Korrekt wäre die Verwendung von „ “ als doppelte und ‚ ‘ als einfache Anführungszeichen. Auch dies lässt sich mit generiertem Inhalt erreichen:
Beispiel: Sichtbarmachung von alt-Attributen
* {
  quotes: "\201E" "\201C" "\201A" "\2018";
} 	
q:before, blockquote:before {
  content:open-quote;
} 	
q:after, blockquote:after {
  content:close-quote;
}
Zunächst werden allen Elementen die korrekten Anführungszeichen zugewiesen. Diese wurden in Unicode definiert.

Anschließend wird allen q und blockquote die öffnende Variante vorangestellt...

… und die schließende angefügt.

Manipulation von Kopf- und Fußzeilen[Bearbeiten]

Die Einstellungen bezüglich des Andrucks von Kopf- und Fußzeilen obliegen dem Benutzer des Browsers. Von Seiten des Erstellers lassen sich diese mit HTML und CSS nicht beeinflussen.

Eine Möglichkeit ist das Einfügen von Elementen, die nur beim Druck sichtbar gemacht werden:

Beispiel: Kopfzeile für den Ausdruck
<style>
  @media screen {
    div.kopfzeile {
      display: none;
    }
  }
  @media print {
    div.kopfzeile {
      position: fixed;
      top: 0;
    }
  }
</style>

<div class="kopfzeile">Druckentwurf</div>
Beachten Sie: Wenn sich ein Element über mehrere Seiten erstreckt (z.B. ein Code-Listing mit pre) wird das Div überschrieben.

siehe auch[Bearbeiten]

Weblinks[Bearbeiten]