Qual é a largura segura em pixels para imprimir uma página da web?
Minha página inclui imagens grandes e quero ter certeza de que não serão cortadas quando impressas.
Eu sei sobre as diferentes margens do navegador e tamanhos de papel Carta EUA / DIN A4. Portanto, temos o tamanho de carta padrão e alguns valores de DPI padrão. Mas posso convertê-los em valores de pixel para especificar no widthatributo da imagem ?
Respostas:
Quanto a uma verdadeira “resposta universal”, não posso dar. Posso, no entanto, fornecer uma resposta simples e definitiva para alguns detalhes ...
670 PIXELS
Pelo menos essa parece ser uma resposta segura para produtos Microsoft. Li muitas sugestões, incluindo 675, mas depois de testar eu mesmo 670 foi o que eu descobri.
Todos os DPI, problemas de margem, diferenças de hardware à parte, esta resposta é baseada no fato de que se eu usar a visualização de impressão no IE9 (com margens padrão) - e DEFINIR O TAMANHO DE IMPRESSÃO PARA 100% em vez do padrão de "reduzir para caber" , tudo cabe na página sem ser cortado nesta largura.
Se eu enviar um e-mail em HTML para mim mesmo e recebê-lo com o Windows Live Mail 2011 (o que se tornou o Outlook Express) e imprimir a página com largura de 670 - novamente, tudo se encaixa. Isso é válido se eu enviar para uma cópia impressa real ou um arquivo MS XPS (impressão virtual).
Antes de experimentar, eu estava usando uma largura arbitrária de 700. Em todos os cenários mencionados acima, parte da página estava sendo cortada. Quando eu reduzi para 670, tudo se encaixou perfeitamente.
Quanto a como eu defino a largura - eu apenas usei uma tabela html primitiva “wrapper” e defini sua largura como 670.
Se você pode ditar o software do usuário final, essas questões podem ser diretas. Se você não puder (como geralmente é o caso, é claro), você pode testar detalhes como quais navegadores estão usando, etc. e codificar as soluções para os mais importantes. Entre o IE e o FF, você cobrirá literalmente cerca de 90% dos usuários da web. Coloque algum outro código para "todos os outros" que geralmente parece funcionar e dê o basta ...
Não é tão simples quanto parece. Acabei de me deparar com uma pergunta semelhante, e aqui está o que eu consegui: primeiro, um pequeno histórico sobre a wikipedia .
Em seguida, em CSS, para papel, eles têm pt, que é ponto, ou 1/72 polegada. Portanto, se você quiser ter o mesmo tamanho de imagem do monitor, primeiro você deve saber o DPI / PPI do seu monitor (geralmente 96, conforme mencionado no artigo da Wikipedia), depois convertê-lo para polegadas e depois convertê-lo para pontos (divida por 72).
Mas, novamente, os navegadores têm todos os tipos de problemas com conteúdo imprimível, por exemplo, se você tentar usar tags css flutuantes, os navegadores baseados no Gecko cortarão suas imagens no meio da página, mesmo se você usar quebra de página dentro: evitar ; em suas imagens (veja aqui, no sistema de rastreamento de bugs do Mozilla ).
Há (muito) mais informações sobre como imprimir a partir de um navegador neste artigo em A List Apart .
Além disso, você deve lidar com a largura "Reduzir para caber" na visualização da impressão e os vários tamanhos e orientações de papel.
Então, ou você apenas descobre um bom tamanho de imagem em polegadas, quero dizer, pontos, (7,1 "* 72 = 511,2 então width: 511pt; funcionaria para papel tamanho carta), independentemente dos tamanhos de pixel, ou larguras percentuais de largura e baseie suas larguras de imagem no tamanho do papel.
Boa sorte...
Uma solução para o problema que encontrei foi apenas definir a largura em polegadas. Até agora eu apenas testei / confirmei isso funcionando no Chrome. Funcionou bem para o que eu estava usando (para imprimir uma folha de 8,5 x 11)
@media print {
.printEl {
width: 8.5in;
height: 11in;
}
}
@media print, você pode definir aqueles. Você pode definir size: letterou size: A4. smashingmagazine.com/2015/01/designing-for-print-with-css
Para impressão, não defino nenhuma largura e removo quaisquer obstáculos que impeçam o layout de impressão de ter uma largura dinâmica. Ou seja, se você tornar a janela do navegador cada vez menor, nenhum conteúdo será cortado / oculto, mas o documento ficará mais longo. Assim, você pode ter certeza que o resto ficará a cargo do criador da impressora / pdf.
E os elementos com largura fixa, como imagens ou tabelas?
Opções em que posso pensar:
http://www.intensivstation.ch/en/css/print/
ou qualquer outro resultado do Google para combinações de: CSS, impressão, mídia, layout
Uma impressora não entende pixels, entende pontos (pt em CSS). A melhor solução é escrever um CSS extra para impressão, com todas as medidas em pontos.
Então, no seu código HTML, na seção head, coloque:
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
<img>tag um surroundig, <div>o div obtém largura e altura em pt e o img obtémwidth:100%; height:100%;
Duvido que haja um ... Depende do navegador, da impressora (físico máximo dpi) e do driver, do tamanho do papel como você disse (e talvez eu queira imprimir em papel B5 também ...), das configurações ( paisagem ou retrato?), além disso, você frequentemente pode alterar a escala (porcentagem), etc.
Deixe os usuários ajustar suas configurações ...
width:autoque irá ajustar a largura do conteúdo à largura do papel