Como criar uma página HTML em páginas de tamanho de papel A4?

388

É possível fazer uma página HTML se comportar, por exemplo, como uma página de tamanho A4 no MS Word?

Essencialmente, quero poder mostrar a página HTML no navegador e descrever o conteúdo nas dimensões de uma página de tamanho A4.

Por uma questão de simplicidade, suponho que a página HTML contenha apenas texto (sem imagens etc.) e não haverá <br>tags, por exemplo.

Além disso, quando a página HTML é impressa, ela sai como páginas de papel em tamanho A4.

Zabba
fonte
11
O verdadeiro "HTML para impressão" é comig! Veja todo o histórico em stackoverflow.com/q/10641667/287948 e o módulo de fragmentação CSS nível 3 do W3C , que está chegando!
Peter Krauss
Qual era a intenção de fazer isso? Estão saindo do MS Office para tecnologias da web? Pelo menos é o que estou tentando, mas ainda preciso de algumas sugestões de como . Resposta que terminaria a história que foi iniciada por esta pergunta.
Stefan

Respostas:

318

Há tempos, em novembro de 2005, o AlistApart.com publicou um artigo sobre como eles publicaram um livro usando nada além de HTML e CSS. Veja: http://alistapart.com/article/boom

Aqui está um trecho desse artigo:

CSS2 tem uma noção de mídia paginada (pense em folhas de papel), em oposição a mídia contínua (pense em barras de rolagem). As folhas de estilo podem definir o tamanho das páginas e suas margens. Os modelos de página podem receber nomes e os elementos podem indicar em que página nomeada eles desejam imprimir. Além disso, os elementos no documento de origem podem forçar quebras de página. Aqui está um trecho da folha de estilos que usamos:

@page {
   size: 7in 9.25in;
   margin: 27mm 16mm 27mm 16mm;
}

Tendo uma editora sediada nos EUA, recebemos o tamanho da página em polegadas. Nós, europeus, continuamos com medições métricas. CSS aceita ambos.

Depois de configurar o tamanho e a margem da página, precisamos garantir que haja quebras de página nos lugares certos. O trecho a seguir mostra como as quebras de página são geradas após os capítulos e apêndices:

div.chapter, div.appendix {
    page-break-after: always;
}

Além disso, usamos CSS2 para declarar páginas nomeadas:

div.titlepage {
  page: blank;
}

Ou seja, a página de título deve ser impressa em páginas com o nome "em branco". O CSS2 descreveu o conceito de páginas nomeadas, mas seu valor só se torna aparente quando os cabeçalhos e rodapés estão disponíveis.

De qualquer forma…

Como você deseja imprimir A4, precisará de diferentes dimensões, é claro:

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

O artigo divide-se em coisas como definir quebras de página etc. para que você possa ler isso completamente.

No seu caso, o truque é criar o CSS impresso primeiro. A maioria dos navegadores modernos (> 2005) suporta zoom e já poderá exibir um site com base no CSS impresso.

Agora, você quer fazer com que a exibição na Web pareça um pouco diferente e adaptar todo o design para caber na maioria dos navegadores (incluindo os antigos, anteriores a 2005). Para isso, você precisará criar um arquivo CSS da Web ou substituir algumas partes do seu CSS impresso. Ao criar CSS para exibição na Web, lembre-se de que um navegador pode ter QUALQUER tamanho (pense: "móvel" até "TVs de tela grande"). Significado: para o CSS da web, é melhor definir a largura da página e a largura da imagem usando uma largura variável (%) para suportar o maior número possível de dispositivos de exibição e clientes de navegação na web.

EDIT (26-02-2015)

Hoje, deparei-me com outro artigo mais recente na SmashingMagazine, que também se dedica ao design para impressão em HTML e CSS ... apenas no caso de você poder usar outro tutorial.

EDIT (30-10-2018)

Foi trazido a minha atenção em que sizenão é CSS3 válida, que é realmente correto - eu simplesmente repetiu o código citado no artigo, que (como observado) era bom CSS2 de idade (o que faz sentido quando você olha para o ano o artigo e esta resposta foi publicada pela primeira vez). De qualquer forma, aqui está o código CSS3 válido para sua conveniência de copiar e colar:

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

