7

ズーム レベルが小さく、ページの境界線で横に並んだページを表示するときに、たとえば Microsoft Word や Acrobat Reader と同じ外観を持つ Web ページを作成したいと考えています。

私が何をすべきかわからないのは、固定サイズの paperborder を定義し、その中にコンテンツをスローし (可変数の html ブロッ​​ク要素になります)、これらの要素をあるページから別のページに「流れる」ようにすることです。適切な改ページで必要な数のページを作成します。これは、印刷出力をシミュレートして、迅速な設計研究のプロトタイピングを行うことを目的としています。

私の心の中では、javascript が必要になるだろうと言っていますが、javascript の知識はゼロに近く、CSS3 レイアウトのトリックをほとんど学びたくないので、純粋な CSS が好まれます (ただし、JS ソリューションは優れた代替手段です)。

現在の単一ページのドキュメントは次のとおりです。

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

2 に答える 2

3

これは、CSS3 や Javascript で行うのは簡単ではありません。これを行う Google ドキュメントには、ページを計算するための独自のエンジンがあります。そうは言っても、 CSS3 Regions Moduleの非常に初期のドラフトが投稿されているため、これをはるかに簡単にすることができます。

ここでの一般的な理論は、更新されるたびにテキストのサイズを測定し、必要なページを再計算して、コンテンツを適切に埋めることです。ご想像のとおり、これは世界で最も簡単なことではありません。コンテンツやこのようなものを測定する方法はたくさんあります。あなたが本当に献身的で飛び込んでいるなら、javascript でのテキストと要素のサイズの測定に関連する多くの質問をチェックすることをお勧めします.

于 2012-02-16T04:00:34.497 に答える