A book design had running heads that consisted of a page number, an ornament, and the book title or author name (image attached). All these components were centered on the page, with fixed space between them. So everything had to go in @top-center, but none of the simple strategies would work because the ornament required a different font (and was not a Unicode character).

It was clear I needed to use a named flow, as that way I could inherit type styles. But how to get three different things in a flow? Much to my surprise, the :before and :after psuedo-selectors, in conjunction with generated content, did the trick!

@page body:left {
  @top-center { 
    content: flow(verso);
    }
  }

@page body:right {
  @top-center { 
    content: flow(recto);
    }
  }

p.verso-cus {
flow: static(verso);
content: prince-glyph-index(80);
font-family: 'Type Embellishments One';
font-size: 10pt;
text-align: center;
text-indent: 0;
}

p.verso-cus:before {
content: counter(page);
display: inline;
padding-right: 15pt;
font-family: 'Garamond 3 LT Std';
font-style: italic;
font-size: 10pt;
margin: 0;
text-indent: 0;
}

p.verso-cus:after {
content: 'Sheila Q. Author';
display: inline;
padding-left: 15pt;
font-family: 'Garamond 3 LT Std';
font-style: italic;
margin: 0;
text-indent: 0;
font-size: 10pt;
}


p.recto-cus {
flow: static(recto);
content: prince-glyph-index(80);
font-family: 'Type Embellishments One';
font-size: 10pt;
text-align: center;
text-indent: 0;
}

p.recto-cus:before {
content: 'Book Title';
display: inline;
padding-right: 15pt;
font-family: 'Garamond 3 LT Std';
font-style: italic;
font-size: 10pt;
margin: 0;
text-indent: 0;
}

p.recto-cus:after {
content: counter(page);
display: inline;
padding-left: 15pt;
font-family: 'Garamond 3 LT Std';
font-style: italic;
margin: 0;
text-indent: 0;
font-size: 10pt;
}

I did have to hide p class="recto-cus" and p class="verso-cus" in the HTML, but they just contain a couple of non-breaking spaces since their content is always replaced. That way they won't cause much trouble.

Not exactly elegant, but for a while I wasn't sure there was a solution at all.

Dave Cramer

1. RunningHead.png‎ 21.5 kB