Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Specifying phyiscal size in CSS (e.g. 2 inches) when printing a web page

Tags:

html

css

printing

Is there a reliable way to specify physical dimensions in CSS such that when the page is printed, my elements are at a specific size and position on the printed page?

I see that CSS has units for in and cm, but (not surprisingly) neither Firefox nor Chrome actually printed the box at 2x2 inches when I did the following:

.test {
    width: 2in;
    height: 2in;
    border: solid 1px #aaa;
}

Am I being too optimistic hoping that there is some way of specifying the size and having the browser adjust it's printing size based on the resolution of the printer etc?

Thanks.

like image 695
Matt Wilson Avatar asked Dec 15 '12 18:12

Matt Wilson


People also ask

How do you write a print page in CSS?

You can use CSS to change the appearance of your web page when it's printed on a paper. You can specify one font for the screen version and another for the print version. You have seen @media rule in previous chapters.

How do I print exact size in inches?

To change the print size use Image → Print Size to open the “Print Size” dialog. Select a size unit you are comfortable with, such as “inches”.

How set A4 size in HTML?

300 dpi (print) = 2480 X 3508 pixels (This is "A4" as I know it, i.e. "210mm X 297mm @ 300 dpi") 600 dpi (print) = 4960 X 7016 pixels.


1 Answers

Try adding margin: 0; padding: 0 to avoid any extra spacing.

like image 149
Dmitry Pashkevich Avatar answered Nov 08 '22 06:11

Dmitry Pashkevich