Making Your Site Printable

Presented by Adrian RoselliSeptember 14, 2013, WordCamp Buffalo

#wcbuf

Making Your Site Printable

Presented by Adrian RoselliSeptember 14, 2013, WordCamp Buffalo

#wcbuf

Photo (and notes) of Lafayette Square (1905) available at Shorpy: http://www.shorpy.com/node/12193

About Adrian Roselli

• Co-written four books.• Technical editor

for two books.

• Written over fifty articles, most recentlyfor .net Magazine andWeb Standards Sherpa.

#wcbuf

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

What We’ll Cover

#wcbuf

What We’ll Cover

• Background• Techniques• Measuring• Future• Questions (ongoing!)

#wcbuf

Background

#wcbuf

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/

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

PrintShame.com

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

PrintShame.com

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

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

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

Print Services

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

Techniques

#wcbuf

Screen versus Print

Screen• Continuous• Visual, audible, tactile• Vector and bitmap• Interactive• Online

Print• Paged• Visual• Bitmap• Static• Offline

#wcbuf

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

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

Planning

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

#wcbuf

Planning

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

#wcbuf

Planning

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

#wcbuf

Example Site

#wcbufhttp://AdrianRoselli.com/Bio

Example Site

#wcbufhttp://AdrianRoselli.com/Bio

Example Site

#wcbufhttp://AdrianRoselli.com/Bio

Example Site

#wcbufhttp://algonquinstudios.com/Engage/Careers/DeveloperI

Example Site

#wcbufhttp://algonquinstudios.com/Engage/Careers/DeveloperI

Example Site

#wcbufhttp://algonquinstudios.com/Engage/Careers/DeveloperI

Example Site

#wcbufhttp://buffalosoccerclub.org/about

Example Site

#wcbufhttp://buffalosoccerclub.org/about

Example Site

#wcbufhttp://buffalosoccerclub.org/about

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

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

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

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

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

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

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

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

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

General Stylesbody {    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

General Stylesh1 {    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

General Stylescode, 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

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

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

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

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

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

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

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

QR Code in Use

#wcbuf

Outliers

• Sadly, not every device behaves.

• Samsung Galaxy S4, default Android browser.

#wcbuf

Outliers

#wcbuf

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

Measuring

#wcbuf

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

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.

Sample Query Stringhttp://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%3B%2B__utmz%3D267504222.1364314722.1.1.utmcsr%3D%28direct%29|utmccn%3D%28direct%29|utmcmd%3D%28none%29

#wcbuf

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*/Engage/Careers%29&utmcc=__utma%3D267504222.1477743002.1364314722.1364314722.1364314722.1%3B%2B__utmb%3D267504222.17.7.1364314901604%3B%2B__utmz%3D267504222.1364314722.1.1.utmcsr%3D%28direct%29|utmccn%3D%28direct%29|utmcmd%3D%28none%29);

} } </style> </head>

#wcbuf

Check the Data

#wcbuf

Check the Data

#wcbuf

Future

#wcbuf

Here or on Its Way

• Browser support for existing features.• Electronic Books.• HTML5 as a publishing platform.• CSS3, CSS4.

#wcbuf

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

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

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

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

#wcbuf

Wrap-up, Questions

#wcbuf

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

Making Your Site Printable

Presented by Adrian RoselliSeptember 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