I feel like I'm doing something slightly wrong but I can't put my finger on it. I'm happy to supply code/css examples, but mostly I'm looking for a way to approach this sort of problem. Here's what I need to achieve:

Html grouping             Desired numbering

<section.name1             1,2,3
<section.name2             a, b, c, 
<section.name3             4, 5 6
<section                   7, 8,... 27
<section.name4             d,e,f
<section                  28, 29....
etc.

Note: It's for legal documents so there's limited amount I can change - in particular I HAVE to have the a,b,c section between the normal numbering sections, but not interrupting the count. ie. 1,2,3,d,e,f,7,8,9 is not possible.

Whenever set a section into named pages so I can set the counter, I get a blank page before it.

Following the suggestions on this forum, I can get sections without the blank page....

@page section:first { ... }

section {
    page: section;
    prince-page-group: start
}

but this seems to mean I can't add the a,b,c, etc. Doing the following...

@page section2 { 
... 
 @bottom-right {
        content: counter(page, lower-alpha)
    }
 }

section.section2 {
    page: section2;
 counter-reset: page 1;
}

gives me the numbering, but also a page break before the section.
- Adding page: section2 *auto* doesn't seem to allow me any numbering changes.

Additionally, I need to style section 1, 2, and 4 differently.

Thoughts? Approaches?

1. generatedhtml.html‎ 462.7 kB ‎
   boring generated source html

If you want to change the page number for different sections, then I think each section will need to begin at the top of a new page. Is that okay? If not, there might be a way of doing it with JavaScript, but it will be more complicated.

Is the attached source HTML the simplest example you have? Do you have CSS to go with it?

Yes, the sections can be new pages. I'm mostly worried about a way to avoid the blank pages before them.

The css and html are pretty complicated. I can supply them, but worry they cloud rather than clarify the issue.

Here's the basic html layout:

<section class="pcnz_titleSection">
   <div class="node html custom">
      <span class="chunk title"><h1>title content </h1></span>
      <span class="chunk"> ... text content ...</span> 
   </div>
  <div class="node static"> ...etc ... </div>
  <div class="node otherclass"> ...etc ...</div>
</section>
<section class="pcnz_contentsSection">
   <div class="node> 
    ... etc...
</section>
<section class="pcnz_overflowSection">
   <div class="node> 
    ... etc...
</section>
<section class="ANY NAME HERE"></section>
<section class="ANY NAME HERE"></section>
<section class="ANY NAME HERE"></section>
<section class="pcnz_overflowSection2">
    ... etc...
</section>
<section class="ANY NAME HERE"></section>
<section class="ANY NAME HERE"></section>

Additionally some nodes have a 'pageBreak' class for visual representation of the pages on screen. At the moment I'm overriding these in the pdf, but they can be used if helpful.


css:

section{
	page-break-before: never;
	page: section auto;
}


 .pageBreak{
	page-break-before: never !important; 
	height: 0 !important;
	position: absolute;
  }
.heading { page-break-after: avoid !important; }

.node { page-break-inside: avoid !important; } 

 
 @page {
      size: auto;   /* auto is the initial value */ 
	size: a4 portrait;
      margin: 20mm 5mm 20mm 5mm;  
	prince-shrink-to-fit: auto;
  @top-right { 
  }
  @top-left { 
  }
  @bottom-left {
	content: "";
    width: 500px;
    height: 10px;
    line-height: 20px;
    vertical-align: middle;
    font-family: arial, sans-serif;
    font-size: .6em;
    position: relative;
	padding-top: 20px;
	padding-left: 5mm;
  }
  @bottom-right {
    content: counter(page);
    font-family: arial, sans-serif;
    vertical-align: top;
    font-size: .6em;
    position: relative;
	padding-top: 20px;
	padding-right: 5mm;
  }
}

@page section { 
    margin: 20mm 5mm 20mm 5mm;  
	page-break-before: never !important; 
  background: blue;
}
 

Then I was using something like this for the sections:

section.pcnz_contentsSection { 
	page: pcnz_contentsSection ;
	counter-reset: page 1; 
   	&:first-child{
	  //	counter-reset: page 1; //testing.
 	}
}

@page pcnz_contentsSection { 
    margin: 20mm 5mm 20mm 5mm !important; 
    background: pink !important;   
 	@top-left { content: "Table of Contents" }
    @bottom-right {
        content: '3' counter(page, lower-alpha)
    }
  }  

Edited 10 Apr 2015 by thirdman

This has some issues:

section{
	page-break-before: never;
	page: section auto;
}

"never" is not a value for page-break-before, it should be "avoid", and in this case it won't work anyway if you change named pages. Also, the "page" property only takes one value, not two.

Is this &:first-child syntax for a CSS pre-processor? Because Prince will not recognise it, and it might interfere with other declarations:

section.pcnz_contentsSection { 
	page: pcnz_contentsSection ;
	counter-reset: page 1; 
   	&:first-child{
	  //	counter-reset: page 1; //testing.
 	}
}

Oh yep, most of that is just the results of me trying everything I could think of

- section auto was something I found here for a year or two back.

- and yes, it was just for a preprocessor, so I've removed it out.

So are you still getting blank pages? The .pageBreak class with absolute positioning looks a little suspicious.

Hi Mike,

yeah it was a combo of competing classes that was causing the issue, as well as the scss first-child being in the wrong place.

I refactored what was being generated and reduced what I was trying to achieve and that seemed to doo the trick.

Thanks for your help in pointing me towards the right direction!

Great, glad to hear it's working now.