Printing Multiple HTML Pages

Recently, I worked on WEB based application, which has to display and print invoices in HTML format. Invoices has to be printed on sheets with already printed logo and company details.

Therefore, printed invoice need top margin.

The right method is by using CSS Media types. Shortly, you might apply different styles on elements showed on the screen and the same elements printed on paper. More about css media types at Appendix 1.

Problems / Solutions

As stated, company details are already printed at top of the page, therefore, logically, page top margin should set up (reference @page specifications).

@page {
	margin-top: 30mm;
}

HTML structure is:

<!-- Page 1 -->
<section class="page">
	<header class="invoiceHeader">
		<h1>Invoice 001</h1>
		<ul>
			<li>A unique reference number</li>
			<li>Date of the invoice</li>
			<li>Name and contact details of the buyer</li>
		</ul>
	</header>
	
	<section class="invoiceItems">
		<ul>
			<li>Description of the product(s)</li>
			<li>Unit price(s) of the product(s)</li>
			<li>Total amount charged (optionally with breakdown of taxes, if relevant)</li>
		</ul>
	</section>
	
	<footer class="invoiceFooter">
		<ul>
			<li>Payment terms (including method of payment, date of payment, and details about charges for late payment)</li>
			<li>Signature</li>
		</ul>
	</footer>
</section>

which repeats as many times as need.

… but unfortunately it doesn’t work as it should. Here is the result:

Printer doesn’t recognize “margin-top”. The printed content start just after default margin. I’ve tried with “padding-top”, but the result was same.
Example 1

---

Because page margin couldn’t be controlled by setting @page margin/padding, first thing I get on my mind is to set top margin to the “page wrapper”.

.page {
	margin-top: 30mm;
	clear: both;
}

The result is:

Even though each invoice is wrapped by <section class="page">, the top margin has been applied only on the first page.
Example 2

---

At last, padding-top had solved the problem

Example 3

Why @page margin/padding doesn’t work…??? Who knows? Waiting commends from you!

Appendix 1:

Useful links related to CSS media types:

• W3Schools – CSS Media Types
• A List Apart: Articles: CSS Design: Going to Print

2 Responses to “Printing Multiple HTML Pages”

1. dino says:

   November 5, 2012 at 5:21 pm

   Well, the margin should work. Did you try with defining the page size and than applying the margin?
   @page { size: 8.5in 11in; /* width height */ }

   Reply
2. Dalibor Sojic says:

   November 5, 2012 at 5:25 pm

   Well… I think the page size is not an issue, but I will check with defining page size.

   Reply