...
| Redirect | ||||
|---|---|---|---|---|
|
Here are some formatting example in case of Table of Contents generation.
The HTML code is the same in all case:
Table of Contents HTML source in case of Flat type
| Code Block | ||
|---|---|---|
| ||
<div class='page table-of-contents'>
<h1>Table of Contents</h1>
<div class="cex-toc-container cex-toc-container-level-1">
<div class="cex-toc-item cex-toc-item-level-1 cex-toc-ref-to-page" id="cex-toc-level-1">
<a class="cex-toc-counter" href="#Bookmark1">1. - </a>
<a class="cex-toc-text" href="#Bookmark1">Table of Contents sample page Home</a>
<a class="cex-toc-page-number" href="#Bookmark1"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-2">
<div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-1">
<a class="cex-toc-counter" href="#Bookmark2">1.1. - </a>
<a class="cex-toc-text" href="#Bookmark2">Heading one</a>
<a class="cex-toc-page-number" href="#Bookmark2"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-2">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-1-1">
<a class="cex-toc-counter" href="#Bookmark3">1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark3">Heading two</a>
<a class="cex-toc-page-number" href="#Bookmark3"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-3"
id="cex-toc-level-1-1-1-1">
<a class="cex-toc-counter" href="#Bookmark4">1.1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark4">Heading three</a>
<a class="cex-toc-page-number" href="#Bookmark4"></a>
</div>
</div>
</div>
</div>
<div class="cex-toc-container cex-toc-container-level-2">
<div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-page" id="cex-toc-level-1-2">
<a class="cex-toc-counter" href="#Bookmark5">1.2. - </a>
<a class="cex-toc-text" href="#Bookmark5">First page in the space</a>
<a class="cex-toc-page-number" href="#Bookmark5"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-1">
<a class="cex-toc-counter" href="#Bookmark6">1.2.1. - </a>
<a class="cex-toc-text" href="#Bookmark6">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark6"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-2-1-1">
<a class="cex-toc-counter" href="#Bookmark7">1.2.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark7">Heading Two</a>
<a class="cex-toc-page-number" href="#Bookmark7"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-3" id="cex-toc-level-1-2-1-1-1">
<a class="cex-toc-counter" href="#Bookmark8">1.2.1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark8">Heading Three</a>
<a class="cex-toc-page-number" href="#Bookmark8"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-2">
<a class="cex-toc-counter" href="#Bookmark9">1.2.2. - </a>
<a class="cex-toc-text" href="#Bookmark9">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark9"></a>
</div>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-page" id="cex-toc-level-1-2-3">
<a class="cex-toc-counter" href="#Bookmark10">1.2.3. - </a>
<a class="cex-toc-text" href="#Bookmark10">Subpage</a>
<a class="cex-toc-page-number" href="#Bookmark10"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-3-1">
<a class="cex-toc-counter" href="#Bookmark11">1.2.3.1. - </a>
<a class="cex-toc-text" href="#Bookmark11">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark11"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-2-3-1-1">
<a class="cex-toc-counter" href="#Bookmark12">1.2.3.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark12">Heading Two</a>
<a class="cex-toc-page-number" href="#Bookmark12"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-page" id="cex-toc-level-1-2-4">
<a class="cex-toc-counter" href="#Bookmark13">1.2.4. - </a>
<a class="cex-toc-text" href="#Bookmark13">Subpage with not ordered headers</a>
<a class="cex-toc-page-number" href="#Bookmark13"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-4-1">
<a class="cex-toc-counter" href="#Bookmark14">1.2.4.1. - </a>
<a class="cex-toc-text" href="#Bookmark14">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark14"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-2" id="cex-toc-level-1-2-4-1-1">
<a class="cex-toc-counter" href="#Bookmark15">1.2.4.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark15">Heading Three</a>
<a class="cex-toc-page-number" href="#Bookmark15"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-5">
<div class="cex-toc-item cex-toc-item-level-6 cex-toc-ref-to-header cex-toc-original-header-5 cex-toc-normalized-header-3" id="cex-toc-level-1-2-4-1-1-1">
<a class="cex-toc-counter" href="#Bookmark16">1.2.4.1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark16">Heading Five</a>
<a class="cex-toc-page-number" href="#Bookmark16"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-4-2">
<a class="cex-toc-counter" href="#Bookmark17">1.2.4.2. - </a>
<a class="cex-toc-text" href="#Bookmark17">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark17"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-page" id="cex-toc-level-1-3">
<a class="cex-toc-counter" href="#Bookmark18">1.3. - </a>
<a class="cex-toc-text" href="#Bookmark18">Second page in the space</a>
<a class="cex-toc-page-number" href="#Bookmark18"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-3-1">
<a class="cex-toc-counter" href="#Bookmark19">1.3.1. - </a>
<a class="cex-toc-text" href="#Bookmark19">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark19"></a>
</div>
</div>
</div>
</div>
</div> |
...
Description
...
Custom stylesheet
...
Output Table of Contents
...
Default settings for Table of Contents generation
...
.cex-toc-page-number::after{
content: leader(dotted) target-counter(attr(href), page, decimal);
}
.table-of-contents a:link,
.table-of-contents a:visited,
.table-of-contents a:hover,
.table-of-contents a:active
{
text-decoration: none;
}
.cex-toc-ref-to-page {
font-weight: bold;
}
.cex-toc-ref-to-header {
font-style: italic;
}
...
No line to the page numbers
...
.table-of-contents .cex-toc-page-number::after{
content: leader(" ") target-counter(attr(href), page, decimal);
}
...
"-" character as line to the page numbers.
...
.table-of-contents .cex-toc-page-number::after{
content: leader(" - ") target-counter(attr(href), page, decimal);
}
...
No level counter in the beginning of the line
...
.cex-toc-counter {
display: none;
}
...
No bold style for pages
...
.table-of-contents .cex-toc-ref-to-page {
font-weight: normal;
}
...
Different level, with different font weight
...
.table-of-contents .cex-toc-container-level-0 {
font-weight: 900;
}
.table-of-contents .cex-toc-container-level-1 {
font-weight: 700;
}
.table-of-contents .cex-toc-container-level-2 {
font-weight: 600;
}
.table-of-contents .cex-toc-container-level-3 {
font-weight: 400;
}
.table-of-contents .cex-toc-container-level-4 {
font-weight: 300;
}
.table-of-contents .cex-toc-container-level-5 {
font-weight: 100;
}
...
Table of Contents HTML source in case of Hierarchical type
| Code Block | ||
|---|---|---|
| ||
<div class='page table-of-contents hierarchical'>
<h1>Table of Contents</h1>
<div class="cex-toc-container cex-toc-container-level-1">
<div class="cex-toc-item cex-toc-item-level-1 cex-toc-ref-to-page" id="cex-toc-level-1">
<a class="cex-toc-counter" href="#Bookmark1">1. - </a>
<a class="cex-toc-text" href="#Bookmark1">Table of Contents sample page Home</a>
<a class="cex-toc-page-number" href="#Bookmark1"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-2">
<div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-1">
<a class="cex-toc-counter" href="#Bookmark2">1.1. - </a>
<a class="cex-toc-text" href="#Bookmark2">Heading one</a>
<a class="cex-toc-page-number" href="#Bookmark2"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-2">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-1-1">
<a class="cex-toc-counter" href="#Bookmark3">1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark3">Heading two</a>
<a class="cex-toc-page-number" href="#Bookmark3"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-3"
id="cex-toc-level-1-1-1-1">
<a class="cex-toc-counter" href="#Bookmark4">1.1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark4">Heading three</a>
<a class="cex-toc-page-number" href="#Bookmark4"></a>
</div>
</div>
</div>
</div>
<div class="cex-toc-container cex-toc-container-level-2">
<div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-page" id="cex-toc-level-1-2">
<a class="cex-toc-counter" href="#Bookmark5">1.2. - </a>
<a class="cex-toc-text" href="#Bookmark5">First page in the space</a>
<a class="cex-toc-page-number" href="#Bookmark5"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-1">
<a class="cex-toc-counter" href="#Bookmark6">1.2.1. - </a>
<a class="cex-toc-text" href="#Bookmark6">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark6"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-2-1-1">
<a class="cex-toc-counter" href="#Bookmark7">1.2.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark7">Heading Two</a>
<a class="cex-toc-page-number" href="#Bookmark7"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-3" id="cex-toc-level-1-2-1-1-1">
<a class="cex-toc-counter" href="#Bookmark8">1.2.1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark8">Heading Three</a>
<a class="cex-toc-page-number" href="#Bookmark8"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-2">
<a class="cex-toc-counter" href="#Bookmark9">1.2.2. - </a>
<a class="cex-toc-text" href="#Bookmark9">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark9"></a>
</div>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-page" id="cex-toc-level-1-2-3">
<a class="cex-toc-counter" href="#Bookmark10">1.2.3. - </a>
<a class="cex-toc-text" href="#Bookmark10">Subpage</a>
<a class="cex-toc-page-number" href="#Bookmark10"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-3-1">
<a class="cex-toc-counter" href="#Bookmark11">1.2.3.1. - </a>
<a class="cex-toc-text" href="#Bookmark11">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark11"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-2-3-1-1">
<a class="cex-toc-counter" href="#Bookmark12">1.2.3.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark12">Heading Two</a>
<a class="cex-toc-page-number" href="#Bookmark12"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-page" id="cex-toc-level-1-2-4">
<a class="cex-toc-counter" href="#Bookmark13">1.2.4. - </a>
<a class="cex-toc-text" href="#Bookmark13">Subpage with not ordered headers</a>
<a class="cex-toc-page-number" href="#Bookmark13"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-4-1">
<a class="cex-toc-counter" href="#Bookmark14">1.2.4.1. - </a>
<a class="cex-toc-text" href="#Bookmark14">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark14"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-2" id="cex-toc-level-1-2-4-1-1">
<a class="cex-toc-counter" href="#Bookmark15">1.2.4.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark15">Heading Three</a>
<a class="cex-toc-page-number" href="#Bookmark15"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-5">
<div class="cex-toc-item cex-toc-item-level-6 cex-toc-ref-to-header cex-toc-original-header-5 cex-toc-normalized-header-3" id="cex-toc-level-1-2-4-1-1-1">
<a class="cex-toc-counter" href="#Bookmark16">1.2.4.1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark16">Heading Five</a>
<a class="cex-toc-page-number" href="#Bookmark16"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-4-2">
<a class="cex-toc-counter" href="#Bookmark17">1.2.4.2. - </a>
<a class="cex-toc-text" href="#Bookmark17">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark17"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-page" id="cex-toc-level-1-3">
<a class="cex-toc-counter" href="#Bookmark18">1.3. - </a>
<a class="cex-toc-text" href="#Bookmark18">Second page in the space</a>
<a class="cex-toc-page-number" href="#Bookmark18"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-3-1">
<a class="cex-toc-counter" href="#Bookmark19">1.3.1. - </a>
<a class="cex-toc-text" href="#Bookmark19">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark19"></a>
</div>
</div>
</div>
</div>
</div> |
...
Description
...
Custom stylesheet
...
Output Table of Contents
...
Default settings for Table of Contents generation
...
.cex-toc-page-number::after{
content: leader(dotted) target-counter(attr(href), page, decimal);
}
.table-of-contents a:link,
.table-of-contents a:visited,
.table-of-contents a:hover,
.table-of-contents a:active
{
text-decoration: none;
}
.hierarchical .cex-toc-container {
margin-left: 10px;
}
.cex-toc-ref-to-page {
font-weight: bold;
}
.cex-toc-ref-to-header {
font-style: italic;
}
...
Bigger spaces in case of levels
...
.table-of-contents.hierarchical .cex-toc-container {
margin-left: 20px;
}
...
Slimmer Table of Contents
...
.table-of-contents {
margin: 0 120px 0 120px;
}
...