Dividere HTML in pagine in base alla dimensione del contenuto

Sto creando una webapp per modificare i documenti. Ogni documento può avere più pagine. Ogni pagina ha una dimensione fissa (sto utilizzando la carta standard in Germania che è DIN A4 e ha 210 mm di larghezza x 297 mm di altezza). Pertanto ho impostato la dimensione del mio codice HTML in modo appropriato.Dividere HTML in pagine in base alla dimensione del contenuto

Il documento sembra già bello e il modo in cui voglio che sia. C'è solo un grosso problema che desidero che la pagina web divida automaticamente il mio contenuto in pagine (ad esempio caselle div) che abbiano le dimensioni di un DIN A4 (come ho detto sopra).

Come posso fare questo? Sarebbe bello se ci fosse una soluzione solo CSS, ma anche JavaScript funziona. Ho creato un CodePen per farti capire il mio problema: example codepen

Voglio il comportamento come Google Drive (Documenti di testo) che crea una nuova pagina quando una pagina del documento è piena. Ecco uno screenshot:

Google Drive Example

HTML

<html> 
    <body> 
    <h1>This is the title of the document</h1><b>Table of contents</b> 
    <ol> 
     <li>Das Programm</li> 
     <li>Hintergründe</li> 
     <li>Vision</li> 
    </ol> 
    <p>some random text</p> 
    </body> 
</html>

CSS

html { 
    background-color: #333; 
    width: 100%; 
    height: 100%; 
} 
body { 
    font: 15px arial; 
    width: 210mm; 
    height: 297mm; 
    background-color: #fff; 
    margin: 10px auto; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 25mm 15mm 20mm 35mm; 
} 
h1 { 
    margin: 0 0 15px 0; 
} 
ol { 
    margin: 0; 
} 
li { 
    margin: 10px 0; 
}

fonte

2014-07-10 wonderbummer

La semplice risposta a questa domanda è: Non lo sai. HTML/CSS non è davvero progettato per questo. Probabilmente c'è una soluzione per questo, ma posso garantire che ti sentirai molto frustrato, perché ci saranno molte insidie sulla strada. Si consiglia di esaminare tecniche alternative come PDF per questo. – RoToRa

Puoi farlo. Anche Google Drive lo fa, ma non so come. – wonderbummer

Google Drive fa cosa esattamente? Intendi quando visualizza un documento pagina per pagina? Questo succede sul lato server convertendo un ** PDF ** (o un documento simile). – RoToRa

quanto penso che non si può dividere la pagina in pagine diverse, ma puoi rendere tutto il documento scorrevole, cioè aggiungi overflow:auto nel CSS dopo aver definito l'altezza e la larghezza del div contenente documenti

#document_carrier{ 
    width:500px; 
     height:350px; 
    border:2px solid #ccc; 
    overflow:auto; 

}

si può avere la vostra altezza e larghezza in base alle proprie esigenze .... realtà mi caricare il pulsante è solo per farti vedere voi per far scorrere la pagina ma puoi aggiungere altre funzioni javascript o altre funzioni linguistiche per caricare il file.

js giocherellare demo

fonte

2014-07-10 10:05:58 anni

Grazie, ma questa non è una soluzione per il mio problema. Voglio avere più pagine che posso stampare se ne ho bisogno. – wonderbummer

Dividere HTML in pagine in base alla dimensione del contenuto

risposta

Problemi correlati