Using HTML/CSS to Shrink Content to Printable Page

Question

Is there a way to force a web browser to shrink, reduce the font, or otherwise condense the size of content within a HTML/CSS-defined content-page to fit on a printed page?

I am trying to print documents from a variety of web repositories to a PDF or hardcopy format. These documents frequently have page numbers as if a printed document; unfortunately, the web-versions available on the repositories frequently don't match the pagination when printed.

A completely and totally random example: https://www.sec.gov/Archives/edgar/data/1392097/000095013607001902/file1.htm

Searching through other threads, I pieced together the following code, which was successful in defining the page size and making the printed document include page breaks at the appropriate place at the beginning of new pages:

<style>
.pageA4 {float:none; page-break-before:always; body{width:210mm; height 297mm; margin-left:auto; margin-right:auto;}
</style>
...
<div class="pageA4">
Content content content
</div>

When the content exceeds the A4 page size, however, the excess spills over onto the next page. It continues until it hits the /div tag, the next div then starts at the top of the next printed page as is appropriate.

I would like to be able to make any over-sized pages shrink-to-fit the A4 so that the printed document's pagination matches that appearing in the document content.

Answer 1

You might want to use

@media print {
 /* styles go here */
}

The HTML5 Boilerplace CSS provides "instructions on how browsers should break the content into pages" along with many other print styles.