My Webvisions 2015 talk on formatting for print using HTML and CSS, for both websites and non-web content.

1. The Third Screen
Designing for Print with HTML+CSS
#printdev
William Hertling
@hertling
Hewlett-Packard
print-dev.com

2. Agenda
• Background
– My interest
– The Third Screen
• How To
– Website Printing
– Non-web content
• Resources
– HP Link Technology
– Print-Dev Community
• Wrap Up & Questions

3. When I’m Not At HP…
• I write and publish science
fiction novels.
• Part of publishing is
making:
– Ebooks
– Print books

4. eBook workflow
• Setup: 2-3 hours
• Repeating process: 1 minute
Export to ePUB
Manuscript
(in Scrivener)
EPUB

5. Print Process
Export to
Microsoft Doc
Manuscript
(in Scrivener)
.docx
Email to
designer
Imports into
InDesign
Lays out in
InDesign
PDF
Email PDF Proof PDF
Communicate fixes with
“On page 136, paragraph 3,
line 2, word 4:…”
Email
Fixes
Fix in
InDesign
PDF Repeat 5 to
10x

6. What I wanted
A fully-automated manuscript-to-PDF tool that
would let me meet all of my print design needs:
Typography, line-spacing, justification, hyphenation,
alternating margins, header and footers,
widow/orphan control, dropcaps, chapter opening
formatting, page numbering control, special
formatting for different pages, left & right line
alignment, front matter, after matter, etc.

7. THE QUEST FOR THE HOLY GRAIL

8. Enter HTML+CSS
• After weeks of research, settled on HTML+CSS
• The print-focused alternatives (LaTeX, RTF) are
ancient.
• Familiar set of tools.
• One workflow, multiple outputs: both web
and print.

9. That’s how I got into tools for print.
What about The Third Screen?

12. The Third Screen Benefits
• High information density: A well-designed page can
contain a tremendous amount of high-resolution data, both
text and pictures.
• Water and dirt resistant: making it appropriate for
kitchens, construction work, and other places with exposure.
• Shareable: give it to someone.
• Postable: hang it on the wall or in a window.
• Recyclable: When you’re done with it, stick it in recycling.
• Markable: Draw on it, scribble notes, etc.

13. Print Gone Wrong: Wired
18 mostly wasted pages:
7 unusable pages of links to other articles
1 unusable page of advertisements
1 page article, poorly formatted
5 pages of comments on the article
5 unusable pages of links to Wired writers
~1 page article

14. Paper’s Changing Role
2005 2015
Paper is storage.
Printed content exists
standalone. You don’t know
where it came from, and you
might not be able to recreate it.
It becomes essential to hold
onto the paper.
Paper is a transitory way to
consume content that’s best
view on paper.
Content originates on web, and
still exists there. When you’re
done with a recipe, you might
scribble some notes on it, but
you’re equally likely to toss it
and just print it the next time
you need it.

15. Printing Scenarios
Scenario Description Considerations
Web Browser
File -> Print
Use media queries to
detect printed media, and
use CSS rules to format
content appropriately.
Cross-browser rendering
differences. Browsers don’t
support more sophisticated
print needs.
Webpage to
PDF
On the server, turn
webpage into PDF, return
PDF to user.
Consistent, high-fidelity
results across browsers,
including mobile. A little more
complicated to implement.
Non-web
content to
PDF
Generate HTML
representation of content,
turn into PDF.
Compared to InDesign, more
work to initially implement.
But subsequent variations
much easier to create.

16. Agenda
• Background
– My interest
– The Third Screen
• How To
– Website Printing
– Non-web content
• Resources
– HP Link Technology
– Print-Dev Community
• Wrap Up & Questions

17. Media Queries vs PDF
• Example uses HTML to PDF tools
• Most can also be done in-browser with media
queries.
– I’ll try to differentiate which works where.
• At the end, I’ll quickly cover a couple of media
query examples.

18. Tools for HTML -> PDF
• wkhtmltopdf
– Free & open source!
– Pretty good, most of the time.
– Rails GEM makes generating PDF as easy as requesting url.pdf
– It doesn’t support every last print-specific feature.
– Sometimes tricky to get working.
• PrinceXML
– Expensive & closed source!
– But really amazing.
– Robust and comprehensive support for all print styling.
– Stack Overflow: “I wish I had switched to PrinceXML sooner.”
– This is what we use for most of our projects.
• And many others…including newcomers.

19. PrinceXML.com
for more samples

20. PrinceXML.com
for more samples

