Making Your Site Printable: CSS Summit 2014
-
Upload
adrian-roselli -
Category
Technology
-
view
9.526 -
download
0
description
Transcript of Making Your Site Printable: CSS Summit 2014
![Page 1: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/1.jpg)
Making Your Site Printable
Presented by Adrian RoselliJuly 15, 2014
#CSSSummit
![Page 2: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/2.jpg)
About Adrian Roselli
• Co-written four books.• Technical editor
for two books.• Written over fifty
articles, most recentlyfor .net Magazine andWeb Standards Sherpa.
Great bedtime reading!
![Page 3: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/3.jpg)
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.
I warned you.
![Page 4: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/4.jpg)
What We’ll Cover
![Page 5: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/5.jpg)
What We’ll Cover
• Background• Techniques• Measuring• Future• Questions
![Page 6: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/6.jpg)
Background
![Page 7: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/7.jpg)
Responsive Web Design (RWD)
• Responsive design (or adaptive design) is about supporting any device:• Desktop computer• Smartphone• Tablet• Television• Printer?
Photo of printed page from http://elliotjaystocks.com/blog/has-adaptive-design-failed-of-course-it-bloody-hasnt/
![Page 8: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/8.jpg)
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
![Page 9: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/9.jpg)
PrintShame.com
http://www.printshame.com/2012/06/foundationzurbcom.html
![Page 10: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/10.jpg)
PrintShame.com
Source page: http://foundation.zurb.com/docs/components/grid.html
![Page 11: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/11.jpg)
Maturing (a bit)
• Decided the best approach would be teaching.• Used lessons, common issues from
PrintShame to develop tutorial(s).• Pitched this very talk.
![Page 12: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/12.jpg)
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.
![Page 13: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/13.jpg)
Print Services
http://rosel.li/040612 “More Evidence of the Need for Print Styles”
![Page 14: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/14.jpg)
Techniques
![Page 15: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/15.jpg)
Screen versus Print
Screen• Continuous• Visual, audible, tactile• Vector and bitmap• Interactive• Online
Print• Paged• Visual• Bitmap• Static• Offline
![Page 16: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/16.jpg)
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.
![Page 17: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/17.jpg)
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.
![Page 18: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/18.jpg)
Planning
• Things I want the user to see:• Branding• Cross-branding• Page address• Copyright• Path to page (breadcrumb)• Link addresses (?)
![Page 19: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/19.jpg)
Planning
• Things the user may not want to see:• Primary navigation• Secondary navigation• Site search• Social media icons• Ad banners• Fat footers
![Page 20: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/20.jpg)
Planning
• Things that probably won’t print anyway:• Colors• Backgrounds (images and colors)• Bits of timed / interactive elements• White elements (logos, text, effects)
![Page 21: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/21.jpg)
Examples: Caveats
• The following CSS examples are just examples.• Selectors vary between IDs, classes and
elements to show something that may be familiar to everyone
• Styles may differ from what is on the live site, sometimes to remove redundancy or simplify code samples.
![Page 22: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/22.jpg)
Example
![Page 23: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/23.jpg)
No Print Styles
![Page 24: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/24.jpg)
Calling 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">
![Page 25: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/25.jpg)
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).
![Page 26: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/26.jpg)
General Styles
• Clear whitespace around the content.• User’s print settings will handle page margins.• Lets 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.
![Page 27: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/27.jpg)
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.
![Page 28: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/28.jpg)
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!
![Page 29: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/29.jpg)
First Round of Changes
![Page 30: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/30.jpg)
First Round of Changes
![Page 31: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/31.jpg)
Navigation
• Get rid of the primary, secondary, tertiary navigation,
• Remove social media links,• Remove other bits that won’t make sense
when printed.
#Nav, #FlyOutNav, #SubNav, .NoPrint, #SMLinks { display: none;}
![Page 32: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/32.jpg)
Navigation
![Page 33: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/33.jpg)
Breadcrumb
Keep the breadcrumb as a wayfinding method, but reduce its size and don’t expand the links.
#Bread a:link, #Bread a:visited { text-decoration: underline; color: #000;}#Bread { color: #000; font-size: 6pt;}#Bread > a:after { content: "";}
![Page 34: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/34.jpg)
Banner
• Change any text to print units,
• Adjust colors,• Handle spacing,• Make sure you keep
the logo.• Consider SVG.
![Page 35: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/35.jpg)
Footer• Change any text to print units,• Adjust colors,• Handle spacing,• Remove unneeded bits.footer { border-top: 1px solid #000; font-size: 6pt; color: #000; background-color: transparent;}footer p { margin: 0; color: #000;}footer p a::after { content: attr(data-alt);}footer img { display: none;}
![Page 36: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/36.jpg)
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).
![Page 37: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/37.jpg)
Further Consideration
• Hide videos.• Hide controls for embedded audio.• Hide Flash movies.• Hide canvas elements (assuming interactive).• Don’t scale images to 100% width (looking at
you, mobile styles and frameworks).• Determine if ads should be printed or not.
![Page 38: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/38.jpg)
Before (9 pages)
![Page 39: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/39.jpg)
After (2 pages)
![Page 40: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/40.jpg)
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
![Page 41: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/41.jpg)
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/
![Page 42: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/42.jpg)
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.• Not perfect – they don’t always fire in time.
![Page 43: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/43.jpg)
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>
![Page 44: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/44.jpg)
QR Code in Use
![Page 45: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/45.jpg)
Mobile
• Consider the explosion of mobile.• Same goals on mobile as desktop.• Mobile has played catch-up in print, but has
arrived within past year.• Firefox & Safari print background colors.• Firefox used odd page size.• Android browser outputs raster PDF.
Printing from Mobile Has Improved: http://rosel.li/063014
![Page 46: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/46.jpg)
Mobile
Android Browser Chrome Firefox
![Page 47: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/47.jpg)
Mobile
Android Browser Chrome Firefox
![Page 48: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/48.jpg)
TEST!
• Print to PDF for your first (most) rounds.• Chrome Developer Tools (next slide).• Use every browser you can.• Use each browser visiting your site.• Change paper size (8.5" × 11", A4, etc.).• Change paper orientation.• Scale the content in the print dialog.
![Page 49: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/49.jpg)
Chrome Developer Tools
1. Open the drawer,2. Select the Emulation tab,3. Choose Screen,4. At the bottom check CSS Media,5. Choose print from the menu.
![Page 50: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/50.jpg)
Chrome Developer Tools
![Page 51: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/51.jpg)
Measuring
![Page 52: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/52.jpg)
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.• For fun, compare to your carousel.
Full tutorial: http://rosel.li/032613
![Page 53: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/53.jpg)
Query String ParametersVariable 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.
![Page 54: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/54.jpg)
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
![Page 55: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/55.jpg)
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>
![Page 56: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/56.jpg)
Check the Data
![Page 57: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/57.jpg)
Check the Data
![Page 58: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/58.jpg)
Future
![Page 59: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/59.jpg)
Here or on Its Way
• Browser support for existing features.• Electronic Books.• HTML5 as a publishing platform.• CSS3, CSS4.
![Page 60: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/60.jpg)
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.
![Page 61: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/61.jpg)
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.
![Page 62: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/62.jpg)
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.
![Page 63: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/63.jpg)
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.
![Page 64: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/64.jpg)
Page Margin Boxes@page { @bottom-left { content: "Copyright me." } @bottom-right { counter-increment: page; content: "Page " counter(page); }}
![Page 65: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/65.jpg)
Wrap-up, Questions
![Page 66: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/66.jpg)
Further Reading• Tracking Printed Pages (or How to Validate Assumptions)
webstandardssherpa.com/reviews/tracking-printed-pages /• Make your website printable with CSS:
www.creativebloq.com/responsive-web-design/make-your-website-printable-css-3132929• Calling QR in Print CSS Only When Needed:
rosel.li/030813• Tracking When Users Print Pages:
rosel.li/032613• Tips And Tricks For Print Style Sheets:
coding.smashingmagazine.com/2013/03/08/tips-tricks-print-style-sheets/• Printing The Web:
drublic.de/blog/printing-the-web/• CSS Paged Media Level 2:
www.w3.org/TR/CSS2/page.html• CSS Paged Media Module Level 3:
www.w3.org/TR/css3-page/• Proposals for the future of CSS Paged Media:
dev.w3.org/csswg/css-page-4/• Can you typeset a book with CSS?
www.w3.org/Talks/2013/0604-CSS-Tokyo /
![Page 67: Making Your Site Printable: CSS Summit 2014](https://reader036.fdocuments.in/reader036/viewer/2022062613/540d63378d7f72767e8b4971/html5/thumbnails/67.jpg)
Making Your Site Printable
Presented by Adrian RoselliJuly 15, 2014
#CSSSummit