Freecodecamp: Certificate print styles need updating - many bugs, including missing header

[JulianNF]

Issue Description

When printing certificates, the result is very messy. Even when enabling "print background images", the header (including the logo) doesn't appear.

The signature is enormous, and there are also other smiler smaller style issues (e.g. the verification URL in the footer breaks over two lines).

Sample print results

When printed in landscape mode, broken over two pages :smile: :

When printed in portrait mode, stays on one page:

Proposed solution

It seems that the only media query for printing is the default print.less, apparently generated by bootstrap. Given the importance of the certificates looking good (especially if printed by a recruiter/employer), I think it might be good to write up a print-specific CSS file for certificates or to extend the print.less stylesheet for the certificates.

[jonathan-grah]

@freeCodeCamp/moderators, there are two ways to approach this:
1) We setup a few different media queries for different printing sizes e.g. A4, A5, letter etc.
2) We only support (and force browser) to A4 landscape - this is much easier / less hacky

Which way do you think is best?

[thecodingaviator]

I think we should explicitly set the browser viewport's height and width to A4 landscape.

cc: @QuincyLarson

[ojeytonwilliams]

We could add a toggle (invisible to printers) that switches between letter and A4, and maybe use something like paper css to switch between them. I think that's probably necessary in the long run, because so many users are in the Americas.

However, getting A4 landscape right would be a good start.

[jonathan-grah]

@ojeytonwilliams, I have already fixed the weird image resizing etc., so it works perfectly on A4 landscape. It's probably best if we don't have entire different sections of HTML for different paper sizes - there are so many (A2, A3, A4, A5, letter) etc., imo it's very hacky. I'd prefer to just set a media query for maybe 1 or 2 specific sizes if we're going round that route.

[RandellDawson]

This seems like a lot of trouble when most people are not even going to be printing these. It is a linkable certification. Most would have a link from their portfolio or LinkedIn profile to it. The employer would click and view the certification. In my opinion, If a user wants to print it out, then they can figure out how best to print it on the paper and adjust their print settings to achieve what they want (in the case of a rare paper size). This of course is only my opinion.

[jonathan-grah]

@RandellDawson, yeah I'm sort of in agreement. It work fine with my PR on A4 landscape without any adjustments. If a user wants to print for a different paper size, they can manually adjust the scale in the printing options? Does this sound on the same page?

[ojeytonwilliams]

Well, we wouldn't need to worry about the different An's, since they all have the same aspect ratio. As long as A4 is fine, the others should be too. It's just letter (maybe legal, I'm not sure) that's both common and not the same aspect ratio as A4.

Having said all that, as long as the A4 landscape looks okay when resized to fit in letter, that's probably good enough. So, assuming that's true, I'm in agreement too!

[jonathan-grah]

@ojeytonwilliams, great I'll double check the letter size looks fine, then I'll undraft the PR.

[raisedadead]

The certificates were intentionally not designed to be printed initially. These are meant to be digitally verified. I am in strong favor of keeping it as such.

Anyway, I understand that some users want the printed version. In this I think we would take this as a feature request and overhaul during our re-styling run.

@ahmadabdolsaheb is going to be taking point on these.