css - 更改分页符上的文档流以填充空间

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(参见 this question)，实现这个没有问题:

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) pseudo-element选择器，float / float-modifier属性，可能还有 CSS4 parent selectors可能会提供某种解决方案。

以下是一些行为示例:

/* 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 实际上换行到第二页，则应对其应用 float ，将其发送到下一页的顶部。根据浏览器选择如何呈现它，您可能会得到您正在寻找的结果(希望如此):

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

我知道这是一个真正的延伸，不会奏效，但也许它会引发一个思路，让你想出一个更可靠的解决方案:)