Custom headers and footers: support for @page selectors :left :right is working properly

[oz123]

Having support for these page selectors makes arbitrary headers really easy. My use case is, for example, alternating page number location.
Right now I have

@page {
  padding-top: 1em;
  @top-left {
    background: #083764;
    color: #ffffff;
    content: counter(page);
    height: 1cm;
    text-align: center;
    width: 1cm; }
  @top-right {
    content: string(heading);
    font-size: 9pt;
    height: 1cm;
    vertical-align: middle;
    width: 100%; } 
}

But I would like to have:

@page {
  padding-top: 1em;
  @top-left {
    background: #083764;
    color: #ffffff;
    content: counter(page);
    height: 1cm;
    text-align: center;
    width: 1cm; }
  @top-right {
    content: string(heading);
    font-size: 9pt;
    height: 1cm;
    vertical-align: middle;
    width: 100%; } 
}
@page :right {
  padding-top: 1em;
  @top-right {
    background: #083764;
    color: #ffffff;
    content: counter(page);
    height: 1cm;
    text-align: center;
    width: 1cm; }
  @top-left {
    content: string(heading);
    font-size: 9pt;
    height: 1cm;
    vertical-align: middle;
    width: 100%; } 
}

There were many issues in the past (just one example: #693)
. It was not trivial to find how to do it, and I thought it might be worth adding to the documentation.

Here is a screenshot of how it looks:

[liZe]

Hello!

CSS includes a lot of features, and it would be really hard (and actually useless) to document everything in detail. You find :left and :right selectors very interesting, but other people would also love to discover hyphens, font-kerning, float: footnote, etc. :left and :right are marked as supported in the documentation, with a link to the documentation where you can discover examples.

Of course, the list of supported CSS features is already really, really long, and it’s hard to find interesting examples here. That’s why we have samples, where users can visually find interesting features and read the CSS needed to achieve what you want. The fisrt sample has the same header as your document.

Having both samples to visually discover features and an exhaustive list of supported features is the best solution we have found to advertise supported CSS features. Is there another source you would have liked to discover :left and :right?

[oz123]

Hi! Thanks for the response.
I had to search quite a while to achieve something so trivial. The report you linked has similar features. However, the page number is always on the left. It was not clear to me how to do it. I wanted to document my success for the benefits of others. Maybe an issue was inappropriate .

[oz123]

BTW, I just the cats book has that feature. Thanks for the hint about the examples!

[liZe]

However, the page number is always on the left.

Of course… It’s not helpful for you at all! The book would have been a better example.

I wanted to document my success for the benefits of others. Maybe an issue was inappropriate.

No problem! Thanks for sharing.