Hi,

I'm new to CSS3 so please forgive a potentially daft question.

Is there any way to set headers / footers in coloured bands such as this pdf.

I know I can get to the edge of the page by setting margin and padding to 0, but as far as I understand, that will eat up the space that is normally reserved for the headers / footers.

Thanks in advance.

Peter Jackson

To create a solid band of color in the page header try adding this to your style sheet:

@page {
    @top-left-corner {
        content: "this is the top left";
        background: green;
    }
    @top-center {
        content: "this is the top center";
        background: green;
    }
    @top-right-corner {
        content: "this is the top right";
        background: green;
    }
}

To do this for the page footer, just replace "top" with "bottom". If you don't want any text in the corners, set the content to the empty string "".

Thanks, that works a treat when I add @top-left, @top-right and play about with padding and margins.

What if I want to do something like the full-width box (that starts "If you want to know more,...") on page 2 of that PDF?

I can get a full width box using something like this:

<div style="width:170mm; background-color:#c3e1ee; margin: 0mm 0mm 0mm -20mm; padding:0 20mm 0 20mm;">

but this seems nasty as it requires me to know the paper size, and details of the margins and paddings to get right. Is there a better way?

Also, if I add a float:bottom to bring the div down to the bottom of the page, there is still the page margin which leaves a white strip across the page. Is there a way to remove that without setting a page specific footer?

Lastly, is there a way to give a background colour to the left half of the page, like on pages 6, 10 and 12 of the PDF? I know that CSS3 does not allow you to address individual columns yet, but is that something you have thought about for Prince.

Sorry about the all questions; I am just trying to find out where the limits are.

Regards

Peter

Another way to get full width boxes is to set the horizontal page margins to zero:

@page {
    margin-left: 0;
    margin-right: 0;
}

You can then explicitly add margins to the sides of boxes that you don't want to cover the full width of the page.

The only way to get rid of this is to set the page margin to zero or place the content in the footer. Alternatively, you can do tricks with positioning or negative margins to move content to cover that area.

The easiest ways to do that would be to either use a table with two table cells and specify the background color on the first table cell, or place the content on the left in a large floating block (eg. "float: left") and set the background color on that.

An option which wouldn't have any impact on the document itself would be an image of the half-width color desired, set to { background-position: 0 0; background-repeat: repeat-y; width: 50% } . Since it's a solid color, when it gets width scaled to fit, there won't be much distortion (ahem.)

This is a case where the page-level absolute positioning fix described in http://www.princexml.com/bb/viewtopic.php?t=808 used in tandem with the generated content feature request described in http://www.princexml.com/bb/viewtopic.php?t=816 would provide a far more elegant answer, in that each page could simply have a flat-color <div> generated and absolutely positioned to top 0, bottom 0, left 0, width 50%. Since it's absolutely positioned it would not affect anything else in page flow, and as long as you bury it eight miles beneath the z-index ice, everything else should be a-ok magic number 1 suupah.

(God, I love PrinceXML. Nothing else is anywhere near far enough along for details like these to be what matters.)

John Haugeland is http://fullof.bs/

Thanks StoneCypher. The way I plan to use Prince means that I really need to keep formatting as separate from @page as possible; it simply isn't an option to mess with the margin boxes all the time, so any formatting has to be 'inline'.

Are you suggesting a background image on the @page, or on the div that triggers the page or something else? I may have missed something, but:

1) the co-ordinate system for background images seems to start inside the page, so the coloured background doesn't cover the margins

2) you can't specify width on a background image, so the backgroun image is either 1 image wide or full-width

Regards

Peter


[/list]

This discussion might be a tad old, but if somebody else ends up searching and finding this thread (like I did):

I personally don't like messing too much in the @page section when I customize my header/footers. What I find the most practical is to refer to a header/footer in the HTML:

---- in the css declarations ---
@page {
@top { content: flow(header_top); }
}

#header_top { flow: static(header_top); }

--- in the html ---

<html>
...
<div id="header_top">Hello world, This my your header</div>
...
</html>

--------------------

You can also pass things around. For example if you want to include the page number in your html header:


--- in the css ---

#page_n_of_m { content: counter(page) " of " counter(pages);}

--- in the html ---

<div id="header_top">Hello world, This my your header. BTW, this is page <span id="page_n_of_m"/></div>

I use the same approach myself now as well. I have also stared to use SVG as a page background rather than messing with the marin borders and backgrounds - far more flexible.

Using the flow approach, page numbers are updated on each page but Prince strings are not so you can't currently use a flow to put the current chapter title in the header. (You might have see my more recent posts about this). Mike has said this will be fixed in the next beta though.

Regards

Peter

Today we have released Prince 6.0 rev 7, which fixes the issue where named strings were not being updated on subsequent pages.