Come creare una pagina HTML in pagine in formato A4?

È possibile far sì che una pagina HTML si comporti, ad esempio, come una pagina in formato A4 in MS Word?

In sostanza, voglio essere in grado di mostrare la pagina HTML nel browser e delineare il contenuto nelle dimensioni di una pagina in formato A4.

Per semplicità, suppongo che la pagina HTML conterrà solo testo (senza immagini, ecc.) E che non ci saranno <br>tag, ad esempio.

Inoltre, quando la pagina HTML viene stampata, viene visualizzata come pagine di carta in formato A4.

Tempo fa, nel novembre 2005, AlistApart.com ha pubblicato un articolo su come hanno pubblicato un libro utilizzando nient'altro che HTML e CSS. Vedere: http://alistapart.com/article/boom

Ecco un estratto di quell'articolo:

CSS2 ha una nozione di supporti paginati (pensa ai fogli di carta), al contrario dei supporti continui (pensa alle barre di scorrimento). I fogli di stile possono impostare le dimensioni delle pagine e i loro margini. Ai modelli di pagina possono essere dati nomi ed elementi possono indicare su quale pagina nominata vogliono essere stampati. Inoltre, gli elementi nel documento di origine possono forzare le interruzioni di pagina. Ecco un frammento del foglio di stile che abbiamo usato:

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

Avendo un editore con sede negli Stati Uniti, ci hanno dato le dimensioni della pagina in pollici. Noi, europei, abbiamo continuato con le misurazioni metriche. CSS accetta entrambi.

Dopo aver impostato le dimensioni e il margine della pagina, dovevamo assicurarci che ci siano interruzioni di pagina nei punti giusti. Il seguente estratto mostra come vengono generate le interruzioni di pagina dopo i capitoli e le appendici:

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

Inoltre, abbiamo usato CSS2 per dichiarare pagine con nome:

div.titlepage {
  page: blank;
}

Cioè, il frontespizio deve essere stampato su pagine con il nome "vuoto". CSS2 ha descritto il concetto di pagine con nome, ma il loro valore diventa evidente solo quando sono disponibili intestazioni e piè di pagina.

Comunque…

Poiché vuoi stampare A4, avrai ovviamente bisogno di diverse dimensioni:

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

L'articolo approfondisce cose come l'impostazione di interruzioni di pagina, ecc., Quindi potresti volerlo leggere completamente.

Nel tuo caso, il trucco è creare prima il CSS di stampa. I browser più moderni (> 2005) supportano lo zoom e saranno già in grado di visualizzare un sito Web basato sul CSS di stampa.

Ora, vorrai rendere il display Web un po 'diverso e adattare l'intero design per adattarlo anche alla maggior parte dei browser (compresi quelli precedenti, precedenti al 2005). Per questo, dovrai creare un file CSS web o sovrascrivere alcune parti del tuo CSS di stampa. Quando crei CSS per la visualizzazione Web, ricorda che un browser può avere QUALSIASI dimensione (pensa: "mobile" fino a "TV a grande schermo"). Significato: per il web CSS la tua larghezza di pagina e larghezza di immagine è impostata al meglio usando una larghezza variabile (%) per supportare il maggior numero possibile di dispositivi di visualizzazione e client di navigazione web.

EDIT (26-02-2015)

Oggi mi è capitato di imbattermi in un altro articolo più recente su SmashingMagazine che si dedica anche alla progettazione per la stampa con HTML e CSS ... nel caso in cui tu potessi usare ancora un altro tutorial.

EDIT (30-10-2018)

È stato portato alla mia attenzione in quanto sizeCSS3 non è valido, il che è effettivamente corretto - ho semplicemente ripetuto il codice citato nell'articolo che (come notato) era un buon vecchio CSS2 (che ha senso quando guardi l'anno in cui l'articolo e questa risposta è stata pubblicata per la prima volta). Ad ogni modo, ecco il codice CSS3 valido per la tua comodità di copia e incolla:

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

Nel caso in cui pensi di aver davvero bisogno di pixel ( dovresti effettivamente evitare di utilizzare i pixel ), dovrai occuparti della scelta del DPI corretto per la stampa:

