Mi piacerebbe molto creare una pagina web che avrebbe la stessa apparenza di, ad esempio, Microsoft Word o Acrobat Reader quando il livello di zoom è piccolo e mostra pagine affiancate con pagina frontiere.Simula documento a più pagine in CSS3
Quello che non ho idea di cosa fare è definire un paperborder di dimensione fissa e gettare il contenuto al suo interno (che sarebbe un numero variabile di elementi di blocco html) e rendere questi "flussi" di elementi da una pagina all'altro, creando tutte le pagine necessarie con le opportune interruzioni di pagina. Questo ha lo scopo di simulare l'output stampato, per una rapida prototipazione dello studio di progettazione.
Qualcosa nella mia mente dice sarebbe necessario javascript, ma dal momento che la mia conoscenza di javascript è vicino a zero, e voglio difficilmente imparare CSS3 trucchi di layout, puro CSS sarebbe preferito (anche se la soluzione JS sarebbe una bella alternativa).
Una corrente documento di una pagina singola è la seguente:
<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Relatório Html</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
body {
background-color: #aaa;
}
.paperpage {
position: absolute;
width: 600px;
padding: 50px 30px 40px 30px;
margin-left: -320px;
left: 50%;
top:10px;
bottom:10px;
background-color: white;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
#innerpage {
position: relative;
margin: 0 auto;
height: auto !important;
min-height: 100%;
}
</style>
</head>
<body>
<div class="paperpage">
<div id="innerpage">
<p>Some Content</p>
</div>
</div>
</body>
</html>