Flying Saucer hide header and footer on first page

Question

I've been playing with the flying saucer R8 and tried to hide header and footer from the front page of my PDF.

I followed that hint tried to follow the W3C specifications for the content: element() (W3C running elements) in my print.css. It is described that the following should solve my problem:

@page { @top-center { content: element(header, first-except) }}

But it seems that this is not yet implemented in R8. So I tried the approach above with the set-string method.

#header { set-string: header content() }
@page { @top-center { content: string(header, first-except) }}

But nothing gets rendered, content: string() seems to be broken, since whatever I put in there will not be rendered:

@page { @top-center { content: "foo" string(header, first-except) }} /*broken*/
@page { @top-center { content: "foo" string(header) }} /*broken*/
@page { @top-center { content: "foo" }} /*works!*/

So has anyone an idea how to get this working?

Colincolinson

Answer 1

Ok, the soulution was easy. I copied it from the flying saucer manual sources link

I had to do the following:

add a second footer without the page numbering:

<div id="normalFooter" style="position: running(normalFooter);">
    <div class="footerContent">fancy stuff</div>
    page <span class="page"/> of <span class="pagecount"/> 
</div>
<div id="firstPageFooter" style="position: running(firstPageFooter);">
    <div class="footerContent">fancy stuff</div>
</div>

The trick is the CSS @page :first:

@page {     
    @bottom-right {
        content: element(normalFooter);
    }
} 

@page :first {      
    @bottom-right {
        content: element(firstPageFooter);
    }
}

There is a normal footer for all the pages except the first one, that comes with a different footer.

Colincolinson

Answer 2

This seems to work for me. The key thing I missed initially was the string-set property on the #cover element. It also shows how to do the page counter. The #cover element is on my cover page resulting in the counter incrementing on page one even though the footer is not being shown.

        div.header {
            display: block;
            font-size: 8pt;
            position: running(header);
        }

        div.header .project-date {
            padding-left: 8px;
        }

        div.header .project-name {
            padding-left: 4px;
        }

        div.footer {
            font-size: 8pt;
            display: block;
            position: running(footer);
        }

        div.footer .page-number:before {
            counter-increment: section;
            content: counter(section);
        }


        @page {
            size: 8.5in 11in;
            margin: 1cm;
            @top-center { content: element(header, last-except)}

            @bottom-center { content: element(footer, last-except)}

        }

        #cover {
            string-set: footer header;
            counter-increment: section;
        }

Tasia