CSS für Printausgabe erstellen
Allgemein
Es gibt verschiedene Arten eine Seite eines Webauftrittes zu drucken. Eine Möglichkeit ist, den vom Browser angebotenen Druckbefehl zu verwenden. Eine andere ist, einen Link (Text oder Icon) auf der Webseite einrichten. Wenn ein Print CSS Datei zur Verfügung steht, kann eine extra formatierte Seite für den Druck ausgegeben werden.
Drucken ohne print CSS:
- Die ganze Webseite wird gedruckt inklusive nicht notwendiger Informationen, z.B. Werbung, Navigation.
- Hintergrundsbilder und -farben werden nur mitgedruckt, wenn der Nutzer in seinen Druckeinstellungen die hierfür notwendige Einstellung gemacht hat. Es kann also sein, dass ein weißer Text auf farbigem Hintergrund auf der Webseite in der Druckausgabe nicht sichtbar ist.
- Die Webseitenbreite entspricht nicht der Druckbreite.
Drucken mit print CSS:
- kontrollierbare optische Ausgabe für den Druck
- nicht benötigte Elemente können entfernt werden, z.B. Menüleisten, Werbung
- Für Druckausgabe besser lesbare Schriftart (serifen)
- Bei Links können die URLs mit ausgedruckt werden
- Verschiedene schlecht lesbare Schriftfarben können angepasst werden
CSS-Dateien für verschiedene Medien werden im Typoscript im Setup folgendermaßen eingebunden:
1. CSS Dateien getrennt nach Medientyp
## Page layout CSS
page.includeCSS.file1 = fileadmin/templates/css/layout.css
page.includeCSS.file1.media = all
## Print CSS
page.includeCSS.file2 = fileadmin/templates/css/
print.csspage.includeCSS.file2.media = print
2. Innerhalb einer CSS Datei, die wie oben gezeigt, im TypoScript Setup eingebunden wurde:
Alle Style Angaben werden in der für alle Medien definierten CSS-Datei innerhalb der geschweiften Klammern eingefügt. Beispiel für body:
@media print {
...body { font-family: Georgia,'Times New Roman',Times,serif; background-color: transparent; font-size: 12pt; color:#000;
}
...
}Beispiel CSS Datei für Druckausgabe
/* font-family for print view */
* {font-family: Georgia,'Times New Roman',Times,serif; background-color: transparent;}
body {
font-size: 12pt;
color:#000;
line-height: 1.4;
word-spacing:1.1pt;
letter-spacing:0.2pt;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
/* hidden elements for print view */
#header,#rootline,#footer,#printlink,#servicemenu,.nav,#search,#logo {display: none;}
/* set all margins and paddings from design to 0px */
#content {padding: 0; margin: 0;}
/* deactivate float for viewable elements */
#contentWrap,#contentMain,#contentRight,#contentBorder {float:none;}
/* set width for each column to 100% */
#contentMain,#contentRight,#contentBorder {width: 100%;}
/* set lines between the output of each column, improves readability*/
#contentMain,#contentRight,#contentBorder {border-bottom: 3pt solid #ccc; padding-bottom: 30pt; margin-bottom: 30pt;}
/* set absolute positioned elements back to static */
#language {position: static; clear: both;}
/* set font color to black */
a,h1 a,h2 a,h3 a,h4 a,h5 a,h1,h2,h3,h4,h5 {font-weight: bold; color:#000;}
/* set URL after links */
a[href]:after {
background-color: inherit;
color: #666;
content: " (http://domain.tld/" attr(href) ")"; font-style: italic;
}
a.external-link[href]:after, table a.external-link[href]:after,
a.external-link-new-window[href]:after, table a.external-link-new-window[href]:after {
content: " (" attr(href) ")";
}
/* no displayed link for E-Mail etc. */
a.mail[href]:after, table a[href]:after,
.csc-textpic-imagewrap a[href]:after {
content: " ";
}
/* deactivate image position middle and right above or below text */
div.csc-textpic-center div.csc-textpic-imagewrap {margin: 0;}
div.csc-textpic-right div.csc-textpic-imagewrap {width: 100%;}
div.csc-textpic-center {text-align: left;}
/* line break for pre */
pre {white-space: pre-wrap;}
/* tables */
thead {display: table-header-group;}
tr {page-break-inside: avoid;}
Aktualisiert: 21.04.2024