views:

577

answers:

6

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.

+2  A: 

You can't. Websites are created for screens, not printers.

You can add a print.css, to make the site print nicer, but you can't specify a paper size such as A4.

You can find more information about print stylesheets and how to use them here.

The best solution for printing, is to use PDFs, that's what they are for. Create a PDF that has the same data. You have full control over the print format in that case.

Oded
It's not possible via CSS? Is there a way to do this using JavaScript then? I'm sure there must be *some* way to do this -- can't be a can't, can it?!
Zabba
@Zabba - not through CSS, not through Javascript. The two technologies are not that compatible that you can do that.
Oded
A: 

Here's two good reads

http://www.zan1011.com/paper.htm

http://www.businessdictionary.com/definition/A4-size-paper.html

Though since A4 in pixels is 1700 x 1100, you would most likely need a screen resolution big enough to view it.

Zane Edward Dockery
A4 does not translate to 1700x1100 pixels at all. Pixels as such have no physical size. Making a website with a specific dimension in pixels does not guarantee in any way the physical size at which it will be displayed, much less how it will be printed. This all depends on the ppi density of the screen it will be viewed on and on the ppi setting the printing software applies. And the latter is often only a stable value in professional image editing applications, a browser printing a website works more on the *"squeeze it in as good as it gets"* principle.
deceze
Furthermore, at 300ppi, a typical print setting, A4 translates to 2480x3508 pixels.
deceze
pixels + dpi = paper sizeso it all comes down to the desired dpi which can be predefined to a number like 300
YuriKolovsky
+2  A: 

Technically, you could, but it would take a lot of work to get all browsers to print out the page exactly as it is displayed on screen. Also, most browsers force the URL, print date and page numbering on the print-out, which is not always desired. This cannot be altered or disabled.

Instead, I would advise to create a PDF based on the contents on screen and serve the PDF for downloading and/or printing. Although most available PDF libraries are paid, there are a few free alternatives available for creating basic PDFs.

Prutswonder
+1  A: 

It would be fairly easy to force the web browser to display the page with the same pixel dimensions as A4. However, there may be a few quirks when things are rendered.

Assuming your monitors display 72 dpi, you could add something like this:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  <head>
  <body>
  </body>
</html>
Tim McNamara
Following Will Dean's suggestion (which makes a lot of sense) using millimeters, you can force the browser to calculate the pixel width/height: body { height: 420mm; width: 297mm; ... }
Tim McNamara
+2  A: 

I've used HTML to generate reports which print-out correctly at real sizes on real paper.

If you carefully use mm as your units in the CSS file you should be OK, at least for single pages. People can screw you up by changing the print zoom in their browser, though.

I seem to remember everything I was doing was single page, so I didn't have to worry about pagination - that might be much harder.

Will Dean
A: 

It's entirely possible to set your layout to assume the proportions of an a4 page. You would only have to set width and height accordingly (possibly check with window.innerHeight and window.innerWidth although I'm not sure if that is reliable).

The tricky part is with printing A4. Javascript for example only supports printing pages rudimentarily with the window.print method. As @Prutswonder suggested creating a PDF from the webpage probably is the most sophisticated way of doing this (other than supplying PDF documentation in the first place). However, this is not as trivial as one might think. Here's a link that has a description of an all open source Java class to create PDFs from HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

Obviously once you have created a PDF with A4 proportions printing it will result in a clean A4 print of your page. Whether that's worth the time investment is another question.

FK82