Simulate multipage document in CSS3

StackOverflow https://stackoverflow.com/questions/9305340

  •  30-04-2021
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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.

OTHER TIPS

Best way we've worked out to have this kind of display is to actually have the display in PDF format and display it using PDFObject, or better yet, directly in an <object> element. Since the browser will directly use Adobe or a built in display method, it will be identical to what you're looking for, without all the effort of designing it.

For Example:

<object
  data="/clients/<%= client.id %>/reports/print?preview=true" 
  type="application/pdf" width="100%" height="98%">
  <p>Your browser does not support embedded PDFs.</p>
</object>

We use wkhtmltopdf for all of our HTML to PDF conversion. It's relatively simple to use and we've been using it on hugely complicated HTML documents with all sorts of CSS techniques with great success.

In my experience it will save you much more time displaying it this way vs. coding up a specific CSS display method as long as you don't have any need for actually editing the document in that view.

Best of luck!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top