This contribution provides methods for entitling of HTML content, auto-numbering and automatic Table of Contents (TOC) generation. The structure of this added content is based on document hierarchy, as opposed to the approaches based on isolated non-semantic HTML elements, such as h1.. h6. In other words, the text processing is based on semantic HTML elements and their structural (parent/child) relationships. In the current implementation, it is based on the semantic element section, and, optionally, on its first-child element header.
The content entitling and auto-numbering is performed using pure CSS. On top of it, optional TOC generation is done using JavaScript matching CSS properties. This approach is a bit more difficult and flexible than pure JavaScript generation of all the added content, but its benefit is the possibility to fully exclude JavaScript if TOC is not needed.
CSS:
/* This CSS file is critically important for content: */
@import "../auto-numbering/auto-numbering.css";
/* Custom styles... */
#tocHeader, header, section:before { font-weight: bold; }
nav ul { list-style-type: none; } /* to remove bullets from TOC */
nav>ul { margin: 0; padding: 0; }
HTML body:
<p id="tocHeader">Contents:</p>
<nav id="toc"><!-- TOC will be automatically added here --></nav>
<section name="Some title for this section">
<p>First entitling method: simple text title using "name" attribute.</p>
<!-- any level of nesting: -->
<section name="Inner">
Some content
</section>
</section>
<section>
<header>Some <i>Formatting</i> can be <sup>used</sup></header>
<p>Second entitling method: "header" as first child element of a section.</p>
<p>Some content…</p>
<p>It's important to avoid using "name" attribute if "header" element is used.</p>
</section>
<script src="../auto-numbering/auto-numbering.js"></script>
<script src="../auto-numbering/auto-sizing.js"></script>
<script>
autoNumbering(document.getElementById("toc"), "auto.toc-", document.body);
autoSizeHeadings(104, 160, 3, "#tocHeader");
</script>
For further detail and ideas, please see the comprehensive code sample.
See the detailed documentation.