Caso você realmente precise de pixels ( você deve evitar o uso de pixels ), precisará escolher o DPI correto para impressão:

  • 72 dpi (web) = 595 x 842 pixels
  • 300 dpi (impressão) = 2480 x 3508 pixels
  • 600 dpi (impressão de alta qualidade) = 4960 x 7016 pixels

No entanto, evitaria o aborrecimento e simplesmente usaria cm(centímetros) ou mm(milímetros) para dimensionar, pois isso evita falhas de renderização que podem surgir dependendo do cliente que você usa.

e-sushi
fonte
11
Obrigado por atualizar esta resposta para atender aos padrões atuais!
Jumps4fun
@ A.com Não há px, pois isso dependeria do DPI ... e é por isso que o CSS suporta essas unidades de medida óbvias chamadas cmet al. Eu aconselho você a ler os artigos vinculados e / ou pelo menos a minha resposta. Ao fazer isso, você perceberá rapidamente que sua pergunta realmente não faz sentido. Além disso, você pode postar sua pergunta como uma nova pergunta se as coisas ainda não estiverem claras. Este é um site de perguntas e respostas, não um fórum. \ o /
e-sushi
67

Seria bastante fácil forçar o navegador a exibir a página com as mesmas dimensões de pixel que A4. No entanto, pode haver algumas peculiaridades quando as coisas são renderizadas.

Supondo que seus monitores exibam 72 dpi, você pode adicionar algo como isto:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>
Tim McNamara
fonte
19
Seguindo a sugestão de Will Dean (que faz muito sentido) usando milímetros, você pode forçar o navegador a calcular a largura / altura do pixel: body {height: 420mm; largura: 297mm; ...}
Tim McNamara
49
A4 é na verdade 210x297 mm.
fouronnes 21/10
8
Então, finalmente, um retrato DINA4:body { height:297mm; width:210mm; margin-left:auto; margin-right:auto; }
daVe 7/08/14
11
Feito um bom trabalho sobre isso agora e, embora as dimensões 210x297 sejam boas, elas não devem ser consideradas como um ajuste absoluto para uma página A4. Um bom teste é imprimir-> PDF diretamente do Chrome e rolar pelas miniaturas da página de visualização; mesmo sem margens definidas, a altura total deve ser reduzida para evitar o excesso -> que faz com que todas as páginas com números pares fiquem em branco.
Cbmtrx 11/01/2015
36

O tamanho A4 é 210x297mm

Assim, você pode definir a página HTML para caber nesses tamanhos com CSS:

html,body{
    height:297mm;
    width:210mm;
}
zurfyx
fonte
E se tivermos conteúdo dinâmico que pode ter até 3-4 ou mais páginas?
jazzbpn
24

Crie uma seção com cada página e use o código abaixo para ajustar margens, altura e largura.

Se você estiver imprimindo no tamanho A4.

Então usuário

Size : 8.27in and 11.69 inches

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}

div.Section1 {
    page: Section1;
} 

em seguida, crie uma div com todo o seu conteúdo.

<div class="Section1"> 
    type your content here... 
</div>

ou

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin-left: 2em; 
    margin-right: 2em;
}

.page {
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;
}
Pir Abdul
fonte
Tem certeza de que está funcionando? Não consegui reproduzir isso nas versões mais recentes do Firefox e Chrome.
Dan7
sim, principalmente estou desenvolvendo o chrome ... funcionando bem comigo.
precisa
3
Não consigo @page Section1trabalhar com o Chrome 41.0.2272.77. Você está realmente certo de que a sua resposta funciona? Tente, por exemplo, visitar data:text/html,<style>@page x{size:100pt 200pt}</style><div style="page:x">x</div>e abrir uma visualização de impressão. Não vejo diferença entre isso e data:text/html,x. Quando substituo @page xpor @page, ele funciona, mas esse não é um seletor específico de página.
Rob W
Para aqueles que não estão acostumados a colocar CSS em documentos (como eu no momento da redação), coloque esse código nas tags <style> </style> e chame a div (por exemplo, <div class = page> Coisas </ div > <div class = page> Mais coisas </div>) onde "Coisas" e "Mais coisas" são conteúdos que devem estar contidos em uma única página.
mkingsbu
16

