I would like very much to create a web page which would have the same appearence of, say, Microsoft Word or Acrobat Reader when the zoom level is small and it shows side-by-side pages with page borders.
What I don't have idea what to do is to define a fixed size paperborder and throw the content inside it (which would be a variable number of html block elements), and make these elements "flow" from one page to the other, creating as much pages as needed with appropriate page breaks. This is intended to simulate printed output, for quick design-study prototyping.
Something in my mind tells javascript would be necessary, but since my knowledge of javascript is close to zero, and I want hardly to learn CSS3 layout tricks, pure CSS would be preferred (although the JS solution would be a nice alternative).
A current single page document is as follows:
<!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>
This is not easy to do in CSS3 or even in Javascript. Google Docs, which does this, has their own engine for calculating pages. That said, there is an extremely early draft posted of the CSS3 Regions Module which would make this a lot simpler.
The general theory here is to measure the size of the text each time it is updated, and recalculate the pages needed, filling content appropriately. As you can imagine, this isn't the easiest thing in the world to do. There are a lot of different ways for measuring content and things like this, and if you are really dedicated and dive in, I would recommend checking out many of the questions on here related to measuring text and element sizes in javascript.