• 72 dpi (web) = 595 X 842 pixel
• 300 dpi (stampa) = 2480 X 3508 pixel
• 600 dpi (stampa di alta qualità) = 4960 X 7016 pixel

Tuttavia, eviterei la seccatura e utilizzerei semplicemente cm(centimetri) o mm(millimetri) per il dimensionamento in quanto ciò evita il rendering di anomalie che possono sorgere a seconda del client che si utilizza.

Sarebbe abbastanza facile forzare il browser Web a visualizzare la pagina con le stesse dimensioni in pixel di A4. Tuttavia, ci possono essere alcune stranezze nel rendering delle cose.

Supponendo che i monitor visualizzino 72 dpi, è possibile aggiungere qualcosa del genere:

<!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>

Il formato A4 è 210x297mm

Quindi puoi impostare la pagina HTML in modo che si adatti a quelle dimensioni con CSS:

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

Crea sezione con ogni pagina e usa il codice qui sotto per regolare margini, altezza e larghezza.

Se si sta stampando in formato A4.

Quindi utente

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;
} 

quindi crea un div con tutti i tuoi contenuti.

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

o

@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;
}

Ho usato HTML per generare report che vengono stampati correttamente a dimensioni reali su carta reale.

Se usi attentamente mm come unità nel file CSS, dovresti essere OK, almeno per le singole pagine. Le persone possono rovinarti cambiando lo zoom di stampa nel loro browser.

Mi sembra di ricordare che tutto quello che stavo facendo era una singola pagina, quindi non dovevo preoccuparmi della paginazione - questo potrebbe essere molto più difficile.

Ho visto questa soluzione dopo aver cercato su Google, cercare "Modello di pagina CSS A4" (codepen.io). Mostra un'area A4 (A3, A5, anche verticale) nel browser, usando il tag <pagina>. All'interno di questo tag viene mostrato il contenuto, ma la posizione assoluta è ancora rispetto all'area del browser.

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>

Questo funziona per me senza che sia inclusa alcuna altra libreria css / js. Funziona con i browser attuali (IE, FF, Chrome).

<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

Nel tuo normale style.css:

table.tableclassname {
  width: 400px;
}

Nel tuo print.css:

table.tableclassname {
  width: 16 cm;
}

PPI e DPI non fanno assolutamente alcuna differenza sul modo in cui un documento verrà stampato da un browser. la stampante non acquisisce informazioni sull'intonazione dei punti dello schermo o sul DPI delle immagini, ecc. se si stanno stampando immagini, esse stamperebbero in una dimensione simile in proporzione alla loro visualizzazione sullo schermo. il processore di stampa del browser aumenterebbe il DPI delle immagini da qualcosa di piuttosto basso come 72 dpi a qualunque DPI sia il resto del documento. supponiamo che l'immagine sia larga mezza pagina, quindi fisicamente larga circa 4 ". La larghezza in pixel dell'immagine sarebbe di circa 300 px per essere visualizzata correttamente nel browser. Al momento della stampa a 300 DPI nominali, il processore ha aggiunto pixel e l'immagine crescerà a circa 1200px che a 300 DPI è 4 ".

quando si tratta di elementi vettoriali o non basati su pixel come il testo, la stampante sceglie il proprio DPI dal driver che non si riferisce al passo dello schermo o alla larghezza del browser ecc. se il browser è largo 3000px, il processore di stampa avvolgerà il testo nel modo appropriato.

Ecco cosa rende difficile la creazione di display di stampa: ogni browser e stampante interpretano le dimensioni del testo (pt, em, px) e la spaziatura a modo suo. a seconda della stampante, del browser e forse anche del sistema operativo in uso, otterrai una diversa quantità di righe e caratteri per pagina. quindi, anche se esegui un test sul tuo computer utilizzando il browser e la stampante e scopri che puoi visualizzare il testo in una scatola a 640x900 px ed è perfetto per la stampa, il prossimo ragazzo che prova a stampare lo farà probabilmente stampare in modo diverso. non c'è davvero modo di forzare ogni stampante e browser a renderlo identico ogni volta.

