HTML5 exported report
an alternative to PDFs
Craig Buckler, @craigbuckler, TechExeter 2018
THIS DOCUMENT IS NOT DISPLAYING CORRECTLY.
PLEASE DOWNLOAD THE FILE THEN OPEN IT IN A WEB BROWSER.
Why do we use PDFs?
PDFs may be suited to printable media but should we always choose it when outputting reports from web-based applications? PDF problems:
- When was the last time you printed a PDF? We mostly view them on-screen.
- PDF readers are not necessarily available on all platforms, especially mobile.
- PDFs are not responsive. Viewing a PDF on a smartphone is a painful pinch and zoom experience.
- PDF output control can be difficult especially from web systems.
- Resulting PDF file sizes can be enormous.
- PDF text is not always selectable or copyable.
- Why are we converting one document format to another? Do we use PDF because it's the best option or because it's expected?
TechExeter 2017
Example charts and data
TechExeter conference 2017: funding sources
Note that only seven people paid full price for their ticket!
TechExeter conference 2017: gender
Conclusion: TechExeter is overrun with middle-aged men!
Darker bitmap images
Images with a dark background can be inverted within CSS @media print styles to make them clearer and use less ink.
Is HTML5 a viable alternative to PDF?
Yes … if you're a little careful!
HTML5 recommendations
HTML5 is ideal if you can output a document where:
- all assets such as stylesheets, images and favicons are inlined
- system fonts are preferred
- SVG images are used where possible
- JavaScript is avoided
- CSS is used to make it look documenty and printer-friendly
You can use any server-side or client-side system to create and edit an initial document. You can even permit editing before the document is saved! (Click this and change the text).
A download button exports the final rendered HTML5 document.
That's all folks!
Craig Buckler, @craigbuckler, TechExeter 2018