在CSS3中模拟多页文档 [英] Simulate multipage document in CSS3
问题描述
我非常想创建一个网页，当缩放级别较小并且显示带有页面边框的并排页面时，该页面具有与Microsoft Word或Acrobat Reader相同的外观.
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.
我不知道该怎么做，是定义一个固定大小的paperborder并将其内容放入其中(这将是可变数量的html块元素)，并使这些元素从一页流动"到另一种方法是，根据需要创建尽可能多的页面，并使用适当的分页符.旨在模拟打印输出，以进行快速的设计研究原型.
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.
我认为有必要告诉JavaScript，但由于我对javascript的了解接近于零，并且我几乎不想学习CSS3布局技巧，因此纯CSS将是首选(尽管JS解决方案将是一个不错的选择)
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).
当前的单页文档如下:
<!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>
推荐答案
在CSS3甚至Javascript中都不容易做到这一点.执行此操作的Google文档具有自己的计算页面引擎.也就是说，发布了 CSS3区域模块的非常早期的草案，这要简单得多.
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.
这里的一般理论是在每次更新文本时测量其大小，然后重新计算所需的页面，以适当地填充内容.可以想象，这不是世界上最简单的事情.测量内容和诸如此类的东西有很多不同的方法，如果您真的很投入并且投入其中，我建议您在此处检查有关在javascript中测量文本和元素大小的许多问题.
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.
这篇关于在CSS3中模拟多页文档的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
