Page Headers and Footers - Built-in CSS

Edit online

Default Page

The default page imposes a header that contains the publication title, chapter, and section title. They alternate on the left or right side of the page:

    @page :left {
        @top-left {
            content: string(maptitle) string(parttitle) string(chaptertitle) string(sectiontitle) " | " counter(page);
            font-size:8pt;
        }
    }

    @page :right{
        @top-right {
            content: string(maptitle) string(parttitle) string(chaptertitle) string(sectiontitle) " | " counter(page);
            font-size:8pt;
        }
    }

Chapter Page

This is inherited from the default page. The chapter page is associated to the topics marked as chapters, usually the ones that are direct children of the map. It clears the header from the first page of each chapter.

    @page chapter{
    	/* Currently inherit from the default page.*/
    }
    
    /* No headers on the chapter first page. */
    @page chapter:first:left{
    	@top-left {
    		content: none;
    	}
    }
    @page chapter:first:right{
    	@top-right {
    		content: none;
    	}
    }

Front Matter and Back Matter page

The bookmap front matter and back matter page. It clears the headers.

   @page matter-page {
        @top-left-corner    {          content:none }
        @top-left           {          content:none }
        @top-center         {          content:none }
        @top-right          {          content:none }
        @top-right-corner   {          content:none }
        @bottom-left-corner {          content:none }
        @bottom-left        {          content:none }
        @bottom-center      {          content:none }
        @bottom-right       {          content:none }
        @bottom-right-corner{          content:none }
    }

Blank Pages

Clears the header for the blank pages that may be created by a page-break-before, page-break-after, or by using double side pagination:

    @page :blank{
    	@top-left {
    		content: none;
    	}
    	@top-right {
    		content: none;
    	}
    }

Index Page

The page that contains the index terms (appears only if there are such items in your topics). It uses a lower roman page number in the footer:

 @page index {
        @top-left-corner    {          content:none }
        @top-left           {          content:none }
        @top-center         {          content:none }
        @top-right          {          content:none }
        @top-right-corner   {          content:none }
        @bottom-left-corner {          content:none }
        @bottom-left        {          content:none }
        @bottom-center      {          content: counter(page, lower-alpha) }
        @bottom-right       {          content:none }
        @bottom-right-corner{          content:none }
 }
 @media oxygen-chemistry {
        @page index {
            column-count: 2;
            column-fill: auto;
        }
  }    

When transformed with Chemistry, the page layout is spread on two columns.

Large Tables Page

@page landscape-page :right {
    size: landscape;

    @top-left {
        content: none
    }
    @top-center {
        content: none
    }
    @top-right {
        content: none
    }

    @right-bottom {
        content: string(maptitle) string(parttitle) string(chaptertitle) string(sectiontitle) " | " counter(page);
        font-size: 8pt;
        transform: rotate(90);
        vertical-align: middle;
        text-align: right;
    }
}

@page landscape-page :left {
    size: landscape;

    @top-left {
        content: none
    }
    @top-center {
        content: none
    }
    @top-right {
        content: none
    }

    @right-top {
        content: string(maptitle) string(parttitle) string(chaptertitle) string(sectiontitle) " | " counter(page);
        font-size: 8pt;
        transform: rotate(90);
        vertical-align: middle;
        text-align: left;
    }
}