Forum Samples, Tips and Tricks

Index and Cross-references with Prince - A simple example

DaveInOhio
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!

<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>
csant
As mentioned in another thread: you might simplify the rule for #emailIndex span::after into:
#emailIndex span::after {
  content: leader(".");
}