Forum How do I...?

Float image to top of next-page column

arthurattwell
I have a multi-column design, and need to float an image to the top of the first column on the next page, like this spread:

---- ---- _____|_____ ---- ----
---- ---- |    |    | ---- ----
---- ---- | 1  |  2 | ---- ----
---- ---- |    |    | ---- ----
---- ---- |____|____| ---- ----
---- ---- ---- | ---- ---- ----
---- ---- ---- | ---- ---- ----
---- ---- ---- | ---- ---- ----
---- ---- ---- | ---- ---- ----


Both image tags appear near the start of the HTML document, long before the second page begins.

I think what I need is something like

float: column-top-corner next


but where the 'next' means next page, not next column.

In my use case, I'm trying to create an image over a double-page spread, over the centre of the spread, extending over the inside columns. To do this, I place the image twice and show half of it on each page.

I can get close with the attached file, where I use 'float: top next' for the second image. But this makes the text columns on the second page start below the second image. I need them to start at the top of the page, to wrap the image.

In my project, I'm using Javascript to duplicate a DPS image for this purpose. So I can't manually place the second <img> later in the HTML so that it happens to fall on the next page.

Any suggestions?

(In my example, don't worry about the exact alignment of the two images. This is just a minimal example.)
  1. image-columns.html9.1 kB
  2. image-columns.pdf418.8 kB

Edited by arthurattwell

markbrown
It seems the 'next' modifier is not going to do what you want here; we will see what we can do about that. Thanks for the use case!
arthurattwell
Thanks. For my case, the workaround seems to be to make the image more than twice the text-area height. Then I can use 'float: column-top next' on the second image, and I get the layout I need.
howcome
Prince 14 will happily generate the kinds of layout you are asking for:
https://www.princexml.com/howcome/2021/guides/float/#spreads
arthurattwell
Thanks, @howcome! There are some wonderful properties in that post that I'm looking forward to using. And, also among the Prince 14 features apparently, snap() looks great, too.