Is it possible to make a HTML page behave, for example, like a A4-sized page in MS Word?
Essentially, I want to be able to show the HTML page in the browser, and outline the content in the dimensions of an A4 size page.
For the sake of simplicity, I'm assuming that the HTML page will only contain text (no images etc.) and there will be no <br>
tags for example.
Also, when the HTML page is printed, it would come out as A4-sized paper pages.
Best Answer
Ages ago, in November 2005, AlistApart.com published an article on how they published a book using nothing but HTML and CSS. See: http://alistapart.com/article/boom
Here's an excerpt of that article:
Anyway…
Since you want to print A4, you'll need different dimensions of course:
The article dives into things like setting page-breaks, etc. so you might want to read that completely.
In your case, the trick is to create the print CSS first. Most modern browsers (>2005) support zooming and will already be able to display a website based on the print CSS.
Now, you'll want to make the web display look a bit different and adapt the whole design to fit most browsers too (including the old, pre 2005 ones). For that, you'll have to create a web CSS file or override some parts of your print CSS. When creating CSS for web display, remember that a browser can have ANY size (think: “mobile” up to “big-screen TVs”). Meaning: for the web CSS your page-width and image-width is best set using a variable width (%) to support as many display devices and web-browsing clients as possible.
EDIT (26-02-2015)
Today, I happened to stumble upon another, more recent article at SmashingMagazine which also dives into designing for print with HTML and CSS… just in case you could use yet-another-tutorial.
EDIT (30-10-2018)
It has been brought to my attention in that
size
is not valid CSS3, which is indeed correct — I merely repeated the code quoted in the article which (as noted) was good old CSS2 (which makes sense when you look at the year the article and this answer were first published). Anyway, here's the valid CSS3 code for your copy-and-paste convenience:In case you think you really need pixels (you should actually avoid using pixels), you will have to take care of choosing the correct DPI for printing:
Yet, I would avoid the hassle and simply use
cm
(centimeters) ormm
(millimeters) for sizing as that avoids rendering glitches that can arise depending on which client you use.