Can I force an HTML document to be one page long?

Question

I am generating a document from HTML. Is there any way to force the HTML page to be one rendered as one printed page long?

I've done most of the page with <table> and <div> tags.

Solution 1

Not exactly, but you can use a print-stylesheet:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

To set font sizes, paddings, etc. to physical units like 'pt' (that should never be used in a screen-stylesheet!) so that it ends up being more or less an A4 page, when rendered in a typical browser, with typical fonts, with a following wind. Nothing is guaranteed but you can optimise for the common case.

In print you don't have to worry so much about font size preferences or dpi settings, but you still can't control the margins the browser uses or the actual page size (US Letter is smaller than A4), so leave a good amount of wiggle room and test on the major browsers.

Solution 2

No. You can't control the user's zoom level, printer settings, paper size (is he using A4 paper in Europe or legal in the US?) and all of the various other things that affect printer output using HTML.

The best you can do with HTML is make a very simple "printer-friendly" page and keep the content short. Alternatively you can build a PDF, which is designed to let you control how it's printed.

Solution 3

Use PDF. You can force many things like font size, font type and many other parameters but any browser can decide they don't care and use whatever they want and so violate your prerequesites or decisions. HTML is not (repeat after me: is NOT) a presentation language.

In many cases, it will mostly work but nothing is certain.

Solution 4

You can use CSS to style the page and set it to a certain height / width... There's a good tutorial here.

Solution 5

No, but you can make the print view a lot smoother by using a dedicated CSS file for print media, like suggested above.

Then you could for example at least prevent a table from spanning over 2 pages by using "page-break-before: always;".

And finally you could also use "display:none;" on elements that are unnecessary like ads, nav bars, etc. to keep the page itself shorter (short enough for a single page, hopefully).

No guarantees, though.

View more solutions

Comments

[Gumbo]

“You can't control the user's […] paper size […]” — Imaging the printer would crop your paper to fit the authors settings. :)

[Kev]

"Nothing is guaranteed but you can optimise for the common case." Well said. If you know how much actual content you're cramming into the page, you can very well make sure it fits most people's pages.

[Mr. Shiny and New 安宇]

I'd also recommend optimizing for US Letter size because it's slightly smaller than A4. A4 will drive US Letter users crazy but US Letter will fit on A4 and the users might not notice.