Styles for best-possible print results in online documentation

When users print out a topic of an online documentation, this topic is particularly important to them. Therefore, the printout should be designed professionally and contain exactly what is important when reading on paper.

With just a few lines of additional CSS and HTML code, you can significantly contribe to a positive user experience here.

Example 1: Hide elements that are irrelevant for printing

Take a look at the print preview of the page that you are currently reading. There you will not see the header of the website, and you will not see the footer and the navigation bar either.

Implementation for example 1

In the CSS file used by your online documentation or in the head section of your page template, for the print medium, set the display property to the value none for all elements to be hidden in print.

Note: In the output of most authoring tools, these properties will already be set accordingly by default. However, if you have made changes to the layout or added elements to the page template yourself, you may have to disable visibility in print for these elements as well.

@media print {
  header {display: none;}
  nav {display: none;}
  footer {display: none;}
  .my-custom-object-with-this-class {display: none;}
  #my-custom-object-with-this-id {display: none;}   
}

Example 2: Printing the target address along with hyperlinks

Hyperlinks cannot be clicked on paper. Users can only visit a page mentioned on paper if they know its address (URL).

You can achieve this with well-designed CSS specification for links: Where there is an active, clickable link on the online page, on the printout in addition the URL contained in the link appears after link anchor text.

Take a look at the print preview of this page and check out the following reference:

indoition information development

Implementation for example 2

Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

@media print {
 a:link {color: #000 !important; text-decoration: none; font-style: italic;}
 a:visited {color: #000 !important; text-decoration: none; font-style: italic;}
 a[href]::after {
   content: " ["attr(href)"]";
   color: #000;
   background-color: inherit;
   font-style: italic;
   size: 80%;
 }  
}

Example 3: Header and footer

If you want to produce a truly professional printout, there are even ways to set up a repeating header and footer that appears on each page of the printout.

Try it out. Print this page or look at the print preview!

Implementation for example 3

The solution is somewhat convoluted, but it only needs to be set up once on the page template and then works automatically everywhere.

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

.print-page-header, .print-page-header-space {
  height: 10mm;
  margin-bottom: 7.5mm;
  display: none;  
}
.print-page-footer, .print-page-footer-space {
  height: 10mm;
  margin-top: 5mm;
  display: none;
}
.print-page-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid black;
  display: none;
}
.print-page-header {
  position: fixed;
  top: 0mm;
  width: 100%;
  border-bottom: 1px solid black;
  display: none;
}
@page {
  margin-left: 25mm;
  margin-top: 15mm;  
  margin-right: 20mm;  
  margin-bottom: 15mm;  
}
@media print {
 .print-page-footer {
   display: block;
 }
 .print-page-header {
   display: block;
 }
 .print-page-header, .print-page-header-space {
  display: block;  
 }
 .print-page-footer, .print-page-footer-space {
  display: block;
 }
 thead {display: table-header-group;} 
 tfoot {display: table-footer-group;}
 body {margin: 0;}
}

Step 2: At the beginning of your page template, put the content of the header to be printed between the following two HTML snippets:

<div class="print-page-header">

</div>

Step 3: Immediately below, place the content of the footer to be printed between the following two HTML snippets:

<div class="print-page-footer">

</div>

Step 4: Below that, place the following two HTML snippets to enclose the regular topic content that is to be displayed also on screen:

<table>
 <thead>
  <tr>
   <td>
    <div class="print-page-header-space"></div>
   </td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>

   </td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>
    <div class="print-page-footer-space"></div>
   </td>
  </tr>
 </tfoot>
 </table>

___
 
Did you benefit from this information?

In return, please link to this page, mention the page on social media, or buy one of my books.

Thank you!

Want more? See also more code snippets for enhancing online documentation, as well as my other technical documentation work aids.