[Tip] Preview settings for nice(r) print-outs

Tips & Tricks
1

If one wants to print a HTML document, it might be helpful to provide different CSS settings in the template used for previewing.

Useful settings for the @media print block are (an example follows at the end)

  • page-break-after: avoid for most of the headings (h1through h5). In my opinion, page-break-before: always would be clearer, but Firefox does not support this.
  • orphans: and widows: with numerical values given the number of lines to keep together at the bottom and top of a page. The default is 2, but you might want to increase this to get more visually pleasing results. Again, Firefox does not support those attributes.
  • Overall, you might want to consider setting a smaller font-size on the body element and resetting the margins to 0 for it.
  • In theory, CSS provides a @page query permitting to define the size of the page and margins for it. However, no current browser supports this.

Why should browser support even be important for printing? Simply because the print process is initiated and driven by the browser. So a HTML document with the exact same CSS settings looks different if it’s printed from Safari (or Drafts’ preview window) and Firefox.

/* @page not working in most browsers
@page {
  size: a4;
}
*/
@media print {
  body {                /* smaller font, no margins */
    font-size: 90%;
    margin-left: 0
    margin-right: 0;
  }
  h1, h2, h3, h4, h5 {
    page-break-after: avoid;
    /* better:
    page-break-before: always;
    but this does not work in Firefox
    */
  }
  p, ul, ol, blockqote {
    orphans: 4; /* not working in Firefox */
    widows: 4; /* not working in Firefox */
  }
  pre code { /* reduce font-size for code blocks */
    font-size: 90%;
  } 
 } /* @print */
2 Likes