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

.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;
   }

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;
   }

• javascript
• php
• html
• css

Share Improve this question Follow edited Aug 24, 2015 at 15:48 Sid 46366 silver badges1414 bronze badges asked Aug 24, 2015 at 15:39 jonahjonah 21344 silver badges1616 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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