Forum How do I...?

Page heading with page number and chapter/section title on the left/right?

cayhorstmann
I would like to recreate the heading as in the attached image (all on the left for verso pages)

decorated page number (space) chapter title in a different style 


Looking at the example in https://www.princexml.com/doc/paged/, I can see how to get the page number on the left and the title on the right.

But if I want them both on the left, how do I style them differently? I tried using :before for the page number, and got a syntax error. I tried putting the page number into the left-top area, with a negative margin-top, but Prince didn't move it over the top.

It's not the end of the world if this can't be done, but I thought I'd ask.
  1. pageheader.png8.9 kB
ldbeth
Using the margin-left property:

@page {
    margin: 2cm;
    margin-inside: 3cm;
    @top-center { content: string(chapter-title); margin-left: -4in; }
    @top-left { content: counter(page) }
}

h1 { string-set: book-title content() }
h2 { string-set: chapter-title content() }
cayhorstmann
Thank you very much. Using @top-center works perfectly.

It took me a bit of time to understand the page decoration mechanism, but I am now able to replicate the layout from the previous print edition. Very impressive!
howcome
There's a guide to running headers and footers here:

https://css4.pub/2023/running-headers/