There are two options to add HTML to header and footer boxes, either Running Elements or Running Documents.


1. Running Elements:

Running Elements are elements inside the document that are not rendered inside the document content but inside Page Margin Boxes.

They are useful whenever the content of a Page Margin Box needs to be more complex than Generated Content (e.g. a table) or parts of it need to be styled individually. 


To create a Running Element, an element needs to be positioned as "running", using the running() function with an identifier (can be any string, in this example "footerIdentifier") for the element as argument. The function is set as value of the position property. This removes the element from the document content.

To display a Running Element inside a Page Margin Box, set the element() function as value of the content property. The argument of the function is the same identifier used to in the running() function of the Running Element.


Example:


HTML:

<body>
    <footer>...</footer>
    ...
</body>

CSS:

footer {
    position: running(footerIdentifier);
}

@page{
    @bottom-center{
        content: element(footerIdentifier);
    }
}


Note:

The <footer> needs to be at the beginning of the HTML document to guarantee, that it will appear on every page of the document.


2. Running Documents:

A Running Document is a String containing an HTML document or document fragment or a URL that references a document as argument of the xhtml() function.


Note:

The xhtml() function is a proprietary extension of CSS and will only work for RealObjects products.     


Example:

Variants of 'xhtml()' function declarations

/* document fragment */
content: xhtml("<table>…</table>");
/* complete document */
content: xhtml("<html><head>...</head><body>...</body></html>");
/* external document */
content: xhtml(url("header.html"));

The document is loaded independently inside the Page Margin Box but styles from the document are passed down to it. This can be an advantage as the same style is used throughout all documents. In some cases though this behavior is not desired, as this style may break the layout of the document inside the Page Margin Box. To prevent styles from being passed down use the –ro-passdown-styles property.

Note:
When using the xhtml() function in non-HTML5 documents (e.g. XHTML inside the head in a <style> element) the entire CSS needs to be wrapped in an XML comment.

<!--
@page {
    @top-center {
        content: xhtml("<table>...</table>");
    }
}
-->


Note:

Running Documents have access to Counters and Named Strings from their embedding document and may display them, but cannot influence them.

Counters and Named Strings created inside Running Documents have no effect outside of the Running Document.