Formatting an HTML document into several A4 sections

This is my current problem.

I want to create a HTML page that contains about 40 coupons. Each coupon must be in one A4 size.

So, if I were to print an HTML document, I would like each printed page to contain 1 coupon.

Ideas on how I could do this?


source to share

3 answers

The following CSS should do what you want, substitute the class name for whatever fits your DOM structure

 @media print {


This will always include a page break after the element, which you can also use page-break-before

to achieve a page break before the element.



You will never get a very accurate solution using HTML, as each browser decides how best it prints HTML and adds all sorts of headers and footers that resize the page and how the printer actually prints it.

You would be better off generating a PDF of your coupons, which you can easily do with PHP extensions.



You can follow these steps:

  • Define width:100

    for each coupon in its css styles. This will use the maximum width of your paper.
  • Use page-break-after:always

    in CSS properties for each coupon. This will make the next coupon appear on the next page. (Http:// (v = vs .85) .aspx)

Remember to be careful about the height of your coupons. Try not to put many lines in them.
You can use tag <fieldset>

for each coupon and apply css properties to it.



All Articles