I found Prince extremely helpful to produce a member directory for my church, but as a novice it took me a while to get cross-references working.
This short, self-contained, HTML file demonstrates how to use CSS-generated content with Prince to produce cross-references and an Index. The first time through it took me a while to get all the details working, so I tried to illustrate the concepts in a simple example. It includes styling the Index with a dot-leader.
I hope this helps some other newbies!
This short, self-contained, HTML file demonstrates how to use CSS-generated content with Prince to produce cross-references and an Index. The first time through it took me a while to get all the details working, so I tried to illustrate the concepts in a simple example. It includes styling the Index with a dot-leader.
I hope this helps some other newbies!
<html>
<head>
<style>
body {font-family:sans-serif; line-height:140%;}
ul {margin:0; padding:0;}
li {list-style-type:none;}
#entries {counter-reset: itemNum;
counter-reset: figNum 7;
}
#entries li {counter-increment: itemNum;}
#entries [id^="fig"] {counter-increment: figNum;}
#entries .zip::before {content: "\2014 Zip is ";}
#entries li::before {content: " #" counters(itemNum, ".") ": ";}
#entries [id^="fig"]::before {content: " has figure " counters(figNum, ".") "~"; }
#entries a[href*="fig"]::before {content: "figure ";}
#entries a[href*="fig"]::after {content: target-counter(attr(href), figNum)
" "
target-content(attr(href))
" in item "
target-counter(attr(href), itemNum);
}
#index a::after {content: target-counter(attr(href), itemNum);}
#index span {display:inline-block;
overflow:hidden;
position:relative;
width:1in;
}
#index span::after {position:absolute;
content:"..................................";
}
#figures li::before {content: target-counter(attr(href), figNum)
" "
target-content(attr(href))
" is in ";
}
#figures a::after {content: "item " target-counter(attr(href), itemNum) " ";}
</style>
</head>
<body>
<h1>Index and Cross-references with <i>Prince</i></h1>
<h2>Introduction</h2>
<p>This short, self-contained, HTML file demonstrates how to use CSS-generated content with <i>Prince</i> to produce cross-references and an Index. As a novice, it took me a while to get all the details working, so I tried to illustrate the concepts in a simple example. It includes styling the Index with a dot-leader.</p>
<p>This test has a number of short <i>Entries</i>. The <i>Item Number</i> for each <i>Entry</i> is automatically generated by CSS. Some entries include a <i>Figure</i> which also gets a <i>Figure Number</i> automatically generated by CSS.
</p>
<p>Cross-references within the <i>Entries,</i> <i>Index,</i> and <i>Figures List</i> are hard-coded links to the associated <i>Entries</i> and <i>Figures</i> (which therefore must each have a unique <i>ID</i> attribute). The <i>Item Numbers</i> and <i>Figure Numbers</i> shown on each link are generated by CSS automatically.
</p>
<p>The same techniques could be used to show page, chapter, section, etc. numbers in a printed document. A separate example will show how a Javascript can automatically generate the <i>Index</i>.
</p>
<p>While most of the results can be viewed in a browser, <b><i>Prince</i> (or some other compliant viewer?) must be used to see content containing the <i>target-counter()</i> and <i>target-content()</i> functions, i.e. the generated <i>Item Numbers</i> and <i>Figure Numbers</i> in the cross-references.</b>
</p>
<h2>Entries</h2>
<ul id="entries">
<li id="e45"><span class="ttl">item 22</span><span class="zip">44444</span></li>
<li id="e20"><span class="ttl">item 35</span><span class="zip">66666</span><span id="fig38">FFF</span></li>
<li id="e15"><span class="ttl">item 43</span><span class="zip">44444</span> See reference <a href="a">outside</a></li>
<li id="e76"><span class="ttl">item 59</span><span class="zip">88888</span></li>
<li id="e41"><span class="ttl">item 64</span><span class="zip">44444</span><span id="fig12">RRR</span></li>
<li id="e89"><span class="ttl">item 75</span><span class="zip">22222</span> See <a href="#fig38"></a></li>
<li id="e17"><span class="ttl">item 82</span><span class="zip">44444</span></li>
<li id="e33"><span class="ttl">item 56</span><span class="zip">88888</span><span id="fig74">CCC</span></li>
</ul>
<h2>Index</h2>
<ul id="index" class="dots">
<li><span>22222</span><a href="#e89"></a></li>
<li><span>44444</span><a href="#e45"></a>, <a href="#e15"></a>, <a href="#e41"></a>, <a href="#e17"></a></li>
<li><span>66666</span><a href="#e20"></a></li>
<li><span>88888</span><a href="#e76"></a>, <a href="#e33"></a></li>
</ul>
<h2>Figures List</h2>
<p>The odd repetition of the <i>href</i> attribute on the <i>li</i> elements is for demonstration of the <i>target-counter()</i> and <i>target-content()</i> functions which need to know where to look.</p>
<ul id="figures">
<li href="#fig38"><a href="#fig38"></a></li>
<li href="#fig12"><a href="#fig12"></a></li>
<li href="#fig74"><a href="#fig74"></a></li>
</ul>
</body>
</html>