the third screen: using html+css to format for print

The Third ScreenDesigning for Print with HTML+CSS

#printdev

William Hertling@hertling

Hewlett-Packardprint-dev.com

Agenda

• Background– My interest– The Third Screen

• How To– Website Printing– Non-web content

• Resources– HP Link Technology– Print-Dev Community

• Wrap Up & Questions

When I’m Not At HP…

• I write and publish science fiction novels.

• Part of publishing is making:– Ebooks– Print books

eBook workflow

• Setup: 2-3 hours• Repeating process: 1 minute

Export to ePUBManuscript

(in Scrivener) EPUB

Print Process

Export to Microsoft Doc

Manuscript(in Scrivener) .docx

Email to designer

Imports into InDesign

Lays out in InDesign

PDF

Email PDF Proof PDFCommunicate fixes with

“On page 136, paragraph 3, line 2, word 4:…”

Email Fixes

Fix in InDesign

PDF Repeat 5 to 10x

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.

THE QUEST FOR THE HOLY GRAIL

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.

That’s how I got into tools for print.

What about The Third Screen?

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.

Print Gone Wrong: Wired

18 mostly wasted pages:7 unusable pages of links to other articles1 unusable page of advertisements1 page article, poorly formatted5 pages of comments on the article5 unusable pages of links to Wired writers

~1 page article

Paper’s Changing Role

2005 2015Paper 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.

Printing ScenariosScenario Description ConsiderationsWeb 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.

Agenda





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.

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.

PrinceXML.comfor more samples

Getting started

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

Eliminate unnecessary content

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

• 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

Once you get rid of the cruft, make it awesome*

*I am not a designer.

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.

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

Reduced 18 pages to 1.

Two column layout.

Appropriate line spacing.

Fixed typography (font face, justification, hyphenation)

Undid link styling.

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.

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.

Using Media Queries

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

Agenda



• Reources– HP Link Technology– Print-Dev Community


Web vs. Non-web ContentType Format NeedsWeb 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.

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!

Custom Pages and Margins

Code still at print-dev.com/tutorials. :)

Headers & FootersSets the page

Uses the page

Margin boxesPart of CSS3 standard, but

only fully supported by PrinceXML

More info: “css3 paged media”

http://www.w3.org/TR/css3-page/

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

Valid values: right, left, always

Supported by all

Supported by PrinceXML

• 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:

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

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

Agenda





HP Link Technology

HP Link Technology

• Insert video here – Julie researching

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.

Questions?

Thank You!

William HertlingHewlett-Packard

@hertlingprint-dev.com