Several Tips for Print Stylesheets
In Responsive layout we’ve covered the basics of how to set up your HTML and CSS so that your site can respond differently to various media, including print. This page lists some extra tips on how to deal with print stylesheets.
Setting up
We’ve already seen that in an HTML page we can link to a stylesheet:
<link rel="stylesheet" type="text/css" href="style.css" />
Note, that unlike many websites and tutorials, we don’t add media="screen" in the link. This way the stylesheet will be applied for both print and screen.
It is inside the stylesheet we can have separate instructions for screen and for print:
@media print {
/* CSS declarations here*/
}
This can be a very useful approach, as you can keep parts of the CSS shared for both media.
If you want two separate stylesheets, that’s also possible. In your HTML you can link to two different files, one for print and one for screen:
<link rel="stylesheet" type="text/css" media="print" href="print.css" /> <link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
Units
Some of the units in CSS are based on pixel units like px. You can also use absolute units like pt, mm and cm. In theory, it is not recommended to use px in print CSS because there are no pixels on a screen, but CSS standardises a conversion where one pixel equals 1/96th of an inch. So it is also fine to use px units for print.
@page declaration
To control the way in which your page is printed, the @page declaration offers some control. You can determine things such as the margin.
An example declaration is
@page {
margin-top: 7cm;
margin-bottom: 2cm;
margin-left: 2cm;
margin-right: 2cm;
}
There several modifiers you can use to have different margins for different pages.
@page {
margin-top: 7cm;
margin-bottom: 2cm;
}
@page :left {
margin-left: 3cm;
margin-right: 2cm;
}
@page :right {
margin-left: 3cm;
margin-right: 2cm;
}
Both Firefox and Chrome support this syntax. In my experience Chrome has the best support. Safari doesn’t support @page at all.
Page numbers and running headers
In printed documents, pages have recurrent elements that help to navigate through the publication. Running headers, page numbers etc.
There are a number of CSS specifications that implements standards for these elements. These rules allow to target the margins of the printed page, and then fill these margins with generated content (for example, chapter titles) or counters (for page numbers).
Sadly, no browser really supports these specifications. You need to use a separate software like Prince XML. A tutorial that uses advanced CSS properties supported by Prince is available at https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/. The problem with Prince, though, is that is a commercial software, and also that it doesn’t really fit our setup: what’s really fun with printing from the browser is that potentially anybody can do it from home.
Another option is html2print by my colleagues from OSP. They provide HTML, CSS and JS so you can create running headers and page numbers. The browser provides a print preview. The downside to this solution is that it doesn’t take into account the hybrid screen/print approach either. This is a tool designed to create print output from the browser, and not a tool for hybrid publications.
Page breaks
When printed, your site will probably take up multiple pages. When it lays out the web page, the browser has to decide when to break the flow before starting again on the next page. You can’t fine-tune this process as easily as in a traditional page lay-out program, but you can adjust it with CSS instructions.
Two important css properties are page-break-after and page-break-before. You can use these to say that after or before a certain element, there will be a page break. For example, if each chapter is inside a div with a class of ‘chapter’, we might want to begin on a new page for each chapter:
div.chapter {
page-break-before: always;
}
Another property is page-break-inside. You can use this to stop page-breaks to occur altogether. You might want to use this on your paragraphs. Why? Because you don’t have the detailed control of a layout program made for fixed paper sizes, it might happen that you get typographically awkward page breaks. You might have paragraphs that start on the last line of the page for example.
By avoiding page-breaks altogether, you avoid awkward page-breaks. The downside is that the bottom margin of your document can become quite ragged as entire paragraphs are pushed to the next page.
p {
page-break-inside: avoid;
}
And more
Feel free to share more tips about printing with CSS!