PrintReady is an optional tool for government agencies, it is not a mandatory requirement.
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 web pages that align with New Zealand Government Web Standards and deliver an accessible, consistent 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.
These pages and their assets are in the /example directory. Only the print view changes the screen view is identical.
The following government sites use PrintReady in production:
These are good references if you want to see how PrintReady performs in real-world scenarios.
Toggle between Print and Screen Views either by opening the print preview dialog (press Ctrl + P or Command + P on macOS) or by using your browser's Developer Tools and toggling between Print and Screen rendering.
The PrintReady repository should be downloaded or cloned from GitHub, with the files described below then copied and pasted into your web project. The instructions assume this method of integration.
PrintReady consists of Cascading Style Sheet (CSS) and JavaScript (JS) files.
In the src folder there are base files:
- printready-base.css
- printready-base.js
and site files:
- printready-site.css
- printready-site.js
The base files should not be changed. Parts of the site files should be changed to integrate with your site structure.
printready-base.css is designed to ensure reliable printing while following best practices.
printready-base.js provides modular functions that can be imported and used to generate print-specific content for your web pages.
Use the 'site' files to customise CSS styling your site's structure and include the JavaScript functionality you require.
The PrintReady CSS files need to be served with the media="print" attribute.
<link rel="stylesheet" href="/path/to/printready-site.css" media="print">Note: You can combine the 2 PrintReady CSS files into a single file in a build step.
All CSS files intended for on-screen display need to be served with the media="screen" attribute.
<link rel="stylesheet" href="screen-styles.css" media="screen">The printready-site.css file should be edited to match your website's structure.
View the CSS Integration Guide
Link JavaScript files with type="module" to enable ES6 module functionality. Serve the JavaScript files separately.
<script src="/path/to/printready-base.js" type="module"></script>
<script src="/path/to/printready-site.js" type="module"></script>note: Scripts with type="module" also behave as if they have the defer attribute, so they won't block page rendering while being fetched and are executed only after the HTML is fully parsed.
The printready-site.js file should be edited to integrate with your website structure.
View the JavaScript Integration Guide
- Our approach
- CSS Integration Guide
- JavaScript Integration Guide
- Dependencies (if you want to view, edit or test PrintReady locally.)
- Meeting the NZ Government Web Standards
- Contributing
- Changelog
- License