Table of Contents
Style the Table of Contents (TOC).
Note: The default TOC layout is A4 portrait. The TOC layout is not affected by the
@outputclass attributes available in Page Orientation, Size, Margins.Overview
| Resource location: | @import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/styling/table_of_contents.css"); |
By default, the TOC shows up to five levels of nested topics.
By default, the TOC adjusts its styling to maps with no topic nesting.
DITA Outputclass Attributes
This module enables you to set the following @outputclass attributes in the DITA source:
- no_toc
- Assign the
@outputclass="no_toc"attribute to the root element of a publication map to remove the TOC completely from the output.Tip: Hiding the TOC from the output is useful for maps that contain only one topic or a couple of short topics.
Common Customizations
You can apply customizations by pasting the following code snippets under the @import rules.
- Change the TOC heading
-
/* Custom TOC heading. */ nav > ul:first-child::before { content: "Table of Contents" } - Remove the TOC indents
-
/* Remove the TOC indents. */ nav ul li ul li { padding-left: 0px; } - Change the TOC page layout
- See Page Orientation, Size, Margins.
Add a topic before the TOC
To add this advanced customization, you need to add specific structures to your DITA content and modify the HTML, CSS, and XSLT code of the publishing scenario.
DITA
The topic that you want to put before the TOC needs to have an @outputclass attribute assigned to its root tag. You can use any attribute value but in the following example, the @outputclass="doc_history" value is used.
<reference id="reference-228" outputclass="doc_history">
<title>Document History</title>
<prolog>
<author translate="no" type="creator">Rafał Karoń <rafal.karon@heretto.com></author>
<metadata>
<keywords/>
</metadata>
</prolog>
<!-- Topic contents -->
</reference>We recommend hiding the topic from the TOC by assigning a @toc="no" attribute to the topic reference.
Cover Page HTML
The entire cover page HTML code needs to be commented-out except for a single empty <div/> element.
<!-- <h1 class="cover-page-container">
<div class="cover-page-content">
<div class="title-text">{map.title}</div>
<div class="bottom-stripe">
<div class="logo-container">
<div class="logo">
<img src="https://jorsek.github.io/pdfgen.github.io/styles1.1/media/logo_placeholder_150px_350px.png"/>
</div>
</div>
</div>
</div>
</h1> -->
<div/>XSLT
In the XSLT tab, add the code under the <xsl:import> tag(s).
Note: The following code snippet assumes that the topic that you want to move before the TOC has the
@outputclass="doc_history" attribute assigned to its root element.If you want to move a topic before the TOC with a different @outputclass attribute value, edit the underlined code accordingly.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
<xsl:import href="/db/sdk2/internal/pdf_generator/pdf_generator.xsl"/>
<!-- Add this code -->
<xsl:template match="*[contains(@class, ' map/map ')]" mode="chapterBody"> <body> <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]/@outputclass" mode="add-ditaval-style"/> <xsl:if test="@outputclass"> <xsl:attribute name="class" select="@outputclass"/> </xsl:if> <xsl:apply-templates select="." mode="addAttributesToBody"/> <xsl:call-template name="setidaname"/> <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]" mode="out-of-line"/> <xsl:call-template name="generateBreadcrumbs"/> <xsl:call-template name="gen-user-header"/> <xsl:call-template name="processHDR"/> <xsl:if test="$INDEXSHOW = 'yes'"> <xsl:apply-templates select="/*/*[contains(@class, ' map/topicmeta ')]/*[contains(@class, ' topic/keywords ')]/*[contains(@class, ' topic/indexterm ')]"/> </xsl:if> <xsl:call-template name="gen-user-sidetoc"/> <xsl:call-template name="cover.page"/> <xsl:variable name="map" as="element()*"> <xsl:apply-templates select="." mode="normalize-map"/> </xsl:variable> <!-- Put the topic before the TOC --> <xsl:apply-templates select="/normalized//*[contains(@class, ' topic/topic ')][@outputclass='doc_history'][1]" mode="doc.history"/> <xsl:apply-templates select="$map" mode="toc"/> <xsl:call-template name="gen-user-footer"/> <xsl:call-template name="processFTR"/> <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/> <xsl:apply-templates select="/normalized/*[contains(@class, ' topic/topic ')]" mode="child.topic"/> </body> </xsl:template> <!-- Remove the moved topic from its original location --> <xsl:template match="*[contains(@class, ' topic/topic ')][@outputclass='doc_history']" mode="child.topic"/> <xsl:template match="*" mode="doc.history"> <div class="doc_history"> <xsl:apply-templates/> </div> </xsl:template> <!-- Generate cover page --> <xsl:template name="cover.page"> <h1 class="cover-page-container"> <div class="cover-page-content"> <div class="title-text"><xsl:call-template name="get.map.title"/></div> <div class="bottom-stripe"> <div class="logo-container"> <div class="logo"> <img src="https://jorsek.github.io/pdfgen.github.io/styles1.1/media/logo_placeholder_150px_350px.png"/> </div> </div> </div> </div> </h1> </xsl:template> <!-- Generate map title --> <xsl:template name="get.map.title"> <xsl:choose> <xsl:when test="//*[contains(@class, ' map/map ')]/*[contains(@class, ' topic/title ')]"> <xsl:apply-templates select="//*[contains(@class, ' map/map ')]/*[contains(@class, ' topic/title ')]"/> </xsl:when> <xsl:when test="//*[contains(@class, ' map/map ')]/@title"> <xsl:value-of select="//*[contains(@class, ' map/map ')]/@title"/> </xsl:when> <xsl:when test="//*[contains(@class, ' map/map ')]//*[contains(@class, ' topic/title ')]//*[contains(@class, ' bookmap/mainbooktitle ')]"> <xsl:apply-templates select="//*[contains(@class, ' map/map ')]//*[contains(@class, ' topic/title ')]//*[contains(@class, ' bookmap/mainbooktitle ')]"/> </xsl:when> <xsl:otherwise> <xsl:comment>No title specified</xsl:comment> </xsl:otherwise> </xsl:choose> </xsl:template>
<!-- End of add this code -->
</xsl:stylesheet>CSS
Add the cover page styling in the CSS tab.
/* Style the cover page title. */
div.title-text > h1.topictitle1 {
color: #fff;
font-style: normal;
font-weight: bold;
text-align: left;
font-size: 80px;
word-wrap: normal;
letter-spacing: 0.025em;
}