Forum How do I...?

Create complex headers that work with page-groups (not sure this is a bug?)

Dear all,

TL;DR: This is a longer one so I provided a sample export that shows the unwanted body page (that would be wrongly numbered 1 in the real world).

I have a document with the following requirements for a CSS Paged Media document (which I assume are quite common):

* There is a page cover (different numbering, margins etc)
* There is a page body (again different properties)
* There are chapters in the body that always start on a right page
* Each Chapter in the body has a running head (comprised of HTML elements, there might be images etc.)
* The first page of a chapter does not have a running head
* (ideally the presentation, e.g. css and header elements would be mostly independent of the content of the document itself - see some of the workarounds below)

I am providing a sample HTML document that has all these elements. The problem I am facing when using PrinceXML for the PDF conversion is, that when I create an HTML element to put into the header (using position: running(header)) it will create an extra page in the body since the running element is placed into the header but it still triggers an extra empty body page (with the header). If I remove the header it just creates another cover page since chapters should start on the right. The problem is that there is a dom child before the actual content as part of .body.

Things I tried these possible solutions:

* Moving .header into the first chapter (thus making the chapter the first dom child of .body again) - this could work but seems like a more complicated workaround since it mixes presentation and the content. It seems, however the most viable solution right now.
* Using Prince.registerPostLayoutFunc to remove the .header element (but this will also remove the content from @top)
* Moving the .header element to the back of the document (but then it will not be able for placement and still cause the same isues there)

* Setting break-before: recto onto the .body and .chapter:not(first-of-type) but this will remove the ability to target the :first of the page-group
-> possible workaround here was to use javascript to remove the first header (for some reason prince only finds one .header but if I remove the first one it keeps the following intact). This does not seem very reliable though.

p.s.: I can not use content: string(..) since I do have the requirement to put more complex structures in to @top.

I would have expected the running element (.header) to be moved out of the dom and thus not create this issue in the first place, but I am not familiar with the CSS Paged Media spec enough to see if this is expected behavior.

I would be very greatful for a hint on how to solve this - it appears I am out of options at this point.

  1. content.html1.7 kB
  2. content.pdf43.3 kB
Like you suggest, the running element should be placed inside the element which causes the page break. See attached file.

(In your code, the header appears on an otherwise blank page before the chapter starts, due to appearing before the chapter in the markup.)
  1. content.html1.7 kB

Edited by howcome

Thanks, this is unfortunate but understandable.

If this could be solved in a future release (by actually taking the element out of the flow of the body completely as indicated here, it would be appreciated). I will create a workaround for our case now.

Thanks for the quick reply!