21. Getting started
All of this available at print-dev.com/tutorials

22. Eliminate unnecessary content
• Turning off just the sidebar and global nav
shrinks the PDF from 18 pages to 5, and from
6MB to 136KB.

23. • Use Inspect Element in Chrome to see what’s
generating what on the page.
• Turning off everything unnecessary gets it down
to 3 pages 0:15

25. Once you get rid of the cruft,
make it awesome*
*I am not a designer.

27. 0:30

29. Formatting the Body
• Short lines are easier to read
– Magazines and newspapers use narrow columns
– Two-column layout
• Justification and hyphenation improve readability
– Justification without hyphenation leads to bad spacing
• Big photos look great online but waste ink
• Printed links are useless
– Options:
• Turn off the link
• Display destination url
• Display shortened destination url
– For today, we’ll just turn off the blue underlined links.

30. All units in pt for points, not pixels.
1 point = 1 / 72nd inch

34. Reduced 18
pages to 1.
Two column
layout.
Appropriate
line spacing.
Fixed
typography
(font face,
justification,
hyphenation)
Undid link
styling.

35. Reduced 18
pages to 1.
Two column
layout.
Appropriate
line spacing.
Fixed
typography
(font face,
justification,
hyphenation)
Undid link
styling.
Made ink-
wise
choices.
Reasonably
attractive
compared to
original.
1 hour
invested.
Styling
works for all
Wired
articles.

36. PDF Generation vs. Media Queries
• Much of what I’ve shown can be achieved in
browser using print media queries.
• But browser support of multiple column layout
and hyphenation varies (read: doesn’t exist).
• PDFs generated on server guarantees consistency
across all browsers, even for mobile.
– Web-assisted mobile print
– When a user wants to print on a mobile device, let the
web server render the PDF, and just use the mobile OS
capabilities to send PDF to printer.

37. Using Media Queries
See Media Queries tutorial at
print-dev.com/tutorials

38. Agenda
• Background
– My interest
– The Third Screen
• How To
– Website Printing
– Non-web content
• Reources
– HP Link Technology
– Print-Dev Community
• Wrap Up & Questions

39. Web vs. Non-web Content
Type Format Needs
Web
Content
Article, Reports, Bills Basic margins, layout,
typography, image size
control.
Non-web
Content
Book, Poster,
Brochure, Product
Catalog, Newsletter,
etc.
Advanced page control,
sophisticated
header/footer, advanced
typography, precision
layout.

41. One Prerequisite
• Get your content into HTML
• How
– export to HTML
– generate HTML based on DB data
– create protected web view
• Out of scope for today!

42. Custom Pages and Margins
Code still at print-dev.com/tutorials. :)

43. Headers & Footers
Sets the page
Uses the page
Margin boxes
Part of CSS3 standard, but
only fully supported by
PrinceXML

45. More info: “css3 paged media”
http://www.w3.org/TR/css3-page/

46. Valid pseudo-selectors: left, right, blank, first

47. Valid values: right, left, always

48. Supported by all
Supported by PrinceXML

50. • Line spacing interval is key to alignment across pages.
• Everything has to be a multiple of your body line-height.
• Error was 12pt margin-top:

51. • Dropcaps: 2,000 year old solution to marking
chapters in hand-written manuscripts

53. Summary of non-web printing
• Content in HTML
• Page size and margins corresponding to expected
media
• CSS3 margin boxes to place header, footer, and other
surrounding content
• Named pages, if necessary, to style sections differently
• Print typography, including serif font and generous line
spacing
• Multiples of line-height to maintain alignment
• Dropcap technique

54. Agenda
• Background
– My interest
– The Third Screen
• How To
– Website Printing
– Non-web content
• Resources
– HP Link Technology
– Print-Dev Community
• Wrap Up & Questions

55. HP Link Technology

56. HP Link Technology
• Insert video here – Julie researching

58. Try this at home!
• HTML+CSS can be an effective way to generate good prints.
• For websites:
– A better experience for users who print.
– The right medium for your content (e.g. recipe on the kitchen
counter.)
– Your content visible in a new inherently postable/shareable
form.
– 1-2 hours to a better printing website.
– PDF creation helps avoid cross-browser and mobile browser
issues.
• For non-web content:
– An easier, fully automated way to generate PDFs.
– Robust support of even complex print needs.
– Relies on technology developers and designers understand well.

59. Questions?

60. Thank You!
William Hertling
Hewlett-Packard
@hertling
print-dev.com