1º - Assim, gostaria de saber, se no CSS temos a possibilidade de
setar a resolução do site, como é feito em imagens, em 300 pixels por
polegada.
Sobre a primeira parte da pergunta não sei te responder com precisão, mas acho que isso tem mais a ver com a API que vai gerar o PDF do que com a tela em si. Principalmente pq estamos falando de texto e não necessariamente de imagem...
Sobre as imagens inicialmente eu pensei no srcset
, mas para isso ele não vai servir, pois ele determina a "qualidade" da imagem dependo ta largura da tela ou da densidade de pixel da tela, não da impressão. Isso significa que ele determina a imagem no @media screen
e não no @media print
.
Então para ajustar a resolução da sua imagem para impressão vc tem duas opções. A primeira que é a mais fácil e acredito que é mais crossbrowser e que vai te dar menos problemas é ter 2 imagens. Uma em baixa resolução que só aparece na tela no @media screen
, e outra img
de alta resolução que só aparece no @media print
Usando a propriedade image-resolution: 300dpi;
Veja que:
Fonte oficial W3C: https://www.w3.org/TR/css3-images/#image-resolution
Impressoras tendem a ter resolução substancialmente maior do que monitores de computador; devido a isso, uma imagem que parece bem na tela pode parecer pixelada quando impressa. A propriedade image-resolution
pode ser usada para incorporar uma imagem de alta resolução no documento e manter um tamanho apropriado, garantindo a exibição atraente na tela e no papel:
img.high-res {
image-resolution: 300dpi;
}
Logo teremos algo tipo isso: OBS: Repare que temos duas tags de IMG
abaixo, mas só uma delas aparece, que é a imagem com a classe .screen
, já na impressão só a imagem classe .print
vai aparecer, a outra some!
.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>
DICA: A W3C tem em sua documentação a opção de usar valores em DPI
para tratar imagens dentro de um media query
, por exemplo
@media print and (min-resolution: 300dpi) { … }
Fonte: https://www.w3.org/TR/css3-mediaqueries/#resolution
Mas tenha em mente que as configurações de impressão são feitas pelo usuário, tipo se a impressão vai ser Colorida ou não, ou se vai ser em modo econômico ou não. Sendo assim é difícil saber se essa regra de resolução vai funcionar caso o usuário tenha mudado as configurações da impressora...
Já sobre isso:
2º - É possível criar com css páginas em tamanho A5. Ao clicar em
imprimir, o navegador entenda que corresponde a uma folha A5 (21 x 15
cm)
Vc pode usar a at-rule @page
e definir o tamanho da página:
@page {
size: A5;
}
Ou
@page {
size: 15cm 21cm;
}
Para controlar as margens vc pode fazer assim
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
DICA: Vc também pode controlar a orientação da página em vertical e horizontal (landscape / portrair): https://www.w3.org/TR/css3-page/#page-size
@page {
size: A5 landscape;
}
Essa reposta pote te interessar tb: Diminuir tabelas para caber em uma página
Documentação oficial W3C: https://www.w3.org/TR/css3-page/#at-page-rule
Artigo sobre impressão com CSS da Smash Magazine que pode te interessar: https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/