Member Avatar for earlxph8

hi guys,

im using this CSS code to create a page like an A4 size paper

.box
{
width:700px;
height:700px;
padding:30px;
border:1px solid black;
margin:1px;
display:table;
}

my problem is:

when i print preview, even if i set settings of printer to reduce and fit, still it makes 2 pages, what script should i make so i can make a fix width and length the same as A4 size paper, i saw some articles that there is no specific pixels that equals to A4 size. but then i just want to make 1 page output.

Thanks.

  • 2 Contributors
  • 2 Replies
  • 211 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by earlxph8

Dani AI

Generated

was right to notice pixels don't map reliably to printed paper; 's suggestion to use a print stylesheet is the right direction. For predictable single-page output you should target physical paper units and the CSS paged media rules rather than fixed pixel boxes. Also keep in mind browser print margins, headers/footers and automatic scaling can push content onto a second sheet even when your element looks the right size on screen.

Try a focused print stylesheet that declares A4 and sizes the printable area in millimetres. Using box-sizing: border-box keeps padding and borders inside the declared dimensions so you don't accidentally overflow:

@page {
  size: A4;
  margin: 10mm;
}

@media print {
  html, body { margin: 0; padding: 0; }

  .paper {
    box-sizing: border-box;
    width: 190mm;   /* 210mm - 2 * 10mm page margin */
    height: 277mm;  /* 297mm - 2 * 10mm page margin */
    padding: 10mm;
    border: 1px solid #000;
    overflow: hidden;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

Troubleshooting: set print-preview scale to 100% and test with browser margins set to "none" if available; disable browser headers/footers in the print dialog (CSS cannot reliably remove them); remove large fixed heights or extra body margins; check images or large fonts that might force overflow; and use page-break-* rules for multi-page control. If cross-browser fidelity is critical (or users can’t be told to change dialog options), render a PDF at A4 server-side or with a headless browser—PDF output guarantees exact paper sizing.

Recommended Answers

All 2 Replies

Member Avatar for tomparker

Just some basics here, but you are going to want to set up a print style sheet, i.e. print.css. Add it to your html as such:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Then as a minimum just for your issue try this:

.box {
width: 100%; margin: 0; float: none;
}

I haven't tested this, but it might get you on the right track. See this article for more info: http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.