@page :first isn't working as expected in paged.js

[geealbers]

Before proceeding, check to make sure there isn’t an existing issue for this bug.

• [X] I have searched the existing issues and determined this is a new bug.

Steps to reproduce

1. Start a new project
2. Run quire build and quire pdf to generate the PDF

Actual behavior

The chapter title is being included on the first page of the main essay, which is page number 1, even though we've set a :first page rule to remove it:

@page:right:first {
    @bottom-left {
      content: none;
    }
  }

The :first rule only seems to be working on named pages, though the paged.js documentation seems to indicate it should work on all pages. In Prince, we had to define prince-page-group: start; on .quire-page to get :first to work properly. Is there something similar with paged.js?

Expected behavior

The bottom-left margin area should be blank on page 1.

Version numbers

Quire CLI 1.0.0-rc.7 Quire 11ty 1.0.0-rc.9 Node 18.16.0

What browsers are you seeing the problem on?

No response

Relevant Terminal/Shell output

No response

Supporting Information

No response

[fchasen]

I'm seeing a syntax error for using both page selectors like :right:first - unsure if that just pagedjs not parsing it correctly of if it's invalid. Seems like https://www.w3.org/TR/css-page-3/#syntax-page-selector says only one can be used?

For the case above using the page name + :first works ok, but is the intention this should only happen if it a right page?

  @page page-one:first {
    @bottom-left {
      content: none;
    }
  }

It isn't pretty but you could get this to work by using the pagedjs classes directly:

.pagedjs_page.pagedjs_right_page[class$='_first_page'] .pagedjs_margin-bottom-left > .pagedjs_margin-content::after {
    content: none;
}

[geealbers]

@fchasen, yes, the goal is to be able to remove the bottom-left content if it's a first right-hand page, because that content is the page title and so duplicative of the main heading on the page.

From what I'm seeing, the spec shows a couple examples with two pseudo pages in a selector like @page :blank:first { ... }, so I would assume @page :right:first { ... } would also work, no? I'm also not able to get just @page :first { ... } to do anything in paged.js. It seems to need to be @page page-name:first { ... }. Are you seeing that as well?

[fchasen]

Ah thanks, I missed that one - working on an update to support multiple selectors.

I'm still not sure :right:first works for this though, my impression was that :first (without a name) only refers to the very first page in the document?

[geealbers]

Ok, so to enable the targeting of a first page of any chapter in the book, I think I need to look at refactoring the css so that every chapter is a named page, so that I can apply @page page-name :right:first { ... } to it.

Prince has the idea of Page Groups (https://www.princexml.com/doc/paged/#page-groups) where it lets you apply -prince-page-group: start to an element to indicate that it is the start of a new page group, and so honors the :first pseudo element without having named pages.

[Erin-Cecele]

We are currently working on a fix for your bug! Stay tuned for updates, and thank you for your important contribution.