0

Pretendo fazer um layout de um livro, e existem milhares de informações. Eu consigo buscá-las em uma página e adicioná-las no BD. Posteriormente iria puxá-las, fazer alguns cálculos, e retorná-las em milhares de tópicos na tela.

Nessa tela, haveria um botão de gerar um PDF em 300 dpi.

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.

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)

3
  • Rapaz dei uma atualizada sobre a primeira parta da sua pergunta, acho que vai te ajudar a definir qual imagem usar na impressão!
    – hugocsl
    Commented 18/10/2018 às 11:51
  • Meu caro, encontrei isso que ajuda a entender a resolução atual da tela: developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution , tentei usar ZOOM, mas não da certo. Eu poderia criar um (elemento) com 15 x 21 cm, mas converteria em 300 ppi, pois minha tela é de 96ppi, ou seja, ficaria enorme, e depois com zoom, eu ajustaria a minha tela para os 96ppi, mas na hora da impressão eu manteria os 300 ppi ... Mas pelo que vejo não é possível...
    – abcd
    Commented 18/10/2018 às 18:50
  • 1
    Acho que pode ser possível usando transform:scale() na proporção de 300/72 = 4.16, logo transform:scale(-4.16), deveria ter na tela algo de 300dpi, mas no tamanho de 72dpi. Só que eu acho isso "besteira" pq a impressora sempre imprime os textos na resolução máxima, pois o texto não deixa de ser um vetor, por isso existe tantas Icon Fonts por ai tipo a FontAwesome ou Material Icon! Fonte é vetor, e veto não precisa preocupa com resolução. A não ser que vc transforme o texto e imagem pra depois imprimir, o que não faria sentido algum...
    – hugocsl
    Commented 18/10/2018 às 19:00

1 Resposta 1

1

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/

3
  • Essa da impressão não conhecia, ótima dica. Encontrei algo, mas poucas informações: image-resolution: 300dpi;
    – abcd
    Commented 17/10/2018 às 20:07
  • 1
    @abcd Para imagens na tela, que é usado quando a tela é retina, vc pode fazer assim: css-tricks.com/snippets/css/retina-display-media-query mas isso é para display na tela, para controlar na impressão vc teria que ter uma imagem em baixa para tela, mas no @ media print {} vc coloca uma imagem com 300dpi, tem que ver como criar essa regra e fazer um teste de impressão pra ver se da qualidade mesmo!
    – hugocsl
    Commented 17/10/2018 às 20:11
  • 1
    @abcd sobre o image-resolution vou dar uma pesquisada, se eu conseguir algo novo vou editar a resposta ;)
    – hugocsl
    Commented 17/10/2018 às 20:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .