在分页符上更改文档流以填充空间

Question

当打印(或者,通常,在分页媒体上显示文档)时,是否可以重排文档元素,以便当某个元素(例如图像)转移到下一页因为它不适合实际页面上的可用空间时,它后面的元素会被移动到实际页面的剩余空间吗？

我试图达到类似于(或相同)LaTeX Floats的效果,但只使用CSS.

为了说明它,让我们说我们有这种情况:

Page 1  | Paragraph A (...)   |
        | Paragraph B (...)   |
        |  _________________  |
        | | Top of image A  | |
        |_|_________________|_|

         ---- page break -----
         _____________________
Page 2  | | Rest of image A | |
        | |_________________| |
        |                     |
        | Paragraph C (...)   |
        | Paragraph D (...)   |
        |         ...         |
        |_____________________|

使用一些基本的CSS(参见这个问题),实现这一点没有问题:

Page 1  | Paragraph A (...)   |
        | Paragraph B (...)   |
        |                     |
        |                     |
        |_____________________|

         ---- page break -----
         _____________________
Page 2  |  _________________  |
        | | Image A (whole) | |
        | |                 | |
        | |_________________| |
        |                     |
        | Paragraph C (...)   |
        | Paragraph D (...)   |
        |         ...         |
        |_____________________|

但我真的需要的是这样的:

Page 1  | Paragraph A (...)   |
        | Paragraph B (...)   |
        | Paragraph C (...)   |
        | Paragraph D (...)   |
        |_____________________|

         ---- page break -----
         _____________________
Page 2  |  _________________  |
        | | Image A (whole) | |
        | |                 | |
        | |_________________| |
        |         ...         |
        |_____________________|

所以,基本上,我只是想填充所有留在实际页面上的剩余空间,其中包含以下元素image A(当然,只有它们适合它).

我正在进行一些CSS3研究,并希望看看Office编辑器是否可以完全被CSS样式取代,所以我不需要支持该解决方案(即,此时在某些浏览器中实现).我想知道的是它是否包含在任何CSS模块或构造中(即使它只是工作草案),所以我可以假设浏览器将来会支持它.

我已经搜索过了

• CSS3分页媒体,
• CSS3区域和
• CSS3为分页媒体生成的内容

规格并没有发现任何东西,但仍然有可能我只是忽略了一些东西(或根本不理解它),所以经过两天的谷歌搜索我认为是时候问这里:-)

---

编辑:只是要清楚,再次声明:我不需要解决任何浏览器的支持 ,现在,我需要知道,如果有一个标准或规范,允许这种情况(如果是,如何).

Answer 1

这完全是在黑暗中进行的尝试，但它至少可以让你找到正确的方向......

结合page(n) 伪元素选择器、float / float-modifier属性以及可能的CSS4 父选择器可能会提供某种解决方案。

以下是一些行为的示例：

/* CSS3 GCPM */
#image-a::page(2) {
  page-break-before: auto;
  float: top next-page;
  margin-bottom: -320px; /* Assuming the image height is 320px */
}

/* CSS4 Parent Selector */
$#image-a ::page(2) {
  page-break-before: auto;
  float: top next-page;
  margin-bottom: -320px; /* Assuming the image height is 320px */
}

这基本上表明，如果 image-a 实际上换行到第二页，则应对其应用浮动，将其发送到下一页的顶部。根据浏览器选择呈现的方式，您可能会得到您正在寻找的结果（希望如此）：

1. 检测到换行到第二页
2. 该page-break-before属性强制该float属性应用于整个元素（或者父选择器完成它的工作）
3. 和属性将元素从文档流中取出并float允许margin其他内容占用其空间

我知道这是一个真正的延伸，不会起作用，但也许它会引发一系列思考，让你想出一个更可靠的解决方案:)