Forum How do I...?

Complex headers

hurmeh
Hi,

I'm trying to get the heading of each paragraph displayed on the page header. I've managed to do this with the following snippet from the documentation:
@page { 
    @top {
	content: string(doctitle)
    }
}

h1 { string-set: doctitle content() }


However, I don't seem to get it working when using a set of divs captured from the document flow as a page header. Is this even possible, or am I just banging my head on the wall for nothing?

Cheers,
Harri Hurme
mikeday
Hi Harri,

You can copy an entire element to the page header/footer using the "flow" property, as described in the documentation for Page Headers and Footers.

If you have multiple div elements and you want to place all of them in the header then you will need to wrap them up in a single element and place that element in the header.

Best regards,

Michael
hurmeh
Hi,

Perhaps I didn't describe what I was trying to archieve clear enough. I'm aware of the possibility of flowing nested divs in the header. That's something I've already done. What I really wanted was to flow some dynamic content to one of the nested divs. Is it possible? I hope this cleared my question up a little.

Regards,
Harri
mikeday
You could use string-set to capture some text from the document and then use generated content to add it to another element, like this:
h1 { string-set: heading }

div::after { content: "The heading is " string(heading) }

However, it is not currently possible to capture text from later in the document and place it earlier in the document using this method. For now, the only way to do this is via some external method, for example by transforming the document with XSLT or a Perl script.
hurmeh
Thanks for the reply. What you are pointing out is exactly what I was afraid of. What I'm trying to archieve is a sort of handbook with some of the chapters spanning multiple pages. What I was trying to do is to put the name of the chapter in the page header with with a bunch of static stuff like text and an image.

Using external programming sounds a bit hackish, but I guess I'll have to give it a try. The material for the handbook is coming from a database and outputted as xhtml and then converted to a pdf with prince. I'm using php for the backend programming so that would probably be my weapon of choice.

Could you shed some additional light on the external scripting, what actually needs to be done? Should I include some hidden elements containing those chapter names or something? Example html and css would be helpful.

Thanks in advance,
Harri
mikeday
What I'm trying to archieve is a sort of handbook with some of the chapters spanning multiple pages. What I was trying to do is to put the name of the chapter in the page header with with a bunch of static stuff like text and an image.

It may be possible to do this purely with generated content, for example:
@page {
    @top {
        content: "Some text" string(heading) "more text then image" url("...")
    }
}

However, headers that require complicated styling cannot really be done in this manner.

You could generate a header element at the start of each chapter using PHP, so the chapter would look something like this:
<div>
<div>
Chapter Title ... more text ... <img>
</div>
<h1>Chapter Title</h1>
... body of chapter ...

Then you could flow the header div up into the page margin box.