1. Making Your
Site Printable
Presented by Adrian Roselli
September 14, 2013, WordCamp Buffalo
#wcbuf

2. Making Your
Site Printable
Presented by Adrian Roselli
September 14, 2013, WordCamp Buffalo
#wcbuf
Photo (and notes) of Lafayette Square (1905) available at Shorpy: http://www.shorpy.com/node/12193

3. About Adrian Roselli
• Co-written four books.
• Technical editor
for two books.
• Written over fifty
articles, most recently
for .net Magazine and
Web Standards Sherpa.
#wcbuf

4. About Adrian Roselli
• Member of W3C HTML Working Group, W3C
Accessibility Task Force, five W3C Community
Groups.
• Building for the web since 1994.
• Founder, owner at Algonquin Studios
(AlgonquinStudios.com).
• Learn more at AdrianRoselli.com.
• Avoid on Twitter @aardrian.
#wcbuf

5. What We’ll Cover
#wcbuf

6. What We’ll Cover
• Background
• Techniques
• Measuring
• Future
• Questions (ongoing!)
#wcbuf

7. Background
#wcbuf

8. Responsive Web Design (RWD)
• Responsive design (or
adaptive design) is about
supporting any device:
• Desktop computer
• Smartphone
• Tablet
• Television
• Printer?
#wcbufPhoto of printed page from http://elliotjaystocks.com/blog/has-adaptive-design-failed-of-course-it-bloody-hasnt/

9. PrintShame.com
• As developers tout their responsive designs,
they often forget the printed page.
• Support for print styles goes back more than a
decade, before RWD.
• Used MediaQueri.es as initial seed, then
picked up from articles, awards, etc.
• Hoped shaming might improve state of print
styles.
• http://PrintShame.com
#wcbuf

10. PrintShame.com
#wcbufhttp://www.printshame.com/2013/09/generateconfcom.html

11. PrintShame.com
#wcbufSource page: http://www.generateconf.com/schedule/

12. Maturing (a bit)
• Decided the best approach would be teaching.
• Used lessons, common issues from
PrintShame to develop tutorial(s).
• Pitched this very talk.
#wcbuf

13. Print Services
• Add a third-party “print” button to your site.
• You have no control over layout.
• You have no control over ads.
• You have no control.
#wcbuf

14. Print Services
#wcbufhttp://rosel.li/040612 “More Evidence of the Need for Print Styles”

15. Techniques
#wcbuf

16. Screen versus Print
Screen
• Continuous
• Visual, audible, tactile
• Vector and bitmap
• Interactive
• Online
Print
• Paged
• Visual
• Bitmap
• Static
• Offline
#wcbuf

17. Planning
• Is my site built mobile-first?
• Things I want the user to see.
• Things the user may not want to see.
• Things that probably won’t print anyway.
#wcbuf

18. Planning
• Is my site built mobile-first?
• Sometimes your mobile-first styles will get you
nearly all the way there.
• If you built desktop-first, you may be able to re-
use your smaller viewport styles.
#wcbuf

19. Planning
• Things I want the user to see:
• Branding
• Cross-branding
• Page address
• Copyright
• Path to page (breadcrumb)
• Link addresses (?)
#wcbuf

20. Planning
• Things the user may not want to see:
• Primary navigation
• Secondary navigation
• Site search
• Social media icons
• Ad banners
• Fat footers
#wcbuf

21. Planning
• Things that probably won’t print anyway:
• Colors
• Backgrounds (images and colors)
• Bits of timed / interactive elements
• White elements (logos, text, effects)
#wcbuf

22. Example Site
#wcbufhttp://AdrianRoselli.com/Bio

23. Example Site
#wcbufhttp://AdrianRoselli.com/Bio

24. Example Site
#wcbufhttp://AdrianRoselli.com/Bio

25. Example Site
#wcbufhttp://algonquinstudios.com/Engage/Careers/DeveloperI

26. Example Site
#wcbufhttp://algonquinstudios.com/Engage/Careers/DeveloperI

