Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-page] - spec gap: no way to continue page flow when using two named pages. #11410

Open
RobMayer opened this issue Dec 23, 2024 · 0 comments

Comments

@RobMayer
Copy link

RobMayer commented Dec 23, 2024

Supposing the following css and html

<main>
    <h2>Chapter Title</h2>
    <p>Enough lipsum content to fill 2.5 pages</p>
</main>
@page typical {
   background-color: #f88
}
@page chapterhead {
   background-color: #8f8
}
main {
    page: typical;
}
h2 {
    page: chapterhead;
    break-before: page;
    break-after: avoid-page;
}

The objective here is to have 3 pages [chapterhead, typical, typical] where the first page is the h2 and whatever amount of the p will fit on the rest of the "chapterhead" page and then run into the "typical" pages.

current spec says that this should result in 4 pages [chapterhead, typical, typical, typical] where h2 exists on its own page, despite break-after set to avoid-page.

I would argue that if I wanted this I would put page: typical on the p style instead of main or remove the break-after: avoid-page from the h2 - or something similar.

it is worth noting that if I remove page: typical from main and let it use the unnamed page, the behaviour I desire manifests, however this means you can only ever use the one unnamed page style, which limits styling potential for different major sections and the like.

Point is, there is no mechanism to allow text to continue to flow on whatever named page when another named page is used as a sections "default" (for lack of a better term).

PrinceXML seems to solve this use case by implementing a -prince-page-group property which can be "auto" or "start" where a value of "start" will let a page with an h2 by targeted by the :first pseudo-selector. https://www.princexml.com/doc/css-props/#prop-page-group
for example:

@page typical {
   background-color: #f88
}
@page typical:first {
   background-color: #8f8
}
main {
    page: typical;
}
h2 {
   -print-page-group: start;
}
@RobMayer RobMayer changed the title [css-page-3] - spec gap: no way to continue page flow when using two named pages. [css-page] - spec gap: no way to continue page flow when using two named pages. Dec 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant