Set printer paper size through css

Question

My printer default size is A4,and I need to print payslip 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 fit the payslip size perfectly,but after printed,the paper will keep rolling until end of it because payslip paper are all joined unlike A4. And I do not wish to make any changes to printer paper size,so I set:

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

but the print preview of Google Chrome still showing this:

enter image description here

Actually is it possible to do so?Or is there any way to force printer stop printing after payslip printed to prevent it from keep 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.

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' — Phix, Nov 10 '13 at 19:44
@Phix Thanks for your reply.I did removed it just now,but the paper size still remain as A4 or Letter. — Irene Ling, Nov 10 '13 at 19:49
I imagine the printer dialog would determine the paper size. Having paper size user-modifiable would be a stupid idea or “feature”. — Martin Bean, Nov 10 '13 at 20:10

score 11 · Answer 1 · answered Jun 21 '15 at 23:45

11

maybe this work.

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

or

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

answered Jun 21 '15 at 23:45

pixparker

2,903
26
23

3

Interesting - setting the size in this way hides the orientation drop-down in Chrome's print dialogue. – CrazyTim Jul 01 '15 at 11:47

DavidTaubmann · Answer 2 · 2014-02-17T18:37:35.867

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.

score 4 · Answer 3 · answered Nov 14 '13 at 22:02

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.

score 2 · Answer 4 · answered Jun 11 '17 at 17:40

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.

score 0 · Answer 5 · answered Apr 19 '18 at 06:25

0

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).

answered Apr 19 '18 at 06:25

RAJMOHAN

515
1
5
14

score 0 · Answer 6 · answered Aug 11 '22 at 04:39

0

this is working for me on 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;
    }
}

answered Aug 11 '22 at 04:39

web.bluffer

121
2
10

Set printer paper size through css

6 Answers6