27. Example Site
#wcbufhttp://algonquinstudios.com/Engage/Careers/DeveloperI

28. Example Site
#wcbufhttp://buffalosoccerclub.org/about

29. Example Site
#wcbufhttp://buffalosoccerclub.org/about

30. Example Site
#wcbufhttp://buffalosoccerclub.org/about

31. Embedding Print Styles
Make a home for your print styles:
@media print {
/* insert your style declarations here */
}
Or:
<link rel="stylesheet" type="text/css"
href="/css/print.css" media="print">
#wcbuf

32. Page Rules
The @page rule allows you to specify page
margins (CSS 2.1), size and orientation (CSS3).
@page {
margin: 20cm;
size: A4 landscape;
}
I recommend you do not use it and defer to user
preferences.
#wcbuf

33. Banner
Change the banner text to print units, adjust the
color so the printer doesn’t replace it with gray.
#Banner p#Title {
font-size: 24pt;
}
#Banner p#Title a, #Banner p#Title a:link, #Banner p#Title
a:visited {
color: #000;
}
#wcbuf

34. Navigation
Get rid of the primary, secondary, tertiary
navigation, remove social media links, and other
bits that won’t make sense when printed.
#Nav, #FlyOutNav, #SubNav, .NoPrint, p.CodeAlert,
#SMLinks, {
display: none;
}
#wcbuf

35. Breadcrumb
Keep the breadcrumb as a wayfinding method, but
reduce its size and remove any links.
#Bread a:link, #Bread a:visited {
text-decoration: underline;
color: #000;
}
#Bread {
color: #000;
font-size: 6pt;
}
#Bread > a:after {
content: "";
}
#wcbuf

36. Footer
Shrink the text, remove the search box, handle
my cross-branding.
#Footer {
font-size: 6pt;
color: #000;
}
#SearchForm {
display: none;
}
#Footer img {
float: right;
}
#wcbuf

37. In-Page Links
Select links in content container(s) and then
display the href value as text after the link.
#Content a[href]:after {
content: " [" attr(href) "] ";
word-wrap: break-word;
}
#Content a[href^="#"]:after, #Content
a[href^="tel"]:after, #Content a[href^="mailto"]:after,
#Content a[href^="javascript"]:after {
content: "";
}
Yes, you can do the inverse selector, but then I don’t get to show the variations!
#wcbuf

38. General Styles
• Clear whitespace around the content.
• User’s print settings will handle page margins.
• Let’s user get as much content on a page as
possible (yay for trees!)
• You shouldn’t need to worry about portrait vs.
landscape, A4 vs. 8.5×11, etc.
#wcbuf

39. General Styles
• Reset type sizes to points, set text to black.
• Points (mostly) provide more consistent text size
across browsers and devices than pixels.
• Light grey text doesn’t trigger browser overrides
to convert text to black.
• Not all users have color printers. Set red to black
so it doesn’t come out as a medium gray (perhaps
with other styles as appropriate).
#wcbuf

40. General Styles
body {
background: #fff;
color: #000;
font-size: 8pt;
line-height: 150%;
margin: 0;
}
hr {
color: #ccc;
background-color: #ccc;
}
h1, h2, h3, h4, h5, h6, code, pre {
color: #000;
text-transform: none;
page-break-after: avoid;
}
#wcbuf

41. General Styles
h1 {
font-size: 11pt;
margin-top: 1em;
}
h2 {
font-size: 10pt;
}
h3 {
font-size: 9pt;
}
h4, h5, h6 {
font-size: 8pt;
}
img {
max-width: 100%;
}
#wcbuf

42. General Styles
code, pre {
font-size: 8pt;
background-color: transparent;
}
blockquote {
background-image: none;
}
a:link, a:visited {
text-decoration: underline;
color: #000;
}
abbr:after, acronym:after {
content: " (" attr(title) ") ";
}
ol, ul, img, table {
page-break-inside: avoid;
}
#wcbuf

