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
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 :-)
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):
page-break-before
property forces the float
property to apply to entire elements (or the parent selector does it's job)float
and margin
properties takes the element out of document flow and allow other content to take it's spaceI 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 :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With