Set printer paper size through css

Question

My printer's default size is A4, and I need to print payslips in size 8.5inx5.5in using the old dot matrix printer. I tried to set every payslip DIV in a fixed height,

width: 175.6mm;
height: 123.7mm;
margin-left: auto;
margin-right: auto;

Although it fits the payslip size perfectly, but after printed, the paper will keep rolling until the end of it because payslip paper is all joined, unlike A4. And I do not wish to make any changes to the printer paper size, so I set:

@media print {
  @page {
     size: 8.5in 5.5in;
     size: portrait;
  }
}

but the print preview of Google Chrome still shows this:

Actually, is it possible to do so? Or is there any way to force the printer to stop printing after payslip is printed to prevent it from rolling the paper? (which I think should be not possible)

P.S. I am using Google Chrome only.

**Updated:

I noticed the paper size will change after I choose to "Save as PDF",if I choose back my default printer,the paper size is incorrect again.

Emogeneemollient

I'm not too family with the size property, but you have two declarations for size, I'm guessing the first declaration is being overwritten by 'portrait' – Marchellemarcher

@Marchellemarcher Thanks for your reply.I did removed it just now,but the paper size still remain as A4 or Letter. – Emogeneemollient

I imagine the printer dialog would determine the paper size. Having paper size user-modifiable would be a stupid idea or “feature”. – Effusion

which version of chrome are you using? – Hosea

Answer 1

Maybe this works:

@media print {
  @page {
     size: 8.5in 5.5in;
     size: landscape;
  }
}

or

@media print {
  @page {
    size: 5.5in 8.5in ;
    size: landscape;
  }
}

Hosea

Interesting - setting the size in this way hides the orientation drop-down in Chrome's print dialogue. – Niu

Answer 2

Today I'm using Chrome 32.0.1700.107 m

The W3 CSS3 standard established for page sizes works great with the "SAVE AS PDF" option directly from Chrome in the printing interface. Remember that using a printer is very different in chrome's printing interface, as it uses the printers default size, but in the case of SAVE AS PDF option it DOES take the size that CSS established.

I have had years of trouble with different interfaces and go-around solutions for different proyects (for example: generating PDF's directly from server which was too heavy in processing and messy in code, or telling users to use windows printing interface, etc). This one is a great solution for me and seems to be definitive!

Now it's possible to create PDF's with the right size of paper using only CSS3 in the site, and no need of using third party software nor other kind of tricks.

In your case the best solution is to simply change the default paper size configured in the printer, which I adviced to the users with a little floating div that gave the advice and is hidden from printing. But as you do "not wish to make any changes to printer paper size", if you want to avoid making changes on the server side, you would require one more step from the person printig: first save the PDF and then send it to the printer from the PDF just created.

Roesch

Answer 3

Last time I checked, @media print is very poorly supported by the major browsers. I had a problem similiar to yours, and after weeks of trying I had to give up and go to a server-side pdf generation library (PDF4NET). If you need typeset, printed documents- I don't think HTML is going to do the trick.

Scarce

Answer 4

It worked for me just like this:

@page {
  size: <%= @size_card[0] %>cm  <%= @size_card[1] %>cm;
  margin: 0;
}

I tried like you are saying with a second size property for "landscape" or "portrait" but it overrides the last so it doesn't need since you are saying already what is height and what is width.

Escadrille

Answer 5

I think browser has limited access to the setting of the Printer.it is executes by both operating system and Printer Driver(by selecting paper source as tractor feeder or margins as customize).

Miki

Answer 6

this is working for me on the latest Chrome Version 104.0.5112.81 (Official Build) (64-bit) for paper-size CR-80 (ID card size)

@media print {
  @page {
     size: 86mm 54mm;
     margin: 0;
  }
}

Latinism