dimentica i pixel e dimentica i DPI, l'unica cosa per cui potresti usare i pixel è impostare una larghezza della tabella che simuli la larghezza di un'area stampabile sulla tua stampante. in quel caso ho scoperto che 640 pixel di larghezza sono vicini.

Alla ricerca di un problema simile l'ho trovato - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 è un formato di documento, poiché un'immagine dello schermo dipenderà dalla risoluzione dell'immagine, ad esempio un documento A4 ridimensionato per:

• 72 dpi (web) = 595 X 842 pixel
• 300 dpi (stampa) = 2480 X 3508 pixel (questo è "A4" come lo conosco, cioè "210mm X 297mm @ 300 dpi")
• 600 dpi (stampa) = 4960 X 7016 pixel

So che questo argomento è piuttosto vecchio ma voglio condividere la mia esperienza su questo argomento. In realtà, stavo cercando un modulo che mi potesse aiutare con i miei rapporti quotidiani. Sto scrivendo alcune documentazioni e alcuni report in HTML + CSS (anziché Word, Latex, OO, ...). L'obiettivo sarebbe quello di stamparli su carta A4 per condividerli con gli amici, ... Invece di cercare, ho deciso di fare una piccola sessione di programmazione per implementare una semplice libreria in grado di gestire "pagine", numero di pagina, riepilogo, intestazione , piè di pagina, .... Infine, l'ho fatto in ~~ 2h e so che non è lo strumento migliore in assoluto ma è quasi ok per il mio scopo. Puoi dare un'occhiata a questo progetto sul mio repository e non esitare a condividere le tue idee. Forse non è quello che stai cercando al 100%, ma penso che questo modulo possa aiutarti.

Fondamentalmente creo una pagina del corpo "larghezza: 200mm;" e contenitore di altezza: 290 mm (più piccolo di A4). Quindi ho usato page-break-after: sempre; quindi l'opzione "stampa" del browser sa quando dividere le pagine.

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

Tecnicamente, potresti farlo, ma ci vorrebbe molto lavoro per ottenere tutti i browser per stampare la pagina esattamente come viene visualizzata sullo schermo. Inoltre, la maggior parte dei browser impone l'URL, la data di stampa e la numerazione delle pagine sulla stampa, che non è sempre desiderato. Questo non può essere modificato o disabilitato.

Invece, consiglierei di creare un PDF basato sul contenuto sullo schermo e di servire il PDF per il download e / o la stampa. Sebbene la maggior parte delle librerie PDF disponibili siano a pagamento, ci sono alcune alternative gratuite disponibili per la creazione di PDF di base.

Ho usato 680 px nei rapporti commerciali per stampare su pagine A4 dal 1998. I 700 pixel non potevano adattarsi correttamente a seconda delle dimensioni dei margini. I browser moderni possono ridurre la pagina per adattarla alla pagina della stampante, ma se si utilizzano 680 pixel, la stampa verrà eseguita correttamente in quasi tutti i browser.

Questo è HTML per te Esegui snippet di codice e vedi il risultato:

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/

Molti modi per fare:

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


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

html,body{
    height: 842px;
    width: 595px;
}

È del tutto possibile impostare il layout per assumere le proporzioni di una pagina A4. Dovresti solo impostare la larghezza e l'altezza di conseguenza (possibilmente controlla con window.innerHeighte window.innerWidthanche se non sono sicuro che sia affidabile).

La parte difficile è con la stampa A4. Javascript, ad esempio, supporta solo la stampa rudimentale del window.printmetodo. Come suggerito da @Prutswonder, la creazione di un PDF dalla pagina Web è probabilmente il modo più sofisticato per farlo (oltre a fornire la documentazione PDF in primo luogo). Tuttavia, questo non è così banale come si potrebbe pensare. Ecco un link che ha una descrizione di una classe Java completamente open source per creare PDF da HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

Ovviamente una volta creato un PDF con la stampa delle proporzioni A4, si otterrà una stampa A4 pulita della tua pagina. Se vale la pena investire tempo è un'altra domanda.