Headers and footers

Headers and footers are often used in hardcopy books and PDF files but while defined as part of the ePub specification they are not implemented in most eBook Readers.

Overview

Headers and footers are defined as Display Property Values oeb-page-head and oeb-page-foot in CSS2 and CSS3 as extension to the CSS standard. Differing from other display values these do not take effect immediately. This feature predates ePub and was used in the earlier OEB, Open eBook, standard used on the first eBook readers and formats such as LIT and IMP. These products used this information to display a header at the top of each screen page just like on a traditional paper book.

Example

Here is an example of coding a header using inline styles but they could also be in the CSS file itself.

<div>
   <div class="myhead" style="display: none; display: oeb-page-head">
      The OEB Publication Structure: Introduction
   </div>
   <h2>Introduction</h2>
   <p>…</p>
 </div>

The way this is designed to work is that the header content will be set by the above statement and can be used by the reading program to display the header. The same header information will remain until it is changes by another statement similar to the above. How there reading program uses this data is up to the program. One way, of course, would be to display the data at the top of each screen just like the paper book but limited screen real estate may make this less desirable. Other techniques would be to provide a button or menu item that would pop up this data on the screen when requested by the user.

If they are shown on the page they should be shown as fixed position boxes that appear at the top or bottom of the page as appropriate. They should remain in effect until the content is changed or the parent element is no longer in effect. Note in the example that the outside div tags define the scope of the parent element.

Notes

• The OEB specification follows the above example except that the outside div statement is replaced by a specific <header> or <footer> tag as appropriate.
• The footer structure is identical to the header structure shown in the example above. It should also be one line of data.
• Do not be tempted to use a footer section for footnotes. This is not correct usage of a footer.
• It is possible to place the header or footer content inside a single line table. This is useful if you want multiple items aligned differently, such as left justified and right justified, or centered.

For more information

OEB-page-head and OEB-page-foot defined in ePub 3.0