PrintReady is optional not manadated. Is a meant to help government agencies implement consistent, accessible print formatting for their websites. By using PrintReady, agencies can ensure their printed web content meets the relevant NZ Government Web Standards while also providing a consistent experience across government websites.
The PrintReady toolkit simplifies the implementation of print stylesheets that follow good practices. It provides developers with the necessary files and guidance to create print-friendly pages that align with government standards and deliver an accessible experience for all users.
This guide provides step-by-step instructions for implementing PrintReady in your website. The tool is open source and welcomes contributions from the All-of-Government (AoG) community via GitHub.
PrintReady's print stylesheet approach focuses on leveraging the browser's default stylesheet, which is already effective for printed content, enhancing it only when necessary.
It preserves important context by displaying URLs and full titles when printed, while managing page layouts to prevent awkward breaks and maintain professional formatting.
This implementation embraces the principle of separation of concerns by applying the print stylesheets exclusively for printing and the screen stylesheet/s only for screen rendering.
It is designed to be flexible, separating core styles from site-specific needs and allowing easy customization across different website structures.
- Seperate print and screen styles, don't override screen styles with print styles.
- Print it in black and white
- Only print what is critical to understanding the content or context of the page.
- Do not print images unless they are critical to understanding the page content.
- Clone the repo using Git or download it as a ZIP file.
- Copy the JavaScript (.js) and CSS (.css) files from the
/srcfolder into your website's directory. - Include the Files in Your Webpages;
- Link CSS files only with
media="print"to ensure styles apply only when printing - Link JavaScript files with
type="module"to enable ES6 module functionality
- Link CSS files only with
- Edit printready-site.example.css and printready-site.example.js to match your website's structure (remove the .example extension after modifying the files).
This repository is intended to be downloaded or cloned from GitHub, with the files0 described below then copied and pasted into your web project. The instructions below assume this method of integration.
Alternatively, you could install the package via NPM and import the JavaScript functions in a build step (e.g. using a compiler like Webpack).
This section explains how to integrate PrintReady into your website to optimize page layouts and styling specifically for print output.
Make sure all CSS files intended for on-screen display are served with the media="screen" attribute.
<link rel="stylesheet" href="screen-styles.css" media="screen">The 'base' files in the /src folder serve as the foundation for creating print-ready pages. The printready-base.css file includes well-commented styles designed to ensure reliable printing while following best practices. The printready-base.js file provides modular functions that can be imported and used to generate print-specific content for your web pages.
- Add the following <link> tag in the <head> of your HTML file to apply print-specific styles when printing the page:
<link rel="stylesheet" href="/path/to/printready-base.css" media="print">- Explanation: The
media="print"attribute ensures this stylesheet is only applied when the page is printed.
-
To load the PrintReady base JavaScript file, add this <script> tag to the <head> or before the closing </body> tag:
<script src="/path/to/printready-base.js" type="module"></script>
-
Explanation: The
type="module"attribute allows you to export the PrintReady ES6 modules without blocking the page rendering process while they are being fetched and executed.
The PrintReady 'site' files include a print-specific stylesheet and a JavaScript file. Use the JavaScript file to implement the 'base' PrintReady functions. Use the CSS file to help style printed content including that generated by the Javascript functions.
Copy the example CSS and JavaScript files (printready-site.example.css and printready-site.example.js) from the /src folder into your own project. Then, rename these files by removing the ".example" extension.
-
The
printready-site.cssfile contains styles for components created by the JavaScript functionality and common site elements, such as breadcrumbs. Adjust the selectors in this stylesheet to align with your website's markup.<link rel="stylesheet" href="/path/to/printready-site.css" media="print">
-
Use
printready-site.jsto implement the JavaScript modules fromprintready-base.js. Thetype="module"attribute allows you to export the PrintReady ES6 modules without blocking the page rendering process while they are being fetched and executed.<script src="/path/to/printready-site.js" type="module"></script>
This is optional. The initializePrintButton function enables a print button on the page, making it visible and functional to trigger the print dialog.
-
Place a hidden print button in your HTML or reference an existing one in the next step.
<button id="print-page-button" hidden>Print Page</button>
-
Call
initializePrintButtonwith the button's CSS selector:import { initializePrintButton } from 'path/to/printready-base.js'; document.addEventListener('DOMContentLoaded', () => { const printButtonSelector = "#print-page-button"; initializePrintButton(printButtonSelector); });
-
Explanation: The function checks if the button exists, adds a
clickevent to trigger printing, and makes it visible. -
Implementation Tips: If using an existing button ensure it has the
hiddenattribute and update theprintButtonSelectorto target it.
The generatePrintablePageInformation function generates page information, such as the site name, title, print date, and URL, for the print view.
-
Add a container in your HTML or inject it via JavaScript:
import { generatePrintablePageInformation } from 'path/to/printready-base.js'; document.addEventListener('DOMContentLoaded', () => { const siteName = "Your Site Name"; // Replace with your site’s name document.body.insertAdjacentHTML( 'afterbegin', `<div class="printready-page-info js-print-only"> ${generatePrintablePageInformation(siteName)} </div>` ); });
-
Explanation: The
generatePrintablePageInformationfunction creates an HTML snippet with the site name and page title. -
Implementation Tips:
-
The generated HTML strings for page information and links are highly customizable—feel free to modify them to fit your needs or apply additional styles using the
js-print-onlyclass for print-specific styling. -
By default the
'h1'elements content is used for the page title but you can provide a custom selector as the second optional argument to override this.generatePrintablePageInformation(siteName, 'custom-selector')
<div class="printready-page-info js-print-only">
<p><b>Your Site Name</b></p>
<p><b>Page title:</b> Example Title</p>
<p><b>Printed:</b> 11 November 2024</p>
<p><b>Printed from:</b> https://example.com/page</p>
</div>- Add the following code to generate and insert the list of links:
import { generatePrintableLinkList } from 'path/to/printready-base.js';
document.addEventListener('DOMContentLoaded', () => {
const linkList = generatePrintableLinkList(
'.page-content a', // Example selector for links to include
'.sidenav a', // Example selector for links to exclude
true // Set to 'true' to only include external links
);
document.body.insertAdjacentHTML(
'beforeend',
`<div id="js-printready-link-urls" class="js-print-only">
<h2>Index of Page Links</h2>
<ol class="js-printready-links-list">${linkList}</ol>
</div>`
);
});-
Explanation: This function filters links based on provided selectors and outputs them in a format suitable for printing. It includes email, phone, and external links by default.
-
Implementation Tips:
- Make sure the selectors match your DOM structure, and provide a valid exclude selector to prevent unwanted links from being printed.
- Adjust the include/exclude selectors as needed to account for different page types. For instance, the homepage may have a different structure compared to standard pages. See the implimentation of
generatePrintableLinkListinprintready-site.example.jswhich uses aswitchstatement to handle these variations.
<div id="js-printready-link-urls" class="js-print-only">
<h2>Index of Page Links</h2>
<ol class="js-printready-links-list">
<li>https://external-link.com</li>
<li>Email: [email protected]</li>
<li>Phone number: +123456789</li>
</ol>
</div>The openDetailsElementsForPrinting function opens all <details> elements within the specified selector when printing and closes them afterward.
-
Use the following code to implement the function with the <detail> accordion's selector:
import { openDetailsElementsForPrinting } from 'path/to/printready-base.js'; document.addEventListener('DOMContentLoaded', () => { const detailsSelector = 'details.example-selector'; openDetailsElementsForPrinting(detailsSelector); });
<details class="example-selector">
<summary>Click to view more</summary>
<p>Details content here will be visible in print.</p>
</details>Packages that enhance the development experience but aren't required to impliment the main functionality.
The repository includes Live Server for quick testing and viewing changes. It is not required to use PrintReady on your site. To use it, run the following command in your project directory:
npm run startThen in the browser navigate to the example folder.
Playwright tests are included for further development and preventing regressions in the print-ready JavaScript functionality. It is not required to use PrintReady on your site.