CODEWITHSUNDEEP
cssprinting
RedCrusador
RedCrusador

Reputation: 705

Print page to div sizing

I am developing an application to design a poster, at the moment I have been thinking about the CSS and wrote a little demo to see how I could output standard page sizes in different orientations.

I need to show a preview window in a shopping detail page and then at a later stage generate a PDF from the DIV (to think about later)

I am stuck on how to scale down the page and translate into pixels. Are there any JS libraries to use to be able to convert say a A4 page (21cm/29.7cm) @ 300dpi into a div max width 500px @ 72dpi for example? I would expect around 20 different sizes of page.

I have either worked in Print or Web but trying to join them up is a little confusing. I have a code snippet of a basic A4, A3 page sizing in CSS for A4,A3 and A5.

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
page[size="A3"] {
  width: 29.7cm;
  height: 42cm;
}
page[size="A3"][layout="portrait"] {
  width: 42cm;
  height: 29.7cm;  
}
page[size="A5"] {
  width: 14.8cm;
  height: 21cm;
}
page[size="A5"][layout="portrait"] {
  width: 21cm;
  height: 14.8cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}
<page size="A4"></page>
<page size="A4"></page>
<page size="A4" layout="portrait"></page>
<page size="A5"></page>
<page size="A5" layout="portrait"></page>
<page size="A3"></page>
<page size="A3" layout="portrait"></page>

Upvotes: 0

Views: 1544

Answers (1)

RedCrusador
RedCrusador

Reputation: 705

Not having an answer here is what I found out myself;

A4 @300 dpi is 21cm x 29.7cm 8.268 inches x 11.693 inches Now my break through was to use inches for the page size as on screen we use DPI - Dots per Inch. Doing the conversion from a Metric page to a imperial DPI was confusing things even more (although its perfectly possible to convert the units)

So it’s simply;

72 dpi (screen resolution) X 8.268 inch (page width) = 595.296px
72 dpi (screen resolution) X 11.693 inch (page width) = 841.896px

To convert into a print ready print we need to scale up to 300 DPI as 72 goes into 300 4.166666666666667 times we need to multiply the original size by this number so;

595.296px x 4.166666666666667 = 2480.4px 
841.896px x 4.166666666666667 = 3507.9px

In CSS I can use the transform CSS command to reduce the size of the div proportionately to fit in a 500px space and use this for a fluid layout design which will scale in both directions.

Upvotes: 1

Related Questions