I want every page that has an element with the class of title on it to not have any page numbers.
The problem I'm having is that the page brakes after the last element with that class.

Here's my CSS:

@page {
    margin: 1.5in;
    @bottom-center {
        content: '- ' counter(page) ' -';
        font-size: 10pt;
    }
}
@page clean {
    @bottom-center {
		content: normal;
	}
}
p { text-align: justify; }
.heading {
    display: block;
    font-weight: normal;
    text-align: center;
    page: clean;
}
.partnumber {
    text-transform: uppercase;
    font-size: 13pt;
    padding-top: 90pt;
    page-break-before: always;
    page-break-after: avoid;
}
.parttitle {
    font-size: 20pt;
    padding-top: 40pt;
    page-break-after: always;
    page-break-before: avoid;
}

And here's some of my HTML

<p class="heading partnumber">Part I</p>
<p class="heading parttitle">Part Name</p>
<p class="heading">Heading</p>
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna.Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

I get is this:



What I'm wanting is this:



Is this too much to ask of Prince, or is my ignorance plain to all?
Any help would be very much appreciated!
Thanks in advance.

There is always a page break before/after a named page change. You will need to use something like this:

@page :nth(1), :nth(2) {
    ...
}

Ok, the problem I'll have with that is that I don't know what page they will land on...

I tried making a white box out of the pseudo :before of my heading, I've got it positioned where I want it but I can't get it on top of the @top-left & @top-right elements, here's what I've got.

@page {
    margin: 1.875in;
    @top-left {
        content: counter(page);
        position: absolute;
        z-index: 100;
    }
}
.heading:before {
    position: absolute;
    z-index: 1000;
    top: -1.875in;
    left: 0px;
    display: block;
    background: #eee;
    height: 1.875in;
    width: 100%;
    content: '';
 }

As you can see I'm trying to move the pseudo element up to the top with z-index, but I guess the @top-... isn't technically an element, is this simply not possible to do with Prince?
I made the block gray so I could see where it is, and then I was planning to make it white.

Edited 8 Jun 2014 by circleb

Right, at the moment z-index does not apply to the page margin boxes, and so they are always drawn on top of the page body content. How about using the flow property instead, to move the element into the margin box?

So, I've tried the flow property, but the main problem I ran into with it is that it puts the same element on every page until another element with the flow property is reached.
What I had hoped I could do with it is place it on one—and only one—page (the page that my .heading element falls on, and not the subsequent pages).

My next thought was to create an array of the page numbers that have a .heading element on them, then create a css call for each value in the array that would look like this:

@page :nth(23) {
    @top-right {
        content: normal;
    }
    @top-left {
        content: normal;
    }
}
@page :nth(50) {
    @top-right {
        content: normal;
    }
    @top-left {
        content: normal;
    }
}
@page :nth(79) {
    @top-right {
        content: normal;
    }
    @top-left {
        content: normal;
    }
}

The problem I have is that I don't know if I can get the page number that a specific element is on any other way besides something like this with CSS:

target-counter(attr(href), page);

But my problem with that is I can't build CSS rules with CSS and have Prince acknowledge them.

So my question at this point is this: Can I get the page number that a certain element falls on with JavaScript?

Yes, using script functions. But perhaps you don't need to. What about just floating the element to the top of the current page, with "float: top"?

That just floats the element to the top of the page but not out into the margin. If I float it to the top and give it an absolute position it goes out into the margin, but then I have my original problem—the element is behind the page number.

Is there any example of finding the page number that an element falls on before the file is processed? I'm aware of this page, but none of these examples work for me because Prince doesn't recognize CSS rules that were created using the content property.

GCPM has a "first-except" parameter for the string function [1] which would make this possible, if it were implemented in Prince:

@page {
  @top-center {
    content: string(folio, first-except);
    }
}

.heading {
  string-set: folio counter(page);
}

This might be a relatively elegant solution for such a use case. I don't know how difficult this would be to implement.

Dave

[1] http://dev.w3.org/csswg/css-gcpm/#using-named-strings

Edited 11 Jun 2014 by dauwhe

That would be VERY nice, and I think it would solve my problem. I don't see it in the list of Prince CSS Properties, hopefully they will implement it soon!

The other approach is to put the entire chapter or section inside a named page, and use "@page name:first" to disable the page number on the first page of that named page. You also need to apply "prince-page-group: start" to the named page element.

I'll pursue that option, but if there was a way to do it with a script it would be much more robust, do you have any examples that I could tinker with?

I think doing it without any scripting would be easier, actually. Here I have attached an example showing two parts, without page numbers on the first two pages of each part.

1. part.html‎ 7.1 kB
2. part.pdf‎ 32.9 kB

That seems pretty good, I'll play around with that...