styling a (sub-)chapter using a selector based on pagedjs_page[style*=''] prevents page to fit content

[benoitrolland]

Styling the content of a given (sub-)chapter
can be done using a selector based on the <h(1-N)> node, using its [data-id="_subchaptername"] attribute.
If the style applied reduce the height of the content,
the content is well rechaped to fill the page by including next lines initially located on next page.

But the next page of the (sub-)chapter will not be styled since no <h(1-N)> node is avalaible there.

The selector I found to match the whole sub-chapter is the following:
.pagedjs_page[style*='--pagedjs-string-last-current-sub-chapter:"Sub-Chapter Name";']

But using this selector doesn't result in next lines beeing included in previous page to fill the remaining space,
this result in

• the number of pages used by the sub-chapter to remain unchanged,
• each pages of the chapter not beeing fully filled

Would you be aware of such a problem and have an idea of
how to style a multi-pages sub-chapter having its content fiting the space available ?

[ggrossetie]

You should not use pagedjs selectors since Paged.js is an implementation detail (a polyfill of the CSS modules to print specification).

It depends on what you want to achieve/style but I think you should use named pages: https://pagedjs.org/documentation/8-named-page/

[benoitrolland]

Thanks, this pajedjs.com doc will for sure help me better use asciidoctor-web-pdf ,
I hope the web-pdf methodology inferable from this pajedjs doc will have the css fit the content over several pages.

[benoitrolland]

In the provided examples, the only named page I could find is provided and not custom:

front-matter { page: front; }

I think I could use the padjejs methodology from a web page,
but would it be a way to "name a page" from the asciidoc document ?

[ggrossetie]

You can add a role on a section and assign it a page name using CSS:

[.chapter]
== Section

.chapter {
	page: chapter;
}

@page chapter {
  /* ... */
}

[benoitrolland]

Thank you very much for this usefull example.
In my case this works well (without the == section line)
but not on first (post toc) and last page.
Also @page chapter { seems not to be extendable with child node selectors so I had to use .pagedjs_brandpage_page instead.