CODEWITHSUNDEEP
htmlcssgoogle-chromemedia-queriesprinting-web-page
Irene Ling
Irene Ling

Reputation: 1981

Set printer paper size through css

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:

enter image description here

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.

Upvotes: 20

Views: 93291

Answers (6)

Ramon Marques
Ramon Marques

Reputation: 3264

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.

Upvotes: 2

Nisar Khalid
Nisar Khalid

Reputation: 170

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;
  }
}

Upvotes: 0

pixparker
pixparker

Reputation: 3511

Maybe this works:

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

or

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

Upvotes: 12

RAJMOHAN
RAJMOHAN

Reputation: 515

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

Upvotes: 0

DavidTaubmann
DavidTaubmann

Reputation: 3360

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.

Upvotes: 6

imjosh
imjosh

Reputation: 4872

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.

Upvotes: 4

Related Questions