I'm currently working on a project that involves printing a single div from my webpage. However, I've encountered some issues with the @page tag not affecting the print output as expected. I attempted to manually set the dimensions of the element I want to print, but the printed content does not align with the specified measurements.
Here is a snippet of my CSS code:
@media print {
@page {
width: 3.5in;
height: 2in;
}
body * {
visibility: hidden;
border: 1px solid black;
}
#ticket, #ticket * {
visibility: visible;
}
#ticket {
position: absolute;
left: 0;
top: 0;
background-color: #ff0000;
border: 1px solid yellowgreen;
width: 3.5in;
height: 2in;
}
}
I've tried various approaches such as using @page { size: A3 } but have not been successful in achieving the desired outcome. My goal is to print content with actual physical dimensions and ensure that the print settings interpret the stylesheet correctly when the print command is initiated.
I am uncertain if this is feasible or if there are simpler methods to accomplish this task.
Thank you for any assistance provided.