CODEWITHSUNDEEP
htmlprintingformatting
Andrew
Andrew

Reputation: 3999

Print HTML on 8.5x11 paper?

I would like to print sets of data on 8.5x11 sheets of paper (one set per sheet). These sets are rendered on a web page vertically one after another (in divs of size 8.5x11).

How can I print each of these divs with identical formatting on individual pieces of 8.5x11 sheets of paper?

Upvotes: 0

Views: 7374

Answers (1)

Pat
Pat

Reputation: 25675

You can do the following:

  1. Try to work approximately how tall a <div> you can print on one page. This is determined by the contents of the <div> and is not entirely in your control (i.e. if the data is mainly text, a user may choose to override your font size or scale the page for print). However you should be able to come up with an approximate height that fits. For 12pt font, I've found it to be around 900px in height.

  2. Create a .page class that uses the CSS printing page break rules in a print stylesheet. These let you suggest to the browser if a page break should occur before or after your element.

You'll end up with something like the following:

HTML

<div class="page">
    /* data */
</div>
<div class="page">
    /* more exciting data */
</div>

CSS

.page {
    font-size: 12pt; 
    height: 900px;  /* You'll need to play with this value */
    page-break-after: always; /* Always insert page break after this element */
    page-break-inside: avoid; /* Please don't break my page content up browser */
}

For more reading, this ALA article gives some excellent tips on printing your web pages.

However if you're looking for precise control over how the reports print, I would recommend generating a PDF and serving it to the user.

Upvotes: 3

Related Questions