Printing

Adding the print styles

Hexagon is built with a print stylesheet included alongside the other hexagon files called hexagon.print.css. It can be included on any page using the following:

<link rel="stylesheet" href="path_to_hexagon/hexagon.print.css" media="print">

The styles applied are commonly used to help resolve potential layout issues and try to improve the final result.

Notice

Dark themes should not be used where printing is required. The overhead for re-writing styles so they display nicely on a light background causes display issues when printing as file load times are too great.

The Print script helper

In addition to the print styles available, a print script is also available as a helper for displaying content hyperlinks in a reasonable way without detracting too substantially from the page content.

<script src="path_to_hexagon/hexagon.print.js"></script>

This script adds a listener to onbeforeprint and onafterprint that iterates over all the link elements on the page and creates a 'citation' for each link, as well as an element at the end of the document listing all the links.

This is an optional feature and is intended as a helper for link referencing.

An example of what a link looks like when printing can be seen here:

Regular link

Link to hexagonjs.io

HTML

<a class="hx-btn" href="https://hexagonks.io">Link to hexagonjs.io</a>

Result when printing with print script on the page

Link to hexagonjs.io^[1]

HTML

<a class="hx-btn" href="https://hexagonjs.io/">Link to hexagonjs.io<sup class="hx-footnote-ref hx-print-only">[1]</sup></a>

Footer

For the above link, the following footer would also be produced and appended to the page:

Links

https://hexagonjs.io/

HTML

<div class="hx-footnote-links hx-print-only">
  <hr>
  <h2>Links</h2>
  <ol>
    <li>https://hexagonjs.io/</li>
  </ol>
</div>