11

i have a web page that encoded in html and css. the size of the web page is of A4 Page (300dpi) = 2480 X 3508 (PX).

the problem is that when i print my web page it's printing in 72/96dpi resolution and print 7 pages instead of 1, and i want that the printer will print my web page in 300dpi resolution.

some code in CSS, HTML, JAVASCRIPT or something that can help me?

thanks.

JJJ
  • 32,902
  • 20
  • 89
  • 102
user3502020
  • 139
  • 1
  • 1
  • 7

5 Answers5

9

You can use CSS just like:

@media print {
    @page {
        size: 210mm 297mm;
    }
}

or with px:

@media print {
    @page {
        size: 2480px 3508px;
    }
}

https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types

iugo
  • 415
  • 4
  • 8
  • 1
    This is the correct answer for 2022. This way you can define your expected page size in px and let the browser do the math with resolution and DPI. – Ondra Koupil Sep 12 '22 at 14:24
2

HTML/CSS are vector graphics. You have the css measurement unit "px" (which is always 72ppi and might therefore be a bit misleading) but it's not actually raster graphics - and it should hopefully be treated like vectors by the printer software. If you find lines, text and such printed in 72dpi you can be pretty sure the problem is your printer/renderer software. Try another browser or save it to PDF first (I know Chrome can do that natively).

However since the CSS measurement unit "px" is 72ppi, raster graphics (=png, jpg and gif images) are always treated as 72ppi - even if they are saved in another resolution. But you can force images to the desired resolution by resizing them. If I have an image that's 5x5 centimeters (=2x2 inches) I need to save it as 600x600px, but set its CSS width property to 144px (which is width*(72/300)) to make it look like 5 centimeters on the website.

If the images are resized to the proper resolution you should be able to print it at 300dpi without any problems - especially if you save it to a pdf first. Otherwise it's most likely the printer/printer software.

Keep in mind that web is not print and a webpage can't be expected to look exactly alike on screen and print - and that's the whole point.If that's what you're looking for you should just go with PDF instead.

Johan Palmfjord
  • 671
  • 4
  • 15
0

I made something similar using pdfkit but i think it has to be used with python or more specific i used it with django and it worked fine for me and created a 300dpi pdf Try this

options = { 'page-size': 'Letter', 'margin-top': '0.75in', 'margin-right': '0.75in', 'margin-bottom': '0.75in', 'margin-left': '0.75in', 'encoding': "UTF-8", 'dpi': '300', 'custom-header' : [ ('Accept-Encoding', 'gzip') ] 'cookie': [ ('cookie-name1', 'cookie-value1'), ('cookie-name2', 'cookie-value2'), ], 'no-outline': None }

pdfkit.from_url('http://google.com', 'out.pdf', options=options)

https://github.com/JazzCore/python-pdfkit/blob/master/README.rst

Karan Goyal
  • 447
  • 5
  • 10
  • Link-only answers are generally [frowned upon](http://meta.stackexchange.com/a/8259/204922) on Stack Overflow. In time it is possible for links to atrophy and become unavailable, meaning that your answer is useless to users in the future. It would be best if you could provide the general details of your answer in your actual post, citing your link as a reference. – Abhishek Bhagate May 30 '20 at 18:29
-1

Unfortunately, web resolution is 72 dpi. I believe this is an inherent setting in the browsers. If you adjust the browser's setting, or the printer's setting to "fit to page" when printing you might have some success.

Phlume
  • 3,075
  • 2
  • 19
  • 38
  • 1
    This is somewhat incorrect. There is no 'web resolution'. Browsers, when printing, may translate to '72dpi' for printing. – DA. Jul 21 '15 at 19:25
  • yes, @DA. You are correct. There is a myth surrounding it as the resolution relates to screen vs. print. The "web resolution" that a screen generally displays for appropriate/clean "screen to print" translation is 72. A nice article explaining in more detail, as well as discussing the myth is located here: http://www.photoshopessentials.com/essentials/the-72-ppi-web-resolution-myth/ – Phlume Jul 22 '15 at 15:58
-2

Sorry for late response to print a ID card on 300 DPI in web page you need to convert your web page to PDF on 300 DPI.

For example in case of PHP and dompdf

    $dompdf = new Dompdf(array('enable_remote' => true));
    $dompdf->set_option('dpi', 300);
    $dompdf->loadHtml($html);
    $dompdf->render();
    $dompdf->stream($filename.'.pdf',array('Attachment'=>0));
user3370096
  • 5
  • 3