Hi,

I'm trying to make the body content of my pages align across multiple pages depending on the height of the section header. However, I don't know the height of the section header in advance (it will most often be a single line long, but may extend to two or three lines in some cases).

A picture tells many words (a 1,000 to be exact) so this is what I currently have:



And this is what I would like it to look like. Notice how the body content on both left and right page is aligned according to the section header on the left page.



Is there a CSS property (or other trickery) that would make this possible?

I tried using prince-flow to flow the section header into the @page top, but then the header was repeated on both pages.

Regards,
Jamie

1. current.png‎ 218.7 kB ‎
   Current implementation
2. target.png‎ 214.2 kB ‎
   Desired implementation

That's very tricky. Prince now supports "column-span: 2", but there is no equivalent page-span CSS property.

One possibility would be to duplicate the header, and apply "float: top-next" to the duplicate, so that it becomes a page float at the top of the next page. If you also apply "visibility: hidden", it will not be visible but will still take up space.

Thanks for the answer.

This is almost working now, but there's one last issue: I don't know in advance if the header starts on the left or right page (the content can be x-pages and there are multiple subsequent sections).

Would there be a way to only apply "float: top-next" to the (invisible) duplicated header element if it is on a "left" page?

In general I'd be curious to know if there's a way to nest selectors within page scopes (or some other way of styling elements differently depending on the @page).

One could imagine the @page:left/right working like @media queries, allowing you to target elements based on their environment (in this case left/right page, as opposed to size/type/etc of viewport).

Yes, unfortunately this would allow very strange behaviour, as you could create infinite loops:

/* move to a right page if we are on a left page */
@page:left { div { page-break-before: right } }

/* move to a left page if we are on a right page */
@page:right { div { page-break-before: left } }

For this and other reasons it is not as easy to implement as it appears.