7. Page Margin Boxes

Page margin boxes divide the margin of the page into several sections which can be styled individually. The following graphic shows into which boxes a page margin is divided:

Page Margin Boxes

You can set the page header and footer at the top and bottom of the page box. To do so, use generated content to write into the margin boxes. The content property can contain text, page numbers, or images.

To define header and footer lines, only the top and bottom margin boxes are used as for example in this document:

Header: 

@top-left{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.3cm;
    text-align: left;
    content: "RealObjects PDFreactor®";
    vertical-align: bottom;
}

@top-center{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.5cm;
    text-align: center;
    content: "Header/Footer Sample Document";
    vertical-align: bottom;
    border-bottom: 0.2mm black solid;
}

@top-right{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.2cm;
    text-align: right;
    content: " (c) 2006 by RealObjects";
    vertical-align: bottom;
}

Footer: 

@bottom-center{
    font-family: Times New Roman, serif;
    font-size: 0.5cm;
    text-align: center;
    content: "Page " counter(page);
    border-top: 0.2mm black solid; 
}

Example: Placing text

@page {
    @top { 
        content: "RealObjects GmbH";
        color: blue;
        font-size: 16pt; 
    }
}

Example: Placing page numbers

@page {
    @bottom { 
        content: counter(page);
    }
}