Screen resolution (DPI) css

Question

I intend to do a layout of a book, and there are thousands of information. I can look them up on a page and add them to the comic book. Later he would pull them, do some calculations, and return them to thousands of topics on the screen.

On this screen, there would be a button to generate a PDF in 300 dpi.

1º - So, I wonder, if in CSS we have the possibility to set the resolution of the site, as it is done in images, at 300 pixels per inch.

2º - You can create with css pages in A5 size. By clicking on print, the browser understands that it corresponds to a A5 sheet (21 x 15 cm)

Answer 1

1º - So, I would like to know, if in CSS we have the possibility of set the site resolution, as it is done in images, at 300 pixels per inch.

About the first part of the question I don’t know how to answer you precisely, but I think this has more to do with the API that will generate the PDF than with the screen itself. Mainly because we are talking about text and not necessarily image...

About the images I initially thought about srcset, but for this it will not serve, because it determines the "quality" of the image depending on the width of the screen or the pixel density of the screen, not the printing. This means that it determines the image in the @media screen and not in the @media print.

So to adjust the resolution of your image to print you have two options. The first one is the easiest and I believe it is more crossbrowser and it will give you less problems is to have 2 images. A low resolution that only appears on the screen on @media screen, and another img high resolution that only appears in @media print

Using the property image-resolution: 300dpi;

See that:
Official source W3C: https://www.w3.org/TR/css3-images/#image-Resolution

Printers tend to have substantially higher resolution than computer monitors; because of this, an image that looks good on the screen may appear pixelated when printed. The estate image-resolution can be used to embed a high resolution image into the document and maintain an appropriate size, ensuring eye-catching display on screen and paper:

img.high-res {
    image-resolution: 300dpi;
}

Soon we’ll have something like this: OBS: Note that we have two tags of IMG below, but only one of them appears, which is the image with the class .screen, already in printing only the class image .print The other one goes away!

.print {
    image-resolution: 300dpi;
}
@media only screen {
  .print {
    display: none;
  }
}
@media only print {
  .screen {
    display: none;
  }
}

<div>
  <img class="screen" src="https://placecage.com/100/100" alt="essa imagem só aparece na tela">
  <img class="print" src="https://placecage.com/200/200" alt="essa imagem só aparece na impressão">
</div>

TIP: W3C has in its documentation the option to use values in DPI to treat images within a media query, for example

@media print and (min-resolution: 300dpi) { … }

Source: https://www.w3.org/TR/css3-mediaqueries/#Resolution

But keep in mind that the print settings are made by the user, like whether the print will be colored or not, or whether it will be economical or not. So it is difficult to know if this resolution rule will work if the user has changed the printer settings...

---

About that already:

2º - You can create with css pages in A5 size. By clicking on print, the browser understands that it corresponds to a A5 sheet (21 x 15 cm)

You can use the at-rule @page and set the page size:

@page {
  size: A5;
}

Or

@page {
  size: 15cm 21cm;
}

To control the margins you can do so

@page :left {
  margin-left: 4cm;
  margin-right: 3cm;
}

@page :right {
  margin-left: 3cm;
  margin-right: 4cm;
}

TIP: Vc can also control the orientation of the page vertically and horizontally (Landscape / portrair): https://www.w3.org/TR/css3-page/#page-size

@page {
    size: A5 landscape;
}

This answer may interest you too: Decrease tables to fit on a page

---

Official documentation W3C: https://www.w3.org/TR/css3-page/#at-page-Rule

Smash Magazine CSS Printing Article that you might be interested in: https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/