Log in / Register

Forum › Bugs

Counter bug

felipellrocha
Hey guys.

I'm having some difficulties with counters.

Here's my code (in SASS):
.chapter {
    border: 0;
    page: chapter;
    prince-page-group: start;
    page-break-after: always;

    h1.chapter-title {
        margin: -35.2mm -15mm 5.2mm;
        padding: 35.2mm 15mm 0;

        counter-increment: chapter_count;
        counter-reset: section_count;
        counter-reset: figure_count;

        &::before {
            content: counter(chapter_count) '.';
        }
    }

    h2 {
        counter-increment: section_count;

        &::before {
            content: counter(chapter_count) '.' counter(section_count) '.';
        }
    }

    figure {
        counter-increment: figure_count;
        margin-bottom: 5mm;

        figcaption {
            font-size: 9pt;
            color: #555;

            &::before {
                content: 'Figure ' counter(chapter_count) '.' counter(figure_count) ': ';
            }
        }
    }
    a.figure-link {
        content: 'Figure ' target-counter(attr(href), chapter_count) '.' target-counter(attr(href), figure_count);
    }

    ul, ol {
        page-break-inside: avoid;
    }
}


Only target-counter seems to be working, every other counter seems to be stuck at 1. Any help?
(attached is a screenshot of the issue. The two counts on the screenshot refer to the same element. The first one uses a target counter)
  1. Screen Shot 2013-10-25 at 2.34.46 PM.png‎ 36.6 kB ‎
    screenshot
dauwhe
I'm a bit unfamiliar with how your CSS was set up. I have a version of this working as expected:

[1] I moved the counter-increment for the chapter_count counter to the div.chapter
[2] I'd never seen CSS nested like this before, and it looks like Prince was unhappy with that. Un-nesting things helped.
[3] I'm unfamiliar with the &:: notation, and didn't even see it in the selectors level 3 spec. Do you have some CSS post-processing that resolves this?

Here's a sample HTML file that seems to do what you want:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Untitled</title>
	<style type="text/css">
	.chapter {
    border: 0;
    page: chapter;
    prince-page-group: start;
    page-break-after: always;
    counter-increment: chapter_count;

   }

    h1.chapter-title {
        margin: -35.2mm -15mm 5.2mm;
        padding: 35.2mm 15mm 0;

        counter-reset: section_count;
        counter-reset: figure_count;
        }

        h1::before {
            content: counter(chapter_count) '.';
        }
    

    h2 {
        counter-increment: section_count;
        
        }

        h2::before {
            content: counter(chapter_count) '.' counter(section_count) '.';
        }
    

    figure {
        counter-increment: figure_count;
        margin-bottom: 5mm;
        }

        figcaption {
            font-size: 9pt;
            color: #555;
            
            }

            figcaption::before {
                content: 'Figure ' counter(chapter_count) '.' counter(figure_count) ': ';
            }
        
    
    a.figure-link {
        content: 'Figure ' target-counter(attr(href), chapter_count) '.' target-counter(attr(href), figure_count);
    }

    ul, ol {
        page-break-inside: avoid;
    }

</style>
</head>
<body>

<div class="chapter">
<h1 class="chapter-title">Chapter One Title</h1>

<h2>h2</h2>
<figure>
<img src="hello.jpg" alt=""/>
<figcaption>
Figure Caption
</figcaption>
</figure>

<h2>h2</h2>
<figure>
<img src="hello.jpg" alt=""/>
<figcaption>
Figure Caption
</figcaption>
</figure>


<h2>h2</h2>
<figure>
<img src="hello.jpg" alt=""/>
<figcaption>
Figure Caption
</figcaption>
</figure>


<h2>h2</h2>
<figure>
<img src="hello.jpg" alt=""/>
<figcaption>
Figure Caption
</figcaption>
</figure>

</div>


<div class="chapter">
<h1 class="chapter-title">Chapter Two Title</h1>

<h2>h2</h2>
<figure>
<img src="hello.jpg" alt=""/>
<figcaption>
Figure Caption
</figcaption>
</figure>

<h2>h2</h2>
<figure>
<img src="hello.jpg" alt=""/>
<figcaption>
Figure Caption
</figcaption>
</figure>


<h2>h2</h2>
<figure>
<img src="hello.jpg" alt=""/>
<figcaption>
Figure Caption
</figcaption>
</figure>


<h2>h2</h2>
<figure>
<img src="hello.jpg" alt=""/>
<figcaption>
Figure Caption
</figcaption>
</figure>

</div>

</body>
</html>


PDF of this is attached.

Thanks,

Dave
  1. counter.pdf‎ 34.7 kB ‎
    PDF result
felipellrocha
Yeah, I am using a preprocessor (Sass, in this case).
I tried moving the counts to chapter, but that didn't work. Attached are the html and (preprocessed) css file that I'm using.
Here's the line I'm using to render:
prince -v --javascript -i html5 -o tmp.pdf tmp

Edited by felipellrocha

dauwhe
I think the issue is here, in the .chapter CSS:

counter-reset: section_count;
counter-reset: figure_count;

The CSS cascade kicks in, so the latter property simply overwrites the former.

Changing this to

counter-reset: section_count figure_count;

Fixed the numbering for me in your file.
felipellrocha
That did fix it! Thanks!

Edited by felipellrocha