Jump to content

Some extended council on making a perfect A4 size page for screen AND print


Recommended Posts



I am making a webpage for hosting and showing my CV, portfolio, contact info and all that stuff. I am trying to make a page for my CV that fits an A4 page, so that I can display something, that people might as well can print and view physically, while it remains a perfect copy. I am coding the page based on a mockup I made in Krita. I am doing this, because I thought (notice past tense) that it would be smart, since I could display a HTML/CSS page while still getting a possible (notice possible) PDF output. If there's a different way to doing this, that people know of, I'd consider it. I don't think making a .png CV for print or whatever is smart however, since I want a document with text that can be copied, manipulated etc. by whoever's viewing. The page should be displayed as an element of a bigger web page in the end.


Only thing is, it's much easier said than done. I tried using the cm/mm measurements for A4 page directly integrated in my code like this:

  margin: 0 0 0 0;  /*21cm*/  width: 18.4cm;  /*29.7*/  height: 29.2cm;  padding: 5mm 13mm 0 13mm;

The padding makes up for the total measure if you notice. This gives me visually something that looks like an A4 page in the browser. However, when I open this in the print prompt menu (to export as a PDF), things get skewed, I can't fit the page on the A4 print prompt window. The whole page either gets too big or too small, some of the browser generated graphics get malplaced etc. This also depends on the browser, I use Chrome mainly.

Also, in normal screen view, the page looks fine in Chrome, in Firefox however, the right padding gets extremely wide though.


If people want I can attach files, pastes, whatever you need. I think this will need some extensive guidance though to make it work well. I have tried alot of solutions to make it printer friendly, going through guides on making printer friendly HTML/CSS and friends' advice. Nothing worked yet. I can even give you access to a .git if that's wanted.



TL;DR: I am trying to make a CV page that fits an A4 page perfectly, in "screen" as well as if it was printed.



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...