Page groups behaviour changes on content #2485
Description
I'm using page groups to reset page counts after few introduction pages. For that, I declare a class main-content and put all the content after the introduction inside a div with this class. Then, I reset the counter with @page :nth(1 of main-content-page-group)
That works, unless I start to use CSS counters to number the sections and display such numbers in links that point to section. If I do that, the page group breaks and it restart with new chapter.
Here a minimal example to reproduce it:
HTML
<!DOCTYPE html>
<html>
<body>
INTRO PAGE
<div class="main-content">
<h1>Title</h1>
<h1>Title2</h1>
<h2 id="t2">Title h2</h2>
<h1>Title3</h1>
<!-- remove the link to get the correct behaviour -->
Some text <a href="#t2" class="numbered-link-h2">link text</a> some text
</div>
</body>
</html>
CSS
@page {
@top-left {
content: string(chapter);
}
@bottom-left {
content: counter(page);
}
}
/* Remove bottom line on first page */
@page :first {
@top-left {
content: none;
}
@bottom-left {
content: none;
}
}
html {
counter-reset: h1-counter;
}
h1 {
font-size: 3em;
page-break-before: always;
counter-increment: h1-counter;
counter-reset: h2-counter table-counter figure-counter;
string-set: chapter counter(h1-counter) ". " content();
}
h1::before {
content: counter(h1-counter) '. ';
}
h2 {
font-size: 2em;
counter-increment: h2-counter;
counter-reset: h3-counter;
string-set: chapter counter(h1-counter) "." counter(h2-counter) ". " content();
}
h2::before {
content: counter(h1-counter) '.' counter(h2-counter) '. ';
}
div.main-content {
page: main-content-page-group;
break-before: page;
}
/* Reset the page counter when the content starts
Color it green to make the reset more clear*/
@page :nth(1 of main-content-page-group) {
counter-reset: page 1;
background-color: green;
}
a.numbered-link-h1::after {
content: ' (Section ' target-counter(attr(href), h1-counter) ' on page ' target-counter(attr(href), page) ') ';
}
a.numbered-link-h2::after {
content: ' (Section ' target-counter(attr(href), h1-counter) '.' target-counter(attr(href), h2-counter) ' on page ' target-counter(attr(href), page) ') ';
}
Here the outcome:
Tested on weasyprint 65.1.
Thanks for the help!