Hi,

I'm working on a document with "marks:crop cross". I have a problem with a page where an image is "outside" the crop sign to have the printed full bleed. Well, the image appears *over* the crop sign. Not the opposite. How can ask Prince to put the crop and cross sign over all the other elements?

Thank you


f/

Which version of Prince are you using? This should be fixed in Prince 9 rev 4.

Yes, It is working fine in Prince 9 rev 4, thank you.

Hem... another question, the opposite of the last one: how can I cover the page number in @bottom-center with a full bleed image? I tried to set some z-index, but the page number is printed over the image anyway.
Thank you.

Is the image coming from the main document content?

The css I used for image is this one:

div.larghissimabottomluzz {position:absolute;
                    top:13.1cm;
                width:135%;
                   margin:0em 0 0em -13%;
                   z-index:20}

The xhtml is:

<div class="larghissimabottomluzz">
                <img src="imagines/paluzzati.png" alt="Ingresso mostra Pazienza al Luzzati"></img>
            </div>

and the <div> is between to paragraph in main document content, yes.


Fabrizio

It looks like we are not applying z-index to page margin boxes, and they are always drawn over the main page content. Is it possible for you to disable the page margin box for this particular page, using a named page or some other page selector?

I'm trying but I'm missing something: I'm using this css:

div.larghissimabottom {position:absolute;
                    top:13.5cm;
                width:155%;
                   margin:0em 0 0em -25%;
                   z-index:2;
                   page:no-number}

and this one for the page:

 	@page no-number { @bottom-center  {content: none;}}

This is the xhtml:

<p>Di tutte le trasposizioni questa è la più dolce, la più vista, la più rasserenante.</p>
            <div class="larghissimabottom">
                <img src="imagines/carroll.png" alt="carroll"></img>
            </div>
            
            <p>Ovviamente questo va a discapito di quel sentimento gotico che rappresenta l’altra faccia del romanzo di Dickens e che invece troviamo...</p>

The result is: I have not the page number, but I got a page-break before the div class="larghissimabottom".
Is there a way to avoid this one?


Thank you.



Fabrizio

Right, switching named pages will cause a page break, and this cannot currently be avoided. I think at the moment it is not possible to achieve the layout that you want, as there is no way to customise the headers and footers based on which element appears on that page.

Oh, bad thing. I'm using prince for a magazine, but it is a problem not using full bleed image at all...
I think the z-index support in @page element could be quite important...

Hi, is there some news about this?
I need to put some photos printed full bleed, but I got the page number *over* the photo...

Hi, you can use a small JavaScript hack to solve this problem. You will need to "configure" the script with a list of pages that should not be numbered - but this list itself can be auto-generated by Prince.

Here's an example:

1. Add the JavaScript at the bottom of this post to the document between SCRIPT tags, or to a separate file and use Prince's --script option. (Remember to enable scripting with --javascript if you add the script to the document).
2. Change the CSS that adds page numbers to
   

   content: prince-script(pageNumOrNot, counter(page));
   

3. Edit the list of selectors that should cause page number to be omitted if these elements are inside the page. It should be fairly easy even if you don't know JS - just make sure the list entries are inside quotes and separated by commas:
   

   var suppressPageNumForSelectors = ['.class1', 'section.foo div.splendissimo', '#hellofancy'];
   

4. If you run Prince once on this document, you should see it output a JavaScript list (known as "array") of pages. It will look like this (with different numbers of course):
   

   var pages = [2, 4, 9]
   

   
   Copy that line and paste it inside the script, replacing the line saying "var pages = []"

When you run Prince again, those page numbers should be gone.

Here's the JS:

// This list can be customized by hand or auto-generated
var pages = [];
// If you wish to auto-generate the list, add
// CSS selectors matching elements that should
// "suppress" page numbers here and run Prince once,
// then paste the output above:
var suppressPageNumForSelectors = ['.foo1', '.foo2'];

Prince.addScriptFunc("pageNumOrNot", function(num) {
	num = parseInt(num, 10);
	if(pages.indexOf(num) > -1){
		return '';
	}
	return '' + num;
});

// Below is code for auto-generating the list of pages that page numbers
// should be omitted for
Prince.trackBoxes = true;
Prince.addEventListener("complete", function() {
	var pages = {};
	for(var i = 0; i < suppressPageNumForSelectors.length; i++) {
		var elms = document.querySelectorAll(suppressPageNumForSelectors[i]);
		for(var j = 0; j < elms.length; j++) {
			var boxes = elms[j].getPrinceBoxes();
			for (var k = 0; k < boxes.length; ++k) {
				pages[boxes[k].pageNum] = '';
			}
		}
	}
	console.log('// Paste this list into the script to suppress listed page numbers:');
	console.log('var pages = [' + Object.keys(pages).join(', ') + ']');
});

Announcement: repos for tests/utils

Edited 1 Dec 2016 by hallvord

Thank you... I saved all the steps and I'll try in next days.

f.

It works! Now I have to study the prince javascript... thank you a lot.

Fabrizio

Great to hear it worked for you
Once you have the script configured with the right page numbers, you can remove everything below this line if you wish to do so:

// Below is code for auto-generating the list of pages that page numbers

It doesn't really make any difference to the rendered document if it's there or not, it just outputs the list of pages whenever you run Prince on the document

Announcement: repos for tests/utils