43. General Styles
• Write values of title (or alt, or data-*, etc.)
attributes into the page.
• Think @cite on blockquote, or @title on abbr.
• You can do this with most attributes on most
elements, although it might not be a good fit.
• Perhaps a @data-shortURL attribute to display a
minified link address to make it easier for users to
type URLs.
• A novel way to promote @longdesc.
#wcbuf

44. Page Breaks
The CSS properties page-break-before, page-
break-after and page-break-inside have the
following values:
• auto: default value, no specified behavior.
• avoid: tries to avoid a page-break.
• always: invokes a page-break (not for page-break-
inside).
• left | right: Tries to place element on the start of a page
on the left or right, for when you are printing bound material
(books, magazines, etc.) (not for page-break-inside).
#wcbuf

45. Widows and Orphans
Use these to control how many lines must be at
the end of a page (orphans) or how many at the
start of a page (widows).
p {
orphans: 3; /* 3 consecutive lines at end of page */
widows: 2; /* 2 lines at start of new page */
}
Because widows and orphans are confusing: http://en.wikipedia.org/wiki/Widows_and_orphans
#wcbuf

46. Invert Logos
For those rare cases with a white logo where
you can’t load an alternate image (Chrome &
Safari only):
Img#Logo {
-webkit-filter: invert(100%);
filter: invert(100%);
}
If you can load an alternate, a quick tutorial:
http://www.456bereastreet.com/archive/201305/replacing_images_when_printing/
#wcbuf

47. Further Consideration
• Hide videos.
• Hide controls for embedded audio.
• Hide Flash movies.
• Hide canvas elements (assuming interactive).
• Don’t scale images to 100% width.
• Determine if ads should be printed or not.
#wcbuf

48. QR Codes
• They’re a personal (lifestyle) choice.
• Allows more savvy users to get directly to the
source of the printed page.
• Easy to implement without burdening mobile
users, users who do not print.
#wcbuf

49. Call the QR Code
<html>
<head>
<style>
@media print {
header::before { content:
url(http://chart.apis.google.com/chart?chs=120x120&cht=qr&
chl=http%3A%2F%2Falgonquinstudios.com/Engage/Careers); }
}
</style>
</head>
#wcbuf

50. QR Code in Use
#wcbuf

51. Outliers
• Sadly, not every device
behaves.
• Samsung Galaxy S4,
default Android browser.
#wcbuf

52. Outliers
#wcbuf

53. TEST!
• Print to PDF for your first (most) rounds.
• Use every browser you can.
• At very least, use every browser that visits
your site.
• Change paper size (8.5″ × 11″, A4, etc.).
• Change paper orientation.
• Scale the content in the print dialog.
#wcbuf

54. Measuring
#wcbuf

55. Google Analytics
• Call the GA tracking image, but only when the
print styles get used.
• Attach a custom event to that image.
• View custom events in Google Analytics.
• Identify which pages get printed.
• Make sure that at least those pages print well.
• Compare to your carousel.
#wcbufFull tutorial: http://rosel.li/032613

56. Query String Parameters
#wcbuf
Variable Description
utmac Account String. Appears on all requests. This is your UA-#######-# ID.
utmwv
Tracking code version. While my standard GA requests use 5.4.0, I opted to use 4.3 for reasons I no
longer recall.
utmn
Unique ID generated for each GIF request to prevent caching of the GIF image. I just concatenate the
current year, month, day, hour, minute and second.
utmhn Host Name of your site, which is a URL-encoded string.
utmr Referral, complete URL. In this case I just insert a dash so it is not blank.
utmp Page request of the current page.
utmt
Indicates the type of request, which is one of: event, transaction, item, or a custom variable. If
you leave it blank, it defaults to page. Because I am tracking events, I use event.
utme Extensible parameter. This is where you write your event. I use 5(Print*{page address}).
utmcc
Cookie values. This request parameter sends all the cookies requested from the page. It can get
pretty long. It must be URL encoded. It must include __utma and __utmz values.

