Question

When printing (or, in general, displaying document on paged media), is it possible to reflow document elements so that when some element (eg. image) is shifted to next page because it doesn’t fit in available space on actual page, elements following it will be moved to remaining space of actual page?

I am trying to achieve effect similar to (or same as) LaTeX Floats, but using only CSS.

To illustrate it, let’s say we have this situation:

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

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

Using some basic CSS (see this question), there’s no problem achieving this:

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

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

But whan I really need is something like this:

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

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

So, basically, I just want to fill up all the remaining space that’s left on actual page with elements following image A (of course, only if they fit into it).

I am making some CSS3 research and want to see if Office editors can be fully replaced by CSS styling, so I don’t need the solution to be yet supported (ie. implemented in some browser at this time). All I want to know is whether it’s covered in any CSS module or construct (even if it’s just working draft), so I can assume browsers will support it in the future.

I have already searched for this in

• CSS3 Paged Media,
• CSS3 Regions and
• CSS3 Generated Content for Paged Media

specifications and found nothing, but there’s still a chance I have simply overlooked something (or didn’t understand it at all), so after two days of Googling I assume it’s time to ask here 🙂

---

EDIT: just to make it clear, once again: I don’t need the solution to be supported in any browser now, I need to know if there’s a standard or specification that allows this (and if yes, how).

Answer 1

This is a total stab in the dark, but it may at least set you in the right direction…

Combining the page(n) pseudo-element selector, the float / float-modifier properties, and possibly CSS4 parent selectors may provide some sort of solution.

Here are few behaviors an example:

/* 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 */
}

This basically states that if image-a actually wraps onto a second page, that a float should be applied to it, sending it to the top of the next page. Depending on how browsers choose to render this, you may get the result you are looking for (Hopefully):

1. Wrapping into the second page is detected
2. The page-break-before property forces the float property to apply to entire elements (or the parent selector does it’s job)
3. The float and margin properties takes the element out of document flow and allow other content to take it’s space

I know this is a real stretch and will not work, but perhaps it will trigger a line of thought allowing you come up with a more solid solution 🙂