Generate custom size pdf using browser print function

Question

I have an application that allows users to edit an online business card. once the user has entered their details, I would like to download the business card as pdf. my issue is that when I download the pdf, it takes a standard A4 size instead of the size of my business card making it difficult to print directly. How can I define the pdf dimension to match the size of my business card? Please check this link

http://thecardguys.co.ke/modules/onecard.php?cardid=100&side=1

I tried the following css rule

#printarea {
position: relative;
margin: 0 auto;
width: 400px;
}
   body,html
    {
   width:400px;
   margin: 0 auto;
   }

Answer 1

You'll have to set a couple more CSS bits to ensure that your print is correct.

@page {
  size: 91.44mm 53.34; // set appropriately
  margin: 0;
}
@media print {
  html, body {
    width: 91.44mm; // set appropriately
    height: 53.34mm; // set appropriately
  }
  /* ... the rest of the rules ... */
}

This tells the browser what page size it should go to and what width and height in mm is required of the actual page.

What you also need to remember is that the page size to print will always be the same as the paper that the printer is loaded with.

• CSS3 Page Documentation