Eu usei o HTML para gerar relatórios que são impressos corretamente em tamanhos reais em papel real.

Se você usar com cuidado mm como suas unidades no arquivo CSS, deverá ficar bem, pelo menos para páginas únicas. As pessoas podem estragar tudo, alterando o zoom de impressão no navegador.

Parece que me lembro que tudo o que estava fazendo era uma página, então não precisei me preocupar com paginação - isso pode ser muito mais difícil.

Will Dean
fonte
14

Eu vi essa solução depois de pesquisar no google, procure "A4 CSS page template" (codepen.io). Ele mostra uma área de tamanho A4 (A3, A5, também em retrato) no navegador, usando a tag <page>. Dentro dessa tag, o conteúdo é mostrado, mas a posição absoluta ainda é em relação à área do navegador.

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}
<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>

Isso funciona para mim sem nenhuma outra biblioteca css / js a ser incluída. Funciona para navegadores atuais (IE, FF, Chrome).

Cas Knook
fonte
Usar este exemplo com o FF 53.0.3 e colocar duas páginas de paisagem uma após a outra não funciona. Parece bom na exibição normal, mas ao selecionar Visualização de impressão, ele se expande para 3 páginas.
Lofihelsinki
Não quero arrastar vacas velhas fora da trincheira, mas acredito box-shadow deve ser box-shadow: none;e não 0
NoobishPro
suas obras para mim e eu tenho que mudar a altura
Jomal Johny
E se tivermos conteúdo dinâmico que pode ter até 3-4 ou mais páginas?
jazzbpn
11
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

No seu normal style.css:

table.tableclassname {
  width: 400px;
}

No seu print.css:

table.tableclassname {
  width: 16 cm;
}
Jacob
fonte
10

PPI e DPI não fazem absolutamente nenhuma diferença em como um documento será impresso em um navegador. a impressora não obtém informações sobre a inclinação dos pontos da tela ou o DPI das imagens, etc. o processador de impressão do navegador aumentaria o DPI das imagens de algo bastante baixo, como 72 dpi, para qualquer DPI do restante do documento. digamos que a imagem é exibida com meia página de largura e, então, cerca de 4 "de largura fisicamente. a largura de pixel da imagem seria de aproximadamente 300px para ser exibida corretamente no navegador. no momento em que é impressa em uma 300DPI nominal, o processador adicionou pixels e a imagem aumentará para cerca de 1200 px, que a 300 DPI é de 4 ".

quando se trata de elementos vetoriais ou não baseados em pixels, como texto, a impressora escolhe seu próprio DPI no driver, que não se relaciona à altura dos pontos da tela ou à largura do navegador, etc. Se o navegador tiver 3000px de largura, o processador de impressão quebrará o texto conforme apropriado.

eis o que dificulta a criação de displays de impressão: cada navegador e impressora interpretam o tamanho do texto (pt, em, px) e o espaçamento à sua maneira. dependendo de qual impressora, navegador e talvez até o sistema operacional usado, você terá uma quantidade diferente de linhas e caracteres por página. portanto, mesmo que você teste no seu computador usando o navegador e a impressora e descubra que pode exibir o texto em uma caixa de 640 x 900 pixels e que seja perfeito para impressão, o próximo usuário que tentar imprimir poderá imprimir de maneira diferente. não há realmente nenhuma maneira de forçar cada impressora e navegador a obter o mesmo sempre.

esqueça os pixels e muito mais o DPI, a única coisa em que você pode usar os pixels é definir uma largura de tabela que simule a largura de uma área imprimível na impressora. Nesse caso, descobri que 640px de largura está próximo.

Quintin Humphreys
fonte
Leia muitas páginas e todas sugerem que o aumento do DPI resultará em um tamanho menor ao imprimir (3000px / 300dpi = 10 polegadas). Porém, ao imprimir no meu navegador Chrome, 600 DPI e 1200 DPI levam exatamente ao mesmo tamanho no papel. Fiquei realmente confuso até ler isso!
Wang Sheng
10

