I worked at car shopping related site. We had just done the yearly replatforming to Angular, then the rereplatforming to make it server side rendered, and then the complaints started. It wasn't many, but I read our feedback report every single day and it was a few a day which is actually pretty notable. I knew from user testing and interviews that when shopping for used cars people would print out a few of the details pages and look at them side by side on paper. They were typically older but isn't like it was only old people who did this. Younger people who were more price conscious did as well since they really took their time. But after all the fancy new frameworks the page printed out on something like 10 sheets of paper when it would have fit on one. Most of them were blank. I managed to get a week of a dev's time to hack something barely usable together, but even getting that took some pleading.
Next time you design a site that gets any use by a wide, tech illiterate audience, print it out and see how it looks. I guarantee you someone is printing it out and then cursing you.
You implied printing is tech illiterate. I've had to print web content for many reasons, including sharing it with strangers whose email/phone/messenger I don't have. Or a group of people whose details I do have, but I don't necessarily want to fill their inbox with this content.
You also can't highlight interesting parts or scribble notes on a web bookmark. You can print it to a PDF or paste in Word and annotate that. But aside from it being much clumsier and messier as an approach... it still needs decent print styles to print to a PDF.
In particular I think there's a high barrier to entry for sharing computer content among a large group of people - in person. Even projectors have their own layers of pain, from connectivity, to availability, to image quality. And then there's the quality of the presenter, who often was hired based on their merits in their field of expertise, not on their presenting skills. And let's be honest: if they could do all of this stuff well, they probably wouldn't be working for some of my customers. And then there's the quality of the audience. Back-seat driving can end up distracting everyone from the point of the meeting. I know I've been guilty of that myself. Not to mention all of the people who don't have 20/20 vision and can't or won't do anything about it.
The most expedient thing sometimes is to print out a few copies so everyone can absorb the information at their own pace.
I once worked on an interesting instructional web app that let you create a series of short video clips for instructions (think like assembling Ikea furniture).
On the web site there were videos placed next to each block of instructions, but that obviously doesn't work for print so we used print style sheets to swap out the video embed with a QR Code that pointed to the video.
Users could then work through the instructions on paper (their preferred interaction method) and just pop into a video if they wanted clarification or needed help.
What's the actual utility there, though? It makes the video less portable than if you were just watching in your phone. And the position on the page isn't exactly important.
I'm pretty sure that's doable with current technology. Detecting a QR code and a larger rectangle surrounding it is easy; overlaying a video over that rectangle is only slightly harder.
What I'm not so sure of is the utility. Users would probably rather watch a video on their phone screen than watching a video pretending to be on a piece of paper through their phone screen.
I think this title needs a '(2016)' appended to it.
Between print stylesheets and paged media, CSS has become one of my favorite ways to typeset documents documents where the layout of individual pages matters greatly. (LaTeX remains my prefered choice for documents where text flows between pages.)
Thanks for posting this. I was actually just today looking for a solutions to render a website as a PDF, and didn’t get as far as puppeteer – which is probably too heavy a dependency for my use case, but is still nice to know about.
Does anyone know of a print-oriented web-browser that understands CSS? It seems like the kind of thing that would be useful to many.
I use a print stylesheet for my HTML CV/resume since I from time to time need to “print as pdf” and send around by email.
I also find my self emailing invoices/receipts a lot and it’s pretty annoying when there’s no way to print/save as pdf from a vendor without getting the entire page layout
Minor note. The page has a comment dated November 2019 stating that the Firefox approach he documents was removed.
In current stable Firefox you can toggle print styling on a page using the Inspector tab of the developer tools and clicking on the icon that looks like sheets of paper in the upper right of the styles column.
I tried to print an online worksheet provided by a vendor the other day and it was (not surprisingly) an unusable mess. Sometimes paper is a great technology and it's a shame we don't optimize for that UX as much anymore.
It is very important for teaching materials that intended to used as handouts or worksheets for kids. My SO is an elementary school teacher (Kindergarten) and I often am asked to fix "print-to-pdf" from HTML messes from a web site using Acrobat Pro DC. Sometimes it is easier to just fire up Illustrator and remake the worksheet(s). Other site just work perfectly but they are rare.
My wife prints lots of things out (usually some sort of long doc description recipes, walkthroughs, coupons, large bills, etc). She likes to have a 'hardcopy'. Whatever no big deal (I personally want as little paper as possible). Except for progressive sites. That one took me a bit to figure out what was going on. Basically you have to scroll the whole page to make it print everything as stuff loads in only if it is scrolled into view. Also print preview is your buddy here. If it does something weird do not print it.
Print stylesheets are quite important if you're serving older demographics. I manage a site that frequently has content printed out and passed around, so the print styles must work. It has the added bonus that I never hear complaints about printing, nor requests to format content into a cleaner-looking PDF document.
I recently got feedback about an article on my website as annotated scans of the printed article. The reader was about eighty-years old. A little bit of work on my print style-sheet went a long way toward improving usability.
While it would be great if more sites took this to heart, in the meantime printfriendlly.com has a great javascript button that has a prominent place on my bookmarks bar.
I recently had a client ask me to turn product list pages into printable checklists. It was a really useful dive back in to print style sheets, something I'd learned about in school and then forgotten because I hadn't used them in 8 years.
If your website is just content, it should work fine with printers, screen readers, and readability tools (Pocket, browser's reader mode). It's usually fairly trivial.
There are many reasons why your readers might want read your content in another app, or on paper. I use readability tools to read bright websites at night, and to avoid dealing with poorly readable websites. I also use Pocket to read long bits of text without losing my position. I take printed pages in the kitchen and in the garage. I sometimes print my own content to review it in the train or in a scenic spot. Paper is great for distraction-free work.
In the same vein, you should test on older devices, shittier screens and slower internet connections. Many people have shitty laptops, or browse the internet in underground public transit.
Print styles are great for grabbing a PDF output of the page that is cleaner than the site usually. If you have lots of content to read and want an archive that isn't online, isn't a messy html/package, printing to PDF output is a decent choice.
“Printing” means more than copies of webpages on dead trees. “Printing” means submitting invoices on online forms, it means sharing paywalled content with coworkers, and it means archiving web pages in a portable way.
I’m glad that this was posted, because more times than not I have to resort to cut and paste - or if I’m lucky just cropping out the two pages of content out of the 10+ pages of cruft when saving a web page to pdf.
Browser consistency for print styles is like building websites in the late 90s. Chrome, Firefox, Safari all handle margins, page breaks differently. Not to mention setting page/paper size...
I recently added print styles to a site and found adding them for Chrome(ium) and Firefox was a breeze, and Safari was an absolute nightmare. I never did get it printing correctly in Safari, but good enough to be somewhat passable. I find this has been my experience in many aspects of web development as of late...
Part of an application I develop generates printed sheets for inventory. Both Safari and Chrome ignore simple things like repeated table headers and line breaks. I seem to remember Chrome made stranger decisions than Safari, but neither were entirely usable. Firefox is the only browser that gets that mostly right. Unfortunately Firefox needs other workarounds and no one in my organization wants to use it.
This has been my experience for years: print stylesheets are just not a major focus for browser vendors. Because I can't count on stylesheets working correctly, it's not worth investing development time. The more recent parts of the aforementioned application generate PDFs, which is probably what the print stylesheets will eventually move to.
It's almost utterly irrelevant at this point in time, but IE was also good at printing tables. I was completely unable to get Chrome to not mangle thead/tfoot and content spanning pages. I ended up doing a horrible hack where I guesstimated the amount of content and split up a 10 page table into separate tables each well before the end of a page of print, just to support Chrome.
I once had to write an app which would fill typographically-printed forms fed into a printer by printing on precisely specified locations. Despite being more of a desktop than a web developer the most straightforward and flexible way I found was generating HTML and print-oriented CSS.
A good Print style sheet is essential if you want your website and articles to be easily archived and saved and/or distributed offline. Especially if it's content that gets censored somewhere on this planet.
Well people on HN worship PDF, thinking it's necessary for printing and you can't print HTML—so it seems not only the author forgot about CSS for printing.
Anything with a pretense of research gets published in PDF even on sites having nothing to do with academic publishing—while the content is two columns of text and intermittent meh-quality illustrations. Such need for PDF, wow. The explanation given is that people may want to read that from paper, but I asked my friends in actual academia, and they say everyone reads from screen anyway. Well I guess everyone in ‘research’ either has 14" tablets or is able to read 5-point text all day, otherwise they'd all have crippling RSI from scrolling.
Next time you design a site that gets any use by a wide, tech illiterate audience, print it out and see how it looks. I guarantee you someone is printing it out and then cursing you.