Page groups behaviour changes on content

Open YakBizzarro opened this issue 6 months ago • 0 comments

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!

Jun 26 '25 12:06 YakBizzarro