Geek Answers Handbook

Simulate a multi-page document in CSS3

I would very much like to create a web page that would have the same appearance, say, Microsoft Word or Acrobat Reader, when the zoom level is small and it shows side by side pages with pages.

I don’t know what to do, it is to determine a fixed size paper tray and discard the contents inside it (which will be a variable number of html block elements) and make these elements “current” from one page to another, creating as many pages as necessary for the corresponding page breaks . This is intended to simulate printed materials, for rapid prototyping of design.

Something in my mind says that javascript will be necessary, but since my javascript knowledge is close to zero, and I’m unlikely to learn CSS3 layout tricks, pure CSS would be preferable (although a JS solution would be a good alternative).

The 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>
+5
source share
2 answers

This is not easy to do in CSS3 or even in Javascript. Google docs that do this have their own page calculation engine. However, there is an extremely early project published by the CSS3 Regions Module that will make this a lot easier.

, , , , . , . , , , javascript.

+2

, , - PDF PDFObject , , <object>. Adobe , , , - .

:

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

wkhtmltopdf HTML PDF. , HTML- CSS.

, , CSS, .

Good luck

0
source

More articles:


All Articles