Procurando por um problema semelhante, achei isso - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 é um formato de documento, como uma imagem de tela que depende da resolução da imagem, por exemplo, um documento A4 redimensionado para:

  • 72 dpi (web) = 595 x 842 pixels
  • 300 dpi (impressão) = 2480 x 3508 pixels (este é "A4" como eu o conheço, ou seja, "210 mm x 297 mm a 300 dpi")
  • 600 dpi (impressão) = 4960 x 7016 pixels
Wojciech Bednarski
fonte
8

Sei que esse assunto é bastante antigo, mas quero compartilhar minha experiência sobre esse tópico. Na verdade, eu estava pesquisando um módulo que pode me ajudar com meus relatórios diários. Estou escrevendo algumas documentações e alguns relatórios em HTML + CSS (em vez de Word, Latex, OO, ...). O objetivo seria imprimi-los em papel A4 para compartilhá-lo com amigos, ... Em vez de pesquisar, decidi fazer uma pequena e divertida sessão de codificação para implementar uma biblioteca simples que pudesse lidar com "páginas", número de página, resumo, cabeçalho , rodapé, .... Finalmente, eu fiz isso em ~~ 2h e sei que essa não é a melhor ferramenta de todos os tempos, mas está quase ok para o meu propósito. Você pode dar uma olhada neste projeto no meu repositório e não hesite em compartilhar suas idéias. Talvez não seja o que você está procurando em 100%, mas acho que este módulo pode ajudá-lo.

Basicamente, crio uma página do corpo "width: 200mm;" e recipiente de altura: 290mm (menor que A4). Então eu usei quebra de página: sempre; para que a opção "imprimir" do navegador saiba quando dividir as páginas.

repo: https://github.com/kursion/jsprint

Yves Lange
fonte
6

Tecnicamente, você poderia, mas seria preciso muito trabalho para que todos os navegadores imprimissem a página exatamente como ela é exibida na tela. Além disso, a maioria dos navegadores força o URL, a data de impressão e a numeração das páginas na impressão, o que nem sempre é desejado. Isso não pode ser alterado ou desativado.

Em vez disso, aconselho a criar um PDF com base no conteúdo da tela e servir o PDF para download e / ou impressão. Embora a maioria das bibliotecas disponíveis em PDF seja paga, existem algumas alternativas gratuitas disponíveis para criar PDFs básicos.

Prutswonder
fonte
5

Eu usei 680px em relatórios comerciais para imprimir em páginas A4 desde 1998. Os 700px não cabem corretamente, dependendo do tamanho das margens. Os navegadores modernos podem reduzir a página para caber na página da impressora, mas se você usar 680 pixels, imprimirá corretamente em quase todos os navegadores.

Isso é HTML para você Execute o snippet de código e veja o resultado:

window.print();
<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>

JSFiddle:

https://jsfiddle.net/ajofmm7r/

lynx_74
fonte
qual é a altura de uma página inteira em px?
Khaverim
4

Muitas maneiras de fazer:

html,body{
    height:297mm;
    width:210mm;
}


html,body{
    height:29.7cm;
    width:21cm;
}

html,body{
    height: 842px;
    width: 595px;
}
Nalan Madheswaran
fonte
3

É perfeitamente possível definir seu layout para assumir as proporções de uma página a4. Você só precisa definir a largura e a altura de acordo (possivelmente verifique com window.innerHeightewindow.innerWidth embora não tenha certeza se isso é confiável).

A parte complicada é com a impressão de A4. Javascript, por exemplo, suporta apenas a impressão de páginas rudimentares com o window.printmétodo Como o @Prutswonder sugeriu, criar um PDF a partir da página da web provavelmente é a maneira mais sofisticada de fazer isso (além de fornecer documentação em PDF em primeiro lugar). No entanto, isso não é tão trivial quanto se poderia pensar. Aqui está um link que contém uma descrição de uma classe Java de código aberto para criar PDFs em HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

Obviamente, depois de criar um PDF com proporções A4, ele resultará em uma impressão A4 limpa da sua página. Se vale a pena investir tempo é outra questão.

FK82
fonte