Update 30.11.2020: Explain why I removed the print buttons from my blog.
Many websites look great on screen but don't support printing or don't look good on paper. Mostly this is because the website designer "forgot" to test and optimize for printing.
To help with this problem, there are free services that can print any website. I know and use two such services: PrintFriendly and PrintWhatYouLike. Unfortunately no service works perfectly, usually one or the other produces better looking results. Both offer adding a "print" button on your website and generate some Javascript/HTML for that.
Upon closer analysis it turns out that these buttons are very much not cool from a GDPR compliance perspective: The buttons load an image and additional Javascript when
your website loads so that the people running those print services get a very nice access log of your users reading your website!
To solve this problem, I modified the print buttons to be more data privacy friendly:
- inline the image for the print button
- load additional Javascript/CSS resources from the print service only when the user clicks on it
- show a notice that printing uses an external website
You can try out both print buttons at the end of this page. It is interesting to notice how PrintFriendly and PrintWhatYouLike actually differ in the details:
| PrintFriendly | PrintWhatYouLike |
| Print view customization profile | Image alignment
Change page header image and tagline
Custom CSS | Very detailed modification for print: remove backgrounds, margins, images. Remove elements, select container to show, expand to fill page width, change font size |
| Processing | on their servers | in your browser (print)
on their servers (pdf download) |
| Additional resources loaded for printing | nothing | Javascript, HTML
CSS for printing UI |
| Interactive adjustment before print | Change image and text size | All of the above |
| Commercial / "Pro" offering | API, ad-free, client-side processing, GDPR compliant | Unclear |
| Actively maintained | Partially, screenshots of Blogger are outdated | Unclear, last blog post from 2011 |
| Strengths | Better looking result
Document header with URL and page title | GUI for customizing the print view |
| Weaknesses | Messes up right-justified paragraphs | Changes text size of headings to make them look like normal text |
| GDPR compliance | Yes, only with paid version (not tested). Free version uses Google Analytics | No. Also uses Google Analytics even though the processing is on the users browsers |
So with the free versions you are not complete GDPR compliant but you can at least avoid leaking information to the print services as long as your users don't actually use them. And with the paid PrintFriendly offering there is even a GDPR compliant solution available.
Comparing Results
The results are - unfortunately - rather disappointing. If I take this very blog post as a reference, then I must say that no printing solution is really satisfying. Also comparing with the native Browser printing shows deficiencies:
- PrintWhatYouLike, PrintFriendly and Chrome don't show the embedded JSFiddle with the source code
- PrintWhatYouLike cuts off the paragraph under the table
- Firefox truncates the URL in the page footer in the default configuration (can be changed by having only the URL in the footer and putting the other info in the header)
Eventually users will be best advised to print via Firefox or Safari. You can look at the resulting PDFs
here.
What's next?
The root cause for my trouble is that the Blogger theme I use doesn't have proper printing support via the @print media query. I am not sure I want to keep these print buttons. While they do help as a workaround they create new problems (not everything is shown).
I'll probably first remove the PrintWhatYouLike button as it doesn't produce much better results and also hides a text paragraph. Then I'll hopefully find time to either find a better theme with proper printing support or I'll maybe find the time to add the missing printing support myself.
The Code
Have a look at the JsFiddle with the code:
If you copy the code and use PrintWhatYouLike then please create a profile for your website and set it in the code instead of mine.
Installing the print button
Simply copy the above code - one or both buttons - to your website. Follow the instructions provided by PrintFriendly and paste this code instead of the generated one.
For Blogger, you will have to edit the HTML of your theme and add the code after the <data:post.body/> element (click in the XML text and press Ctrl-F to search):
Please let me know how this works for you.
Here are the print buttons to try out:
Print
(via PrintWhatYouLike, a 3rd party service)
In the end...
In the end I decided that I unfortunately cannot fix printing for everybody and removed this solution from my blog. People who need to print and don't like the result of their browser will need to use the printing services themselves.
Another issue is that my Blogger theme got somehow messed up and wouldn't show the comments any more. Lesson learned here is that I shouldn't manually edit the Blogger theme as long as I don't want to deal with fixing it later when something stops working.
Some day I will have the time and move this blog to a better hosting - or even run my own system - which can be better optimized for printing. Till then it stays as it is.
I apologize for the invonvenience.
Comments
Post a Comment