Create CSS for print edition

General

There are various ways to print a page of a website. One possibility is to use the print command offered by the browser. Another is to set up a link (text or icon) on the web page. If a print CSS file is available, an extra formatted page can be output for printing.

Printing without print CSS:

  • The entire website is printed including unnecessary information, e.g. advertising, navigation.
  • Background images and colors are only printed if the user has made the necessary settings in their print settings. It is therefore possible that a white text on a colored background on the website is not visible in the print output.
  • The web page width does not correspond to the print width.

Printing with print CSS:

  • controllable optical output for printing
  • Unnecessary elements can be removed, e.g. menu bars, advertising
  • Font that is easier to read for print output (serif)
  • URLs can also be printed for links
  • Various poorly legible font colors can be adjusted

CSS files for different media are integrated in the Typoscript in the setup as follows:

1. CSS files separated by media type 

## 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.css 
page.includeCSS.file2.media = print

2. within a CSS file that was integrated in the TypoScript setup as shown above:

All style information is inserted in the CSS file defined for all media within the curly brackets. Example for body: 

@media print {
...body { font-family: Georgia,'Times New Roman',Times,serif; background-color: transparent; font-size: 12pt; color:#000;
 } 
... 
}

Example CSS file for print output 

/* 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;}

This page contains automatically translated content.

Updated: 15.08.2024