Paged.js — Build An Index With Pagedjs

print this pageBuild An Index With Pagedjswritten by Julie Blanc on 2 February 2020Indexing is not an easy task. But what if we could automatize a bit the whole experience, on the export? Here is how you can do it with Paged.jsIndexingguidePreparing your HTMLIn the simplest terms, a book index is simply a key to locating information contained in a book. The main idea of the book index is to help the reader find information quickly and easily. It is not a way to locate in the book all the paragraph where the word “music” appears but to locate the places in the book where the word music is “revealing” in relation to the content. In this way, create an index is a semantic work that cannot be done automatically.When you think your content is revelant and need to be in the index, simply add a span around the content:<p>General definitions of <span class="book-index" data-book-index="music">music</span> include common elements such as pitch, rhythm, dynamics, and the sonic qualities of timbre and texture.</p> Your span must contain at least two elements:a class: this class is common to all index span elements of your document, you can name it as you wisha data attribute: this data attribut must be named data-book-index, it indicates the word(s) that will appear in the indexyou can also add an id if you want but it's not requiredAbout the data attribute:all data attributes containing the same word will be combined in a single line in the index, so you can use the same data attribute several times in your documentit is possible to use spaces, capital letters and dashes in the data attribute, like this for example: data-book-index="Wolfgang Amadeus Mozart"it is also possible to format the text with the <em> en <i> elements (only): data-book-index="<em>String Quartet in C major</em>"Finally, you must add somewhere in your HTML an element in which the book index will be generated. It can be a section or a div but it must be indicated by an id (that you name as you wish):<div id="book-index"></div> Use the script with paged.jsAdd the async property to the paged.js script:if you use paged.js with npm: <script async src="http://localhost:9090/dist/paged.polyfill.js"></script>if you use the online script of paged.js: <script async src=""></script>Add the book index script:<script src="js/createIndex.js" type="text/javascript"></script> Call the book index script:The book index need to be generated before that paged.js fragmented the content into pages. You need to the hook before to call the script.Add this code in the head of you html document:<script> window.PagedConfig = { before: function () { createIndex({ spanClassIndex: 'book-index', indexElement: '#book-index', alphabet: true }); } }; </script> Use the print CSS properties in your stylesheet file to target the pages where the index elements a::after{ content: target-counter(attr(href), page); } .link-page::after{ content: ", "; } .link-page:last-of-type::after{ content: none; } .index-value::after{ content: " – "; } Configuring the scriptspanClassIndex: define the id element where the toc list will be createindexElement: define the id element where the toc list will be createalphabet: choose if you want the alphabetical elements (true) or not (false)Styling the book indexThe script generates a list whith items you can style. Here is an example of a book index generated:<ul id="list-index-generated"> <li class="list-alphabet-element" id="alphabet-element-A">A</li> <li class="list-index-element" data-list-index="Apple"> <span class="index-value">Apple</span> <span class="links-pages"> <span class="link-page"><a href="#book-index-10"></a></span> <span class="link-page"><a href="#book-index-23"></a></span> </span> </li> <li class="list-index-element" data-list-index="Apricot"> <span class="index-value">Apricot</span> <span class="links-pages"> <span class="link-page"><a href="#book-index-15"></a></span> <span class="link-page"><a href="#book-index-35"></a></span> </span> </li> <li class="list-index-element" data-list-index="Avocado"> <span class="index-value">Avocado</span> <span class="links-pages"> <span class="link-page"><a href="#book-index-19"></a></span> </span> </li> <li class="list-alphabet-element" id="alphabet-element-B">B</li> <li class="list-index-element" data-list-index="Banana"> <span class="index-value">Banana</span> <span class="links-pages"> <span class="link-page"><a href="#book-index-2"></a></span> <span class="link-page"><a href="#book-index-38"></a></span> <span class="link-page"><a href="#book-index-12"></a></span> </span> </li> <li class="list-index-element" data-list-index="Blackberry"> <span class="index-value">Blackberry</span> <span class="links-pages"> <span class="link-page"><a href="#book-index-17"></a></span> <span class="link-page"><a href="#book-index-24"></a></span> </span> </li> <li class="list-alphabet-element" id="alphabet-element-C">C</li> <li class="list-index-element" data-list-index="Cherry"> <span class="index-value">Cherry</span> <span class="links-pages"> <span class="link-page"><a href="#book-index-32"></a></span> <span class="link-page"><a href="#book-index-27"></a></span> </span> </li> <li class="list-index-element" data-list-index="Coconut"> <span class="index-value">Coconut</span> <span class="links-pages"> <span class="link-page"><a href="#book-index-41"></a></span> <span class="link-page"><a href="#book-index-8"></a></span> </span> </li> </ul> An example of CSS to styling the book index:#list-index-generated{ list-style-type: none; } .list-alphabet-element{ font-weight: bold; padding-top: 18px; padding-bottom: 9px; font-family: Arial, Helvetica, sans-serif; } .index-value{ display: inline-block; min-width: 120px; } .index-value:first-letter{ text-transform: uppercase; } .index-value::after{ content: "none"; } .link-page a{ text-decoration: none; color: currentColor; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } Our position paper for the W3C CSS print workshop Paged Media approaches : page floats

This is a companion discussion topic for the original entry at