57. Sample Query String
http://www.google-analytics.com/__utm.gif
?utmac=UA-1464893-3
&utmwv=4.3
&utmn=2013326124551
&utmhn=algonquinstudios.com
&utmr=-
&utmp=/Engage/Careers
&utmt=event
&utme=5%28Print*/Engage/Careers%29
&utmcc=__utma%3D267504222.1477743002.1364314722.1364314722
.1364314722.1%3B%2B__utmb%3D267504222.17.7.1364314901604%3
B%2B__utmz%3D267504222.1364314722.1.1.utmcsr%3D%28direct%2
9|utmccn%3D%28direct%29|utmcmd%3D%28none%29
#wcbuf

58. Call the Image
<html>
<head>
<style>
@media print {
header::after { content: url(http://www.google-
analytics.com/__utm.gif?utmac=UA-1464893-
3&utmwv=4.3&utmn=2013326124551&utmhn=algonquinstudios.com&
utmr=&utmp=/Engage/Careers&utmt=event&utme=5%28Print*/Enga
ge/Careers%29&utmcc=__utma%3D267504222.1477743002.13643147
22.1364314722.1364314722.1%3B%2B__utmb%3D267504222.17.7.13
64314901604%3B%2B__utmz%3D267504222.1364314722.1.1.utmcsr%
3D%28direct%29|utmccn%3D%28direct%29|utmcmd%3D%28none%29);
}
}
</style>
</head>
#wcbuf

59. Check the Data
#wcbuf

60. Check the Data
#wcbuf

61. Future
#wcbuf

62. Here or on Its Way
• Browser support for existing features.
• Electronic Books.
• HTML5 as a publishing platform.
• CSS3, CSS4.
#wcbuf

63. Left, Right, First Pages
• Use @page rule with pseudo classes to specify
right, left, first:
• :right will affect the page on the right.
• :left will affect the page on the left.
• :first will affect the first page.
• :blank will affect the blank pages resulting from forced break.
• An @page rule with no pseudo classes applies
to all pages.
#wcbuf

64. Bleed and Crops
• The bleed property relies on the crops
property having a value.
• Bleed specifies how much the page can
extend outside the page box:
• <length> units, referring to width of page box.
• Crop draws marks outside page box:
• crop: shows where a page should be cut.
• cross: used to align sheets.
#wcbuf

65. Boxes across Pages
• The box-decoration-break specifies how a
box’s background, margin and border behave
when broken across pages:
• slice: chops the box in two.
• clone: duplicates the styles
onto each box.
#wcbuf

66. Page Margin Boxes
@page {
@bottom-left {
content: "Copyright me."
}
@bottom-right {
counter-increment: page;
content: "Page " counter(page);
}
}
#wcbuf

67. Wrap-up, Questions
#wcbuf

68. Further Reading
• Make your website printable with CSS:
http://netm.ag/WA93Xg
• Calling QR in Print CSS Only When Needed:
http://rosel.li/030813
• Tracking When Users Print Pages:
http://rosel.li/032613
• Tips And Tricks For Print Style Sheets:
http://coding.smashingmagazine.com/2013/03/08/tips-tricks-print-style-sheets/
• Printing The Web:
http://drublic.de/blog/printing-the-web/
• CSS Paged Media Level 2:
http://www.w3.org/TR/CSS2/page.html
• CSS Paged Media Module Level 3:
http://www.w3.org/TR/css3-page/
• Proposals for the future of CSS Paged Media:
http://dev.w3.org/csswg/css-page-4/
• Can you typeset a book with CSS?
http://www.w3.org/Talks/2013/0604-CSS-Tokyo/
#wcbuf

69. Making Your
Site Printable
Presented by Adrian Roselli
September 14, 2013, WordCamp Buffalo
#wcbuf
Thanks for staying! Tell your friends!
Photo (and notes) of Lafayette Square (1905) available at Shorpy: http://www.shorpy.com/node/12193