Log in / Register

Forum › How do I...?

I always get page 0 when I use cross referencing

dejudicibus
I have some problem to understand how to create cross-references. I have read the documentation but I can't yet make it work. Here is the situation.

Table of Content

I have several chapers like

...
<h3 id="chap_2_6_3" class="chapter">I am a chapter</h3>
...


in print.php. So I have generated by JavaScript a table of content like this

<ul id="toc">
...
<li>2.6.3. <a href="print.php#chap_2_6_3">I am a chapter</a></li>
...
</ul>


which looks like

...
2.6.3. I am a chapter
...


I used the following instruction in print.css

ul#toc a[href]:after{
	content: leader('.') target-counter(attr(href), page);
}


but when I run Prince I get

...
2.6.3. I am a chapter0
...


Cross references

I have several cross references in my code like

... blah blah blah <a href="print.php#janejoe">Jane Joe</a> blah blah blah...


which looks like

... blah blah blah Jane Joe blah blah blah...


I used the following instruction in print.css

a[href]::after {
	content: " [pag. " target-counter(attr(href), page) "]"
}


but when I run Prince I get

... blah blah blah Jane Joe [pag.0] blah blah blah...


Any idea why?

Just consider that 

@bottom-center {
	content: "Page " counter(page) " of " counter(pages);
	vertical-align: top;
	padding-top: 1rem;
}


works fine, that is, I get at the bottom of pages strings like:

Page 9 of 159


So the page counter works.

Edited by dejudicibus

markbrown
Do the links themselves work?
dejudicibus
The links take to the site, not within the document.
dejudicibus
Just consider that print.php is a piece of code that already convert my site in a single long page, ready to be published (apart page numbers, page breaks, and cross references).
markbrown
The links take to the site, not within the document.


Right, so the answer to your question is that there isn't a page counter at the target you have given, as it's not within the document.
dejudicibus
Well, how can I create a link to an element within the document?

I produce the document by URL http://myowndomain/print.php

Currently the links in toc are like:

<a href="print.php#chap_1_2">Chapter 1.2</a>


whereas the links inside the body of document are like:

<a href="print.php#name.surname">Name Surname</a>


How should I change them?



markbrown
The "fragment" part of the URL on its own (e.g., href="#chap_1_2") will refer to the current document.
dejudicibus
OK, so I have to use some JavaScript to set href differently depending if I am looking at the page from browser or passing it to Prince for conversion. Is there a JavaScript variable set that tells me that the file is under parsing by Prince?
dejudicibus
Fixed. I can use Prince object. If defined, I'm in Prince.
dejudicibus
But does Prince support leader(dotted)? Because if I use

	div#toc ul a::after{
		content: leader(dotted) target-counter(attr(href), page);
	}


or 

	div#toc ul a::after{
		content: leader(".") target-counter(attr(href), page);
	}


I get the page number simply after the chapter name, that is:

1.2.3. This is a chapter675
markbrown
Yes, Prince supports leader(dotted). There will need to be available space for anything to show up, though, so check that the containing element is not just shrinking to fit (this could happen if one of the ancestors is floated, for example).
dejudicibus
No floating ancestors... The TOC is generated by jQuery and looks like:

<div id="toc">
<ul id="list">
...
<li>1.2.5 <a href='#chap_1_2_5'>This is a chapter of 3rd level</a></li>
...
</ul>
</div>


Using the browser inspector, "li" element takes the whole width, so, in theory, the page number should be pushed on the right side by the leaders, but it does not happen.

However, just consider that a "li" element may contain another "ul" element for subchapter. For example:

<ul>
    <li>
        <a....>Chapter</a>
        <ul>
            <li>
                <a....>Subchapter</a>
            </li>
        </ul>
    <li>
</ul>


I suspect that since li contains an ul element the page number does not "know" where to drift.
  1. prince_4.jpg‎ 34.7 kB ‎
    <li> element
markbrown
Prince ought to be able to handle this correctly. Is there any other styling applied to these elements?
dejudicibus
No, nothing like positioning or floating. Anyway, I changed the code from 

<li>1.2.5 <a href='#chap_1_2_5'>This is a chapter of 3rd level</a></li>


to

<li><span>1.2.5 <a href='#chap_1_2_5'>This is a chapter of 3rd level</a><span></li>


setting

	ul#list span {
		display: block;
	}


to ensure that page number has enough space to drift rightward. But the leader do not show yet.


By the way, I do not understand why Google Chrome & Firefox inspectors tell me that

	div#toc ul a::after{
		content: leader(dotted) target-counter(attr(href), page);
	}


content has an invalid property value. The page number appears correctly in Prince. Simply, there are no dots.

dejudicibus
Well, I found a candidate for the culprit, but there is something I do not understand. In another part of print.css style I have 

a {
 display: inline-block;  /* For IE11/MS Edge bug */
}


if I keep it, no leaders appear, but the page number is correct (see image 1). But if I remove it, I get the leaders BUT page number is always zero (see image 2)! That's really strange.

FURTHERMORE, in the first case, the toc item can be clicked to jump to chapter, in the second case it does not.
  1. prince-image-1.jpg‎ 30.5 kB ‎
    Image 1 (no dots, valid page number)
  2. prince-image-2.jpg‎ 59.6 kB ‎
    Image 2 (dots, zero page number)

Edited by dejudicibus

dejudicibus
SOLVED: I had to use

content: leader(dotted) target-counter(attr(href url), page);


rather than

content: leader(dotted) target-counter(attr(href), page);


and anchors must be inline, not inline-block.
dejudicibus
SOLVED: I had to use

content: leader(dotted) target-counter(attr(href url), page);


rather than

content: leader(dotted) target-counter(attr(href), page);


and anchors must be inline, not inline-block.
markbrown
Yes, Prince supports leader(dotted). There will need to be available space for anything to show up, though, so check that the containing element is not just shrinking to fit (this could happen if one of the ancestors is floated, for example).


We've fixed this in the latest build, so leaders should now expand fully even if the anchor is inline-block.