Heretto PDF Generator Templates Development

You customize the Heretto PDF Generator template style by using CSS. You can also use HTML to modify the cover page and XSLT to apply advanced structural customizations.

For detailed information on the CSS features supported by the Heretto PDF Generator, see the Prince CSS Reference.

Heretto PDF Generator Templating Basics

You can customize the Heretto PDF Generator templates by embedding or importing the CSS code into the code editor.

Tip: We recommend extending the Gray and Color templates with custom CSS rather than creating a template from scratch.
Embedded style
A CSS code added directly to the Heretto PDF Generator CSS tab.
/* Style uicontrol elements. */
.uicontrol {
  font-weight: bold;
  color: #457b9d;
}

/* Style wintitle elements. */
.wintitle {
  font-weight: bold;
}
Imported style
A CSS file imported from your Heretto CCMS content library or an external repository like GitHub.
@import url("https://jorsek.github.io/pdfgen.github.io/styles/jorsek_pdf/modules/dita/uicontrol_wintitle_shortcut_menucascade.css");

HTML Tab

The HTML tab in the right pane enables you to see the following:
  • HTML elements rendered from DITA elements
  • Classes associated with the HTML elements
Remember: You can use the CSS classes and HTML elements as selectors in the CSS code of your template. Keep in mind that HTML elements tend to be more general than CSS classes. For example, styling the li HTML element affects the table of contents, ordered lists, unordered lists, and even task steps.
pdf generator HTML tab
Tip: If needed, we recommend learning the CSS and HTML basics from the following resources:

To learn about the CSS features supported by the Heretto PDF Generator, see Prince CSS Reference.

Selecting HTML Elements

In the following example the h1 element (h1 selector) is used to style the chapter-level topic titles.

Chapter-level topic
A topic that is a child of a publication map.
h1 {
    color: darkcyan;
    font-weight: bold;
}
HTML customization example

Selecting HTML Classes

In the following example, the uicontrol class (.uicontrol selector) is used to style the rendered UI control elements.

.uicontrol {
    color: cyan;
    font-weight: bold;
}
classes customization example

Gray and Color Templates

The Gray and Color templates are complete and modular styles that you can leverage to quickly create your own Heretto PDF Generator templates.

Tip: The Gray and Color templates differ only in default colors. You can change the default colors, logo placeholders, and captions at any point. The template colors are determined in the palette modules.

Gray Template Overview

Resource location: https://jorsek.github.io/pdfgen.github.io/styles1.1/gray_pdf.css

The Gray template CSS uses a grayscale color palette for all styles and formatting.

Figure 1. Cover Page
gray pdf cover page
Figure 2. Table of Contents
gray pdf table of content
Figure 3. Task Topic
gray pdf procedure
Figure 4. Concept Topic
gray pdf concept topic

Color Template Overview

Resource location: https://jorsek.github.io/pdfgen.github.io/styles1.1/color_pdf.css

The Color template CSS uses a neutral color palette for all styles and formatting.

Figure 5. Cover Page
color pdf cover page
Figure 6. Table of Contents
color pdf table of content
Figure 7. Task Topic
color pdf procedure
Figure 8. Concept Topic
color pdf concept topic

Template Modules

The Gray and Color templates consist of several modules that style specific aspects of the document. The CSS code in each module is thoroughly commented to make the optional customizations easier.

By default, the templates are optimized for screen reading (and not printing). Because of that, some print-friendly modules are disabled (/* commented-out */).

CAUTION: Modifying the order of modules may cause unexpected results.

You can enable or disable any module at any time however, we recommend to leave some modules enabled.

Enabled Module
A regular CSS import. For example:

@import url("modules/layout/orientation_size.css");

Disabled Module
A commented-out module. For example:
/* @import url("modules/styling/table_of_contents_page_numbering.css"); */
Important: Due to a bug, in the CSS tab of the Heretto PDF Generator, the /* commented-out */ CSS imports are not disabled.

As a workaround, to disable a module, you can “break” a link. To do so, we recommend to add #DISABLED at the end of a given import path. For example:

/* @import url("modules/styling/table_of_contents_page_numbering.css#DISABLED"); */

We are working on fixing this issue. Sorry for the inconvenience.

Template Update Policy

The Gray and Color templates are stored on a public Heretto GitHub repository.

Heretto may update the Gray and Color templates on GitHub to fix bugs or add enhancements. By default, these updates will be reflected in your Heretto PDF Generator template.

If you want to use the Gray and Color templates but you do not want your Heretto PDF Generator templates to be affected by any update made by Heretto, contact your Customer Success Manager.

Layout Modules

Determine the document orientation, size, and column count. Add page breaks and blank pages.

Table 1. Layout Modules Reference
Module Description Enabled by default Recommended for screen-reading Recommended for printing
Cover Implement an A4 portrait cover page. yes yes yes
Orientation Size Set the default page layout to A4 portrait with regular margins and control the document layout in the DITA source. yes yes yes
Breaks Set how elements are distributed over multiple pages and control page breaks in the DITA source. yes yes yes
Blanks Start chapter-level topics and the Table of Contents (TOC) on the right-hand page by inserting blank pages if necessary. no no yes
Columns Lay out elements in columns in the DITA source. yes n/a n/a
Fullpage Lay out a container topic title, abstract, and short description on a single page. yes n/a n/a

Cover

Implement an A4 portrait cover page.

Important: By default, the cover page layout is not affected by the DITA @outputclass attributes. For more information, see Orientation Size Module.
Overview
Resource location: @import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/layout/cover_responsive.css");
@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/layout/cover_generic.html");
Figure 9. Gray Cover Page
gray pdf cover page
Figure 10. Color Cover Page
color pdf cover page
Common Customizations

You customize the templates by pasting the following code snippets at the bottom of the CSS tab or into the Cover page HTML tab.

Add a custom logo
Replace the following underlined code with a custom logo. For more information, see Graphics Implementation.
<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_generic_200px_500px.png"/>
                    </div>
                </div>
            </div>  
        </div>
    </div>
</h1>
custom cover page logo

You can apply customizations by pasting the following code snippets under the @import rules.

Center the logo
pdf cover centered logo
/* Center cover logo */
.logo-container {
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
}
Style the cover page title text
custom cover text
/* Custom cover page title text. */
.title-text {
    color: cyan;
    font-style: normal;
    font-weight: bold;
    size: 70px;
    line-height: 80px;
    letter-spacing: 0.08em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
Change the cover page primary background color
custom cover background color
/* Custom cover page background. */
.cover-page-container {
    background-color: darkorange;
}
Change the cover page secondary background color
custom cover bottom stripe
/* Custom cover page stripe background. */
.bottom-stripe {
    background-color: skyblue;
}
Add a border to the cover page
custom cover border left
.cover-page-container,
.bottom-stripe {
    border-left: 50px solid teal;
}
Change the cover page layout
Examine the template code and apply required modifications.
Add topic metadata to the cover page

You can apply this advanced customization by developing your DITA content in a particular way and by modifying the HTML, CSS, and XSLT code of the template.

cover page topic metadata

DITA - Topic metadata example

<prolog>
        <copyright type="primary">
            <copyryear year=""/>
            <copyrholder>My Company</copyrholder>
        </copyright>
        <metadata>
            <prodinfo>
                <prodname/>
                <vrmlist>
                    <vrm modification="" release="" version="1.0.0"/>
                </vrmlist>
            </prodinfo>
        </metadata>
</prolog>
cover page topic metadata source
Important: We recommend adding metadata only to the first topic in the map.
Figure 11. Multiple versions.

If you add the same metadata elements to multiple topics in a single map, multiple metadata values will be added to the cover page.

cover page topic metadata multiple versions

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 bold code under the <xsl:import> tag(s).

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">

  <xsl:import href="../../../../../../../../sdk2/internal/pdf_generator/pdf_generator.xsl"/>

    <!-- Enables you to develop cover pages in the XSLT tab -->
    <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>
            <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>

    <!-- Enables you to generate a 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>

    <!-- Enables you to override the HTML 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 class="topic-meta"> <!-- DEFINE TOPIC METADATA ELEMENTS OR ATTRIBUTES HERE -->
                    <div class="meta-value">v<xsl:value-of select="//vrm/@version"/></div>
                    <div class="meta-value"><xsl:value-of select="//copyrholder"/></div>
                </div>
            </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>

</xsl:stylesheet>

CSS

To style topic metadata on the cover page, you can add the following code at the end of 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;
}

/* Style topic metadata on the cover page */
div.meta-value:first-of-type {
    width: 65%;
    border-top: 2px solid white;
    margin-top: 15mm;
    padding-top: 8px;
}
div.topic-meta {
    font-size: 35%;
    font-weight: normal;
    line-height: 1.25em;
}
Add a back cover
Figure 12. Sample Back Cover
sample back cover

You can apply this advanced customization by developing your DITA content in a particular way and by modifying the HTML, CSS, and XSLT code of the template.

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 bold code under the <xsl:import> tag(s).

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">

  <xsl:import href="../../../../../../../../sdk2/internal/pdf_generator/pdf_generator.xsl"/>

<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>
      
      <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"/>
      <xsl:call-template name="back.page"/>
    </body>
  </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>

   <!-- Add back page -->
   <xsl:template name="back.page">
        <!-- You can embed any HTML code you want -->
        <h1 class="cover-page-container back-cover-page-container">
            <div class="cover-page-content">
                <div class="title-text"/>
                    <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>

</xsl:stylesheet>

CSS

Add the back cover 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;
}
/* Style the back cover */
.back-cover-page-container .logo-container {
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
}

Orientation Size

Set the default page layout to A4 portrait with regular margins and control the document layout in the DITA source.

Tip: Setting the page orientation to landscape or decreasing margins is useful if you want to:
  • Insert large table elements
  • Insert large image elements
  • Reduce the number of pages
Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/layout/orientation_size.css");
Figure 13. Default Page Layout
page orientation default
Figure 14. Selectively Customized Page Layout.
In the following example:
  • “Concept A” is the parent topic of “Concept B” and “Concept C”
  • “Concept A” has the @outputclass="landscape" attribute assigned to the root element
  • “Concept C” has the @outputclass="portrait" attribute assigned to the root element
page orientation landscape
DITA Outputclass Attributes

This module enables you to set the following @outputclass attributes in the DITA source:

landscape_small
To set the A4 landscape body page size with small margins, assign the @outputclass="toc_landscape_small" attribute to the root map element or to the root topic element:
page orientation landscape small
landscape
To set the A4 landscape body page size with regular margins, assign the @outputclass="toc_landscape" attribute to the root map element or to the root topic element:
portrait [default]
To set the default A4 portrait body page size with regular margins, assign the @outputclass="toc_portrait" attribute to the root map element or to the root topic element:
page orientation toc portrait
portrait_large
To set the A4 portrait body page size with large margins, assign the @outputclass="toc_portrait_large" attribute to the root map element or to the root topic element:
page orientation toc portrait large
portrait_small
To set the A4 portrait body page size with small margins, assign the @outputclass="toc_portrait_small" attribute to the root map element or to the root topic element:
page orientation toc portrait small
toc_landscape_large
To set the A4 landscape TOC page size with large margins, assign the @outputclass="toc_landscape_large" attribute to the root map element :
page orientation toc landscape large
toc_landscape_small
To set the A4 landscape TOC page size with small margins, assign the @outputclass="toc_landscape_small" attribute to the root map element:
page orientation toc landscape small
toc_landscape
To set the A4 landscape TOC page size with regular margins, assign the @outputclass="toc_landscape" attribute to the root map element:
page orientation toc landscape regular
toc_portrait [default]
To set the default A4 portrait TOC page size with regular margins, assign the @outputclass="toc_portrait" attribute to the root map element:
page orientation toc portrait regular
toc_portrait_large
To set the A4 portrait TOC page size with large margins, assign the @outputclass="toc_portrait_large" attribute to the root map element:
page orientation toc portrait large 2
toc_portrait_small
To set the A4 portrait TOC page size with small margins, assign the @outputclass="toc_portrait_small" attribute to the root map element:
page orientation toc portrait small
Tip: You can assign multiple @outputclass attributes divided by spaces to a single DITA element. For example @outputclass="landscape toc_landscape".

For information on how to assign DITA attributes, see:

Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Change the document body layout
custom body size
You can specify the custom page with:
  • A document format keyword, for example US-Letter.

    See Page Size Keywords.

  • Specific document width and height.

    For example: 920px 920px.

/* Custom document layout. */
@page {
    size: 920px 920px;
}

If you want to override any @outputclass attribute associated with this style, use the following code:

/* Force custom document layout. */
@page {
    size: 920px 920px !important;
}
/* Prevent the default cover page layout from breaking. */
@page cover_page {
    size: a4 portrait !important;
}
Change the table of contents layout
page orientation landscape toc
/* Custom TOC layout. */
@page toc {
    size: A4 landscape;
}
Make the PDF reader zoom to fit page
/* Zoom to fit page after opening */
@prince-pdf {
    prince-pdf-open-action: zoom(fit-page);
}
Change the cover layout
See Cover.

Breaks

Set how elements are distributed over multiple pages and control page breaks in the DITA source.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/layout/breaks.css");

By default, if a topic can fit a page, it is distributed without any page breaks.

two topics on one page

By default, if a topic cannot fit a page, it is distributed on a separate page.

avoid breaking topics

If possible, some elements are distributed on a single page, without page breaks. For more information, inspect the module code.

breaks definition list
DITA Outputclass Attributes

This module enables you to set the following @outputclass attributes in the DITA source:

break_before
To force a page-break before a topic element, assign the @outpuclass="break_before" attribute to the topic element.
In the following example:
  • “Chapter A” contains “Section A”, “Section B”, and “Section C”.
  • The @outputclass="break_before" attribute is assigned to “Section B”.
outputclass break before
break_after
To force a page-break after a topic element, assign the @outpuclass="break_after" attribute to the topic element.
In the following example:
  • “Chapter A” contains “Section A”, “Section B”, and “Section C”.
  • the @outputclass="break_after" attribute is assigned to “Section B”.
outputclass break after
break_avoid
To avoid breaking an element over multiple pages, assign the @outpuclass="break_avoid" attribute to the element.
break_inside
To break an element over multiple pages, assign the @outpuclass="break_inside" attribute to the element.
break_topics
To Distribute non-chapter-level topics one-by-one over multiple pages, assign the @outpuclass="break_topics" attribute to the root map element.
Note: Assigning this attribute results in the same output as applying the Distribute non-chapter-level topics one-by-one customization.
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Some customizations may also require XSLT modifications.
Distribute non-chapter-level topics one-by-one

In the following example, the “Publish a Resource” topic is distributed right after a previous topic.

breaks topic one by one
/* Break topics inside. */
article {
    break-inside: auto;
}
/* Do not break chapter-level topics. */
article:has(.topictitle1) {
    break-inside: avoid;
}
Decide which elements should be broken over multiple pages

Move selectors to the appropriate CSS rule to either break or avoid breaking elements over multiple pages, for example:

/* Break the following elements over multiple pages: */
table,
code,
.entry,
.xref,
.sysoutput,
.varname,
.filepath,
.userinput,
.stepxmp,
.stepresult,
.info,
.dd,
.result {
  break-inside: auto;
}

/* Avoid breaking the following elements over multiple pages: */
.note,
.dt,
.title,
.codeph,
.userinput,
.sysoutput,
.fig,
.abstract,
.shortdesc,
.example,
.context,
.prereq
.postreq {
  break-inside: avoid;
}
Avoid breaking definition title (<dt>) and definition description (<dd>) elements
CSS

Add the following code at the end of the CSS tab.

.dlentry {
  break-inside: avoid;
}
XSLT

Add the bold code in the XSLT tab.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">

  <xsl:import href="../../../../../../../../sdk2/internal/pdf_generator/pdf_generator.xsl"/>
  
  <!-- DL entry wrapper -->
  <xsl:template match="*[contains(@class, ' topic/dlentry ')]" name="topic.dlentry">
    <div class="dlentry">
      <xsl:apply-templates/>
    </div>
  </xsl:template>

</xsl:stylesheet>

For more information, see https://www.princexml.com/doc/13/paged/#page-breaks.

Blanks

Start chapter-level topics and the Table of Contents (TOC) on the right-hand page by inserting blank pages if necessary.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/layout/blanks.css");
Figure 15. Blank Page Before the TOC
blank page after cover
Figure 16. Blank Page Before a Chapter-Level Topic.

The following example shows a blank page added before “Chapter C” to make the chapter prints on the right-hand page.

blank page before chapter
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Remove the blank page before the TOC
no blank page after cover
/* Remove the blank page before the TOC. */
nav {
    page-break-before: avoid;
}
Start chapter-level topics on the left-hand side
start chapter on left page
/* Start each chapter (level-1 topic) on the left page. Insert a blank page before a chapter if needed. */
body > nav ~ article.nested0 {
    page-break-before: right;
}

Columns

Lay out elements in columns in the DITA source.

Note: By default, some elements (for example, titles) span across every column. For more information, inspect the template code.
Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/layout/columns.css");
DITA Outputclass Attributes

This module enables you to set the following @outputclass attributes in the DITA source:

two_column
To present content in two columns, assign the @outputclass="two_column" attribute to a topic element.

In the following example, the @outputclass="two_column" attribute is assigned to the steps element.

steps two columns
three_column
To present content in three columns, assign the @outputclass="three_column" attribute to a topic element.

In the following example, the @outputclass="three_column" attribute is assigned to the lengthy context element.

concept three columns
four_column
To present content in four columns, assign the @outputclass="four_column" attribute to a topic element.

In the following example, the @outputclass="four_column" attribute is assigned to “Section A” and “Section B”.

section four columns
Tip: For Heretto PDF Generator, when laying out content in multiple columns, consider using the landscape page orientation. For more information, see Orientation Size.
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Add borders between columns
border between columns
/* Add borders between columns */
.two_column,
.three_column,
.four_column {
  column-rule: 2px dashed darkgray;
}
Adjust the gaps between columns
adjust column gaps
/* Adjust the gaps between columns. */
.two_column,
.three_column,
.four_column {
  column-gap: 60px;
}

Fullpage

Lay out a container topic title, abstract, and short description on a single page.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/layout/fullpage.css");
fullpage module
DITA Outputclass Attributes

This module enables you to set the following @outputclass attributes in the DITA source:

fullpage_title
To lay out a topic title, abstract, and short description on a single page:
  • Assign the @outputclass="fullpage_title" attribute to the topic <title> element.
  • Remove the topic body element completely.
    Important: If the topic body element is present, the short description element and the abstract element will be placed on the next page.
<!-- Example -->
<concept id="concept-1084" outputclass="portrait" xml:lang="en-us">
    <title outputclass="fullpage_title">Topic Title</title>
    <abstract><shortdesc>Short Description</shortdesc>Abstract</abstract>
</concept>

Styling Modules

Style the document elements not related or loosely related with DITA, including the table of contents, headers, and footers.

Table 2. Styling Modules Reference
Module Description Enabled by default Recommended for screen-reading Recommended for printing Requires
Typography Set typography for specific parts of the document and add basic formatting capabilities. yes yes yes n/a
Table of Contents Style the Table of Contents (TOC). yes yes yes n/a
Header Footer Add running headers and footers to the Table of Contents (TOC) and the document body. yes yes yes Orientation Size
Table of Contents Page Numbering Add numbering to the footer of the Table of Contents (TOC). yes n/a n/a Header Footer
Header Footer Alternate Add alternating running headers and footers to the Table of Contents (TOC) and the document body. yes yes yes Orientation Size
Table of Contents Numbering Alternate Add numbering to the alternating footers of the Table of Contents (TOC). yes no no Header Footer Alternate
Chapter Numbering Add chapter numbering to the Table of Contents (TOC) and the document body. no no yes n/a
Figure no Numbering Remove the figure numbering. yes yes no n/a
Table no Numbering Remove the table numbering. yes yes no n/a
Image Borders Add borders to images. yes n/a n/a n/a
Image Shadows Add shadows to images. no n/a n/a n/a
Link Page Number Add page number information after local links. no no yes n/a
Hide Empty Elements Hide any element that doesn't contain content. yes yes yes n/a
Formatting Extend DITA content formatting capabilities. yes n/a n/a n/a

Typography

Set typography for specific parts of the document and add basic formatting capabilities.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/styling/typography.css");

By default, the template uses the Roboto font.

gray pdf concept topic
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Note: By default, there is a limited number of fonts that you can use for customizations. If you want to add a particular font to the system, contact your Customer Success Manager.
Set the cover page font
cover page typography
/* Set the cover page font. */
.title-text {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
Set the table of contents font
typography toc
/* Set the table of contents font. */
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
Set the header and footer font
typography header footer
/* Set the header and footer font. */
@page {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
Set the document body font (excluding titles)
typography body
/* Set the document body font (excluding titles). */
article,
article * {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
Set the document body titles font
typography body titles
/* Set the document body titles font. */
.title,
.title *,
.table--title-label,
.fig--title-label,
figcaption:not(figcaption > .desc) {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

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 the Orientation Size Module.
Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/styling/table_of_contents.css");
Figure 17. Hierarchical Map TOC.

By default, the TOC shows up to five levels of nested topics.

toc hierarchical map
Figure 18. Flat Map TOC.

By default, the TOC adjusts its styling to maps with no topic nesting.

toc flat map
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.
no table of content
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Change the TOC heading
toc custom heading
/* Custom TOC heading. */
nav > ul:first-child::before {
    content: "Table of Contents"
}
Remove the TOC indents
toc no padding
/* Remove the TOC indents. */
nav ul li ul li {
    padding-left: 0px;
}
Change the TOC page layout
See Orientation Size.
Add a topic before the TOC
topic before table of content

You can apply this advanced customization by developing your DITA content in a particular way and by modifying the HTML, CSS, and XSLT code of the template.

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.

doc history topic
<reference id="reference-228" outputclass="doc_history">
    <title>Document History</title>
    <prolog>
        <author translate="no" type="creator">Rafał Karoń &lt;rafal.karon@heretto.com&gt;</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.

hide doc from table of content

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 bold 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="../../../../../../../../sdk2/internal/pdf_generator/pdf_generator.xsl"/>

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

</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;
}

Header Footer

Add running headers and footers to the Table of Contents (TOC) and the document body.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/styling/header_footer.css");
Figure 19. Header and footer in the TOC
table of content header and footer
Figure 20. Header and footer in the document body
doc body header and footer
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Generate a map title in the header
gray pdf table of content
/* Generate a map title in the header. */
@page:left{
    @top-left{
        content: "{map.title}";
    }
}
@page:right{
    @top-left{
        content: "{map.title}";
    }
}
Add a company name in the header
header and footer company name
/* Add a company name in the header. */
@page:left{
    @top-right{
        content: "KRN Solutions";
    }
}
@page:right{
    @top-right{
        content: "KRN Solutions";
    }
}
Add copyrights to the TOC footer
footer copyrights
/* Add copyrights in the TOC footer. */
@page toc:right{
    @bottom-left{
        content: "Copyright © 1993-2020 KRN Solutions Inc.";
        }
}
@page toc:left{
    @bottom-left{
        content: "Copyright © 1993-2020 KRN Solutions Inc.";
        }
}
Start page numbering from the cover page
/* Start page numbering from the cover page*/
.cover-page-container {
    counter-reset: page 1 pages;
}
Add a border to the header
/* Add a border to the header. */
@page:left{
    @top-left{
        border-bottom: 3px solid #6f6f6f;
    }
    @top-right{
        border-bottom: 3px solid #6f6f6f;
    }
}
@page:right{
    @top-left{
        border-bottom: 3px solid #6f6f6f;
    }
    @top-right{
        border-bottom: 3px solid #6f6f6f;
    }
}
article {
    margin-top: 15px;
}
nav > ul:first-child::before {
    margin-top: 25px;
}
Change the header color
@page:left{
    @top-left{
        background-color: #6f6f6f;
        color: white;
    }
    @top-right{
        background-color: #6f6f6f;
        color: white;    
        }
}
@page:right{
    @top-left{
        background-color: #6f6f6f;
        color: white;    
        }
    @top-right{
        background-color: #6f6f6f;
        color: white;    
        }
}
article {
    margin-top: 15px;
}
nav > ul:first-child::before {
    margin-top: 25px;
}
Change the footer color
@page:left{
    @bottom-left{
        background-color: coral;}
    @bottom-right{
        background-color: coral;}}
@page:right{
    @bottom-left{
        background-color: coral;}
    @bottom-right{
        background-color: coral;
    }}
@page toc:left{
    @bottom-left{
        background-color: coral;
    }
    @bottom-right{
        background-color: coral;
    }}
@page toc:right{
    @bottom-left{
        background-color: coral;
        }
    @bottom-right{
        background-color: coral;
    }}

Header Footer Alternate

Add alternating running headers and footers to the Table of Contents (TOC) and the document body.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/styling/header_footer_alternate.css");
Figure 21. Alternating header and footer in the TOC
alternating header and footer
Figure 22. Alternating header and footer in the document body
alternating header and footer doc body
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Generate a map title in the header
header alternate map title
/* Generate a map title in the header. */
@page:left {
    @top-left {
        content: "{map.title}";
    }
}
@page:right {
    @top-right {
        content: "{map.title}";
    }
}
Add a company name in the header
header add company name
/* Add a company name in the header. */
@page:left {
    @top-right {
        content: "KRN Solutions";
    }
}
@page:right {
    @top-left {
        content: "KRN Solutions";
    }
}
Add copyrights in the TOC footer
footer add copyrights
/* Add copyrights in the TOC footer. */
@page toc:right {
    @bottom-right {
        content: "Copyright © 1993-2020 KRN Solutions Inc.";
    }
}
@page toc:left {
    @bottom-left {
        content: "Copyright © 1993-2020 KRN Solutions Inc.";
    }
}
Start page numbering from the cover page
/* Start page numbering from the cover page*/
.cover-page-container {
    counter-reset: page 1 pages;
}
Add a border to the header
/* Add a border to the header. */
@page:left{
    @top-left{
        border-bottom: 3px solid #6f6f6f;
    }
    @top-right{
        border-bottom: 3px solid #6f6f6f;
    }
}
@page:right{
    @top-left{
        border-bottom: 3px solid #6f6f6f;
    }
    @top-right{
        border-bottom: 3px solid #6f6f6f;
    }
}
article {
    margin-top: 15px;
}
nav > ul:first-child::before {
    margin-top: 25px;
}
Change the header color
@page:left{
    @top-left{
        background-color: #6f6f6f;
        color: white;
    }
    @top-right{
        background-color: #6f6f6f;
        color: white;    
        }
}
@page:right{
    @top-left{
        background-color: #6f6f6f;
        color: white;    
        }
    @top-right{
        background-color: #6f6f6f;
        color: white;    
        }
}
article {
    margin-top: 15px;
}
nav > ul:first-child::before {
    margin-top: 25px;
}
Change the footer color
@page:left{
    @bottom-left{
        background-color: coral;}
    @bottom-right{
        background-color: coral;}}
@page:right{
    @bottom-left{
        background-color: coral;}
    @bottom-right{
        background-color: coral;
    }}
@page toc:left{
    @bottom-left{
        background-color: coral;
    }
    @bottom-right{
        background-color: coral;
    }}
@page toc:right{
    @bottom-left{
        background-color: coral;
        }
    @bottom-right{
        background-color: coral;
    }}

Chapter Numbering

Add chapter numbering to the Table of Contents (TOC) and the document body.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/styling/chapter_numbering.css");
Figure 23. Chapter numbering in the TOC
chapter numbering
Figure 24. Chapter numbering in the document body
chapter numbering in body
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Remove the “Chapter” captions
disable chapter caption
disable chapter caption body
/* Remove the "Chapter" captions in the TOC. */
nav ul li:before {
content: counter(toc_level1) ". ";
}
/* Remove the "Chapter" captions in the document body. */
article > .topictitle1:before {
content: counter(section_level1) ". ";
}

Image Borders

Add borders to images.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/styling/image_borders.css");
Figure 29. An image with a border
image borders enabled
DITA Outputclass Attributes

This module enables you to set the following @outputclass attributes in the DITA source:

no_borders
To disable image borders, assign the @outputclass="no_borders" attribute to an image element.
image borders disabled
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Change the image borders style
image borders custom
/* Change the image borders style. */
.image,
.body img {
    border: 2px dotted teal;
    padding: 2.5px;
}

Link Page Number

Add page number information after local links.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/styling/link_page_number.css");
link page number
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Change the label text
link page custom number
/* Custom page number label */
article a[href]::after {
    content: " [ page " target-counter(attr(href), page) " ]";
}
/* Remove page number labels for glossary links. */
article a[href*="glossentry"]::after {
    content:"";
}
/* Remove page number labels for external links. */
article a[href*="https:"]::after,
article a[href*="mailto:"]::after {
    content:"";
}

Hide Empty Elements

Hide any element that doesn't contain content.

Tip: Hiding empty DITA elements is useful to prevent the automatically-generated labels from being added before empty DITA elements.

For examples of such labels, see Cause, Condition, Context, Example, Postreq, Prereq, Remedy, Result, Steps, Stepsection.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/styling/hide_empty_elements.css");
Figure 30. Disabled Style.

The “Context”, “Result”, and “Example” labels are added before empty elements.

hide empty element disabled
Figure 31. Enabled Style.

The labels preceding empty DITA elements are hidden.

hide empty elements enabled

Formatting

Extend DITA content formatting capabilities.

Remember: The extended content formatting works only with the Gray and Color templates. To ensure DITA content compatibility with other publishing scenarios, avoid overusing the DITA attributes associated with this style.
Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/styling/formatting.css");
DITA Outputclass Attributes

This module enables you to set the following @outputclass attributes in the DITA source:

You can assign the following attributes to:
  • Topic elements (including the root element of a topic)
  • The root element of a map
text_justify
To justify the text in an element, assign the @outputclass="text_justify" attribute.

In the following example, the @outputclass="text_justify" attribute is assigned to “Section A”.

formatting text justify
text_left
To align the text in an element to the left, assign the @outputclass="text_left" attribute. This is the default setting.
In the following example:
  • The @outputclass="text_justify" attribute is assigned to “Section A”
  • The @outputclass="text_left" attribute is assigned to the note element contained by “Section A”
formatting text left
text_right
To align the text in an element to the right, assign the @outputclass="text_right" attribute.
formatting text right
text_smaller
To shrink the text in an element to 12px, assign the @outputclass="text_smaller" attribute.

In the following example, the @outputclass="text_smaller" attribute is assigned to the note element.

formatting text smaller
text_small
To shrink the text in an element to 14px, assign the @outputclass="text_small" attribute.

In the following example, the @outputclass="text_small" attribute is assigned to the note element.

formatting text small
text_default
To set the text in an element to 16px, assign the @outputclass="text_default" attribute.
In the following example:
  • The @outputclass="text_smaller" attribute is assigned to the note element
  • The @outputclass="text_default" attribute is assigned to the second paragraph element in the note element.
formatting text default
text_large
To enlarge the text in an element to 18px, assign the @outputclass="text_large" attribute.

In the following example, the @outputclass="text_large" is assigned to the note element.

formatting text large
text_larger
To enlarge the text in an element to 20px, assign the @outputclass="text_larger" attribute.

In the following example, the @outputclass="text_larger" is assigned to the note element.

formatting text larger

DITA Modules

Style DITA elements, including: step, codeblock, uicontrol, and title.

Note: The DITA elements that you are likely to style together are bundled in single modules.
Table 3. DITA Modules Reference
Module Description Enabled by default Recommended for screen-reading Recommended for printing Requires
Footnote Style the footnote elements. yes yes yes n/a
Paragraph Ensure consistent rendering of paragraph elements. yes yes yes n/a
File path, Sysoutput, Userinput, Varname Style the semantic string elements and wrap variable name elements in angle brackets. yes yes yes n/a
Uicontrol, Wintitle, Shortcut, Menucascade Style the semantic interface elements. yes yes yes n/a
Abstract, Shortdesc Adjust the placement of abstract elements and short description elements. yes n/a n/a n/a
Note Style every note element type. yes yes yes n/a
Xref, Related-Links Style any cross-reference type. yes yes yes n/a
Codeblock, Codeph Style code block elements and code phrase elements. yes yes yes n/a
Figure Image Adjust the placement of figure elements and image elements. yes yes yes n/a
Description Place desc elements below the titles in figure elements and image elements. yes yes yes n/a
Definition List Style the definition list elements. yes yes yes n/a
Cite, Long Quote, Quote Style cite elements, long quote elements, and quote elements. yes yes yes n/a
Title Consistently style the titles of topics, sections, tables, and figures. yes yes yes n/a
Section Adjust the placement of section elements. yes yes yes n/a
Ordered List, Unordered List, Step, Substep, Choice Adjust the placement of ordered list elements, unordered list elements, step elements, substep elements, and choice elements. yes yes yes n/a
Cause, Condition, Context, Example, Postreq, Prereq, Remedy, Result, Steps, Stepsection Add labels preceding the task topic and troubleshooting topic “sections”. yes yes yes n/a
Choices, Info, Stepresult, Stepexample, Solution, Substeps, Troublesolution Add labels before the task topic and troubleshooting topic “subsections”. yes yes yes Ordered List, Unordered List, Step, Substep, Choice
Choices, Steps, Substeps Numbering Add custom numbering to choices elements, steps elements, and substeps elements. yes n/a n/a
Choicetable, Table Style choice table elements and table elements. yes yes yes n/a

Footnote

Style the footnote elements.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/footnote.css");
footnote overview
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Style the footnotes separator
footnote style the separator
/* Style the footnotes separator. */
@page {
  @footnotes {
    border-top: 2px solid #1d3557;
    border-clip: 683px;
  }
}
Style the footnote callouts
footnote style the callout
/* Style the footnote callouts */
.fn::footnote-call {
  content: "["counter(footnote)"]";
  color: #e63946;
}
Style the footnote markers
footnote style marker
/* Style the footnote markers. */
.fn::footnote-marker {
  color: #e63946;
}

Paragraph

Ensure consistent rendering of paragraph elements.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/paragraph.css");
paragraphs default
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Adjust the paragraph margins
paragraph increase margins
/* Increase margins between paragraphs. */
div.p,
p,
.p {
  margin-top: 15px;
}
/* Optional: Decrease paragraph margins after sectiontitles. */
.sectiontitle ~ .p,
.sectiontitle ~ p {
    margin-top: 5px;
}
Adjust the widows and orphans settings
The widows property determines the minimum number of lines allowed to move to a new page. The orphans property determines the minimum number of lines allowed to stay at the end of a given page before the paragraph (or other element) breaks to another page.

By default, the minimum number of widows and orphans is 1. For more information, see https://www.princexml.com/doc/11/paged/#widows-and-orphans.

/* Determine the number of allowed orphans */
p {
    orphans: 2;
}

/* Determine the number of allowed widows */
p {
    widows: 2;
}
Tip: You can determine the number of widows and orphans for other selectors like div, .codeblock, or .lq.

File path, Sysoutput, Userinput, Varname

Style the semantic string elements and wrap variable name elements in angle brackets.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/filepath_sysoutput_userinput_varname.css");
Figure 32. File path element and variable name element.

The following example shows a file path element that contains a variable name element. The variable name element is automatically wrapped in <angle brackets>.

file path varname
Figure 33. System output element
system output
Figure 34. User input element
user input
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Do not wrap variable name elements in angle brackets
varname no angle brackets
/* Do not wrap variable name elements in angle brackets. */
.varname::before {
  content: "";
}
.varname::after {
  content: "";
}
Style file path elements
file path custom
/* Style file path elements. */
.filepath {
  display: inline-block;
  padding: 0em 0.25em;
  text-align: left;
  width: auto;
  background-color: whitesmoke;
  color: teal;
  border: 2px dotted gray;
}
Style system output elements
system output custom
/* Style system output elements. */
.systemoutput {
  font-family: 'Courier New', Courier, monospace;
  background-color: black;
  color: rgb(9, 169, 9);
  padding: 2.5px;
  letter-spacing: 0.035em;
}
Style user input elements
user input custom
/* Add a caption before the user input element. */
.userinput::before {
    content: "enter: ";
    font-weight: bold;
}
/* Style the user input element. */
.userinput {
    border-top: 2px solid #457b9d;
    border-bottom: 2px solid #457b9d;
}

Uicontrol, Wintitle, Shortcut, Menucascade

Style the semantic interface elements.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/uicontrol_wintitle_shortcut_menucascade.css");
Figure 35. UI Control
UI control
Figure 36. Window Title
window title
Figure 37. Shortcut
shortcut
Figure 38. Menu Cascade
menu cascade
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Style UI control elements
UI control custom
/* Style UI control elements. */
.uicontrol {
    padding-left: 2.5px;
    border: 2px solid #1d3557;
    padding-right: 2.5px;
}
Style window title elements
window title custom
/* Style wintitle elements. */
.wintitle {
    border-bottom: 2px dotted;
}
Style shortcut elements
shortcut custom
/* Add captions before shortcut elements. */
.shortcut::before,
.menucascade:has(.uicontrol>.shortcut)::before {
    content:"press: ";
    font-variant:normal;
    text-transform: none;
    color: #404040;
}
/* Do not add captions before shortcut elements contained by menucascade elements. */
.menucascade .shortcut::before {
    content:"none";
}
/* Style shortcut elements. */
.shortcut {
    font-variant: normal;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}
Style menu cascade elements
menu cascade custom
/* Add borders before and after menucascade elements. */
.menucascade {
    padding-left: 3.5px;
    border-left: 1.5px solid #D95700;
    border-right: 1.5px solid #D95700;
    padding-right: 3.5px;
}
/* Style the arrow character. */
abbr[title] {
    color: #D95700;
}
/* Add some space before the arrow character. */
abbr[title]::before {
    content: " ";
}
/* Add some space after the arrow character. */
abbr[title]::after {
    content: " ";
}
/* Change the separator between the uicontrol elements. */
abbr[title] {
    content: ">>";
} 

Abstract, Shortdesc

Adjust the placement of abstract elements and short description elements.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/styling/abstract_shortdesc.css");

By default, the short description element is rendered as a block element.

abstract short description overview
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Add a border after short description elements or abstract elements
/* Add a border after short description elements or abstract elements. */
.shortdesc:not(.abstract>.shortdesc),
.abstract {
    padding-bottom: 10px;
    border-bottom: 1px dotted #6f6f6f;
}
abstract short description custom

Note

Style every note element type.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/note.css");
notes overview
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Remove icons from any note type
note no icon
/* Remove icons from any note type. */
.note__title::before {
    display: none;
}
Remove note captions from any note type
note no caption
/* Remove note captions */
.note__title {
    content: none;
}
Change note icons
note icon custom

You can implement images from an external repository like GitHub or from your Heretto CCMS content library. For more information, see Graphics Implementation.

/* The following examples show custom icons implemented for a regular note and for a tip note.
To modify icons for different note types, use one of the following commented-out selectors instead.*/

/*
.note_trouble > .note__title::before,
.note_fastpath > .note__title::before,
.note_important > .note__title::before,
.note_remember > .note__title::before,
.note_restriction > .note__title::before,
.note_attention > .note__title::before,
.note_caution > .note__title::before,
.note_warning > .note__title::before,
.note_danger > .note__title::before
*/

/* An icon implemented from a public GitHub repository. */
.note_note > .note__title::before {
  content: "";
  margin-right: -20.5px;
  background-image:url('https://jorsek.github.io/pdfgen.github.io/shared_images/note-icon.png'); /* provide your own URL */
  background-size: 16px 16px;
  background-repeat: no-repeat;
  width: 16px; 
  height: 16px;
  padding-left: 20.5px;
}

/* An icon implemented from the CCMS content library. */
.note_tip > .note__title::before {
  content: "";
  margin-right: -20.5px;
  background-image:url('a15dc8d0-5fb8-11e9-9279-42010a8e0005.png'); /* provide your own UUID */
  background-size: 16px 16px;
  background-repeat: no-repeat;
  width: 16px; 
  height: 16px;
  padding-left: 20.5px;
}
Style note titles
note custom title
/* The following code selects every note type. If needed, remove selectors that you don't want to use for styling. */
.note_note > .note__title,
.note_trouble > .note__title,
.note_tip > .note__title,
.note_fastpath > .note__title,
.note_important > .note__title,
.note_remember > .note__title,
.note_restriction > .note__title,
.note_attention > .note__title,
.note_caution > .note__title,
.note_warning > .note__title,
.note_danger > .note__title {
    text-transform: capitalize;
    letter-spacing: 0.1em;
    color: #404040;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: normal;
}
Change note colors
note custom color
/* The following code selects every note type. If needed, remove selectors that you don't want to use for styling. */
.note_note > .note__title,
.note_trouble > .note__title,
.note_tip > .note__title,
.note_fastpath > .note__title,
.note_important > .note__title,
.note_remember > .note__title,
.note_restriction > .note__title,
.note_attention > .note__title,
.note_caution > .note__title,
.note_warning > .note__title,
.note_danger > .note__title {
 color: #6d597a
}
.note_note,
.note_trouble,
.note_tip,
.note_fastpath,
.note_importan,
.note_remember,
.note_restriction,
.note_attention,
.note_caution,
.note_warning,
.note_danger {
    border-left: 5px solid #6d597a;
    color: #6d597a;
    background-color: #eaac8b;
}

Xref, Related-Links

Style any cross-reference type.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/xref_related_links.css");

By default, long links are broke over multiple lines.


links overview
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Decorate links in the document body
links decorated
/* Decorate links in the document body. */
.xref,
.link {
    text-decoration: underline;
}

Codeblock, Codeph

Style code block elements and code phrase elements.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/codeblock_codeph.css");
Figure 39. Codeblock element
codeblock overview
Figure 40. Code phrase element (inline)
code phrase inline
Figure 41. Code phrase element (multiple lines).

By default, if a code phrase element cannot fit a page, it takes several lines and resembles a code block element. Consider using code block elements for long chunks of code.

code phrase multiple lines
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Change the font of code block elements and code phrase elements
codeblock custom font
/* Change the font of codeblock elements and codeph elements. */
code {
    font-family: monospace !important; /* The important property is needed to overwrite the default site settings. */
}
Adjust the colors of code block elements and code phrase elements
codeblock custom colors
/* Adjust the colors of codeblock elements and codeph elements. */
pre.codeblock > code,
pre.codeblock > code *,
code.codeph,
code.codeph * {
    background: black;
    color: green;
}
.codeblock > code {
    border-left: solid 5px green;
}

Figure Image

Adjust the placement of figure elements and image elements.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/figure_image.css");
Figure 42. Images. By default, the images in step command elements are automatically:
  • Resized to match @height="16px"
  • Have decorations like borders or shadows removed
images in steps overview
Hide full stops after title elements when description is present
Figure 43. Before
image title full stop
Figure 44. After
image title hide full stop

You apply this customization by adding the bold code in the XSLT tab.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">

    <xsl:import href="../../../../../../../../sdk2/internal/pdf_generator/pdf_generator.xsl"/>

    <xsl:template name="place-fig-lbl">
        <xsl:param name="stringName"/>
        <!--  Number of fig/title's including this one  -->
        <xsl:variable name="fig-count-actual" select="count(preceding::*[contains(@class, ' topic/fig ')]//*[contains(@class, ' topic/title ')]) - count(/normalized/map//*[contains(@class, ' topic/fig ')]//*[contains(@class, ' topic/title ')]) +1"/>
        <xsl:variable name="ancestorlang">
            <xsl:call-template name="getLowerCaseLang"/>
        </xsl:variable>
        <xsl:choose>
            <!--  title -or- title & desc  -->
            <xsl:when test="*[contains(@class, ' topic/title ')]">
                <figcaption>
                    <span class="fig--title-label">
                        <xsl:choose>
                            <!--  Hungarian: "1. Figure "  -->
                            <xsl:when test="$ancestorlang = ('hu', 'hu-hu')">
                                <xsl:value-of select="$fig-count-actual"/>
                                <xsl:text>. </xsl:text>
                                <xsl:call-template name="getVariable">
                                    <xsl:with-param name="id" select="'Figure'"/>
                                </xsl:call-template>
                                <xsl:text></xsl:text>
                            </xsl:when>
                            <xsl:otherwise>
                                <xsl:call-template name="getVariable">
                                    <xsl:with-param name="id" select="'Figure'"/>
                                </xsl:call-template>
                                <xsl:text></xsl:text>
                                <xsl:value-of select="$fig-count-actual"/>
                                <xsl:text>. </xsl:text>
                            </xsl:otherwise>
                        </xsl:choose>
                    </span>
                    <xsl:apply-templates select="*[contains(@class, ' topic/title ')]" mode="figtitle"/>
                    <xsl:if test="*[contains(@class, ' topic/desc ')]">
                        <!-- <xsl:text>. </xsl:text>  -->
                    </xsl:if>
                    <xsl:for-each select="*[contains(@class, ' topic/desc ')]">
                        <span class="figdesc">
                            <xsl:call-template name="commonattributes"/>
                            <xsl:apply-templates select="." mode="figdesc"/>
                        </span>
                    </xsl:for-each>
                </figcaption>
            </xsl:when>
            <!--  desc  -->
            <xsl:when test="*[contains(@class, ' topic/desc ')]">
                <xsl:for-each select="*[contains(@class, ' topic/desc ')]">
                    <figcaption>
                        <xsl:call-template name="commonattributes"/>
                        <xsl:apply-templates select="." mode="figdesc"/>
                    </figcaption>
                </xsl:for-each>
            </xsl:when>
        </xsl:choose>
    </xsl:template>

</xsl:stylesheet>
Disable figure numbering
See Figure no Numbering.

Description

Place desc elements below the titles in figure elements and image elements.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/description.css");
Figure 45. Table Description
table description overview
Figure 46. Figure Description
figure description overview
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Shrink figure and table descriptions
images description smaller
/* Shrink figure and table descriptions. */
.figdesc,
.tabledesc,
.figdesc *,
.tabledesc * {
  font-size: 14px !important;
}
Add a border to figure and table descriptions
add border to figure title and description
/* Add a left border to figure and table descriptions. */
.figdesc,
.tabledesc {
  border-left: solid 5px #dcdcdc;
  padding-left: 10px;
}

Definition List

Style the definition list elements.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/definition_list.css");
definition list
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Enlarge definition list titles
definition list large titles
/* Enlarge definition list titles. */
dt,
dt * {
    font-size: 26px !important;
}
Remove the left border from definition list entries
definitions remove the border
/* Remove the left border from definition list entries. */
dt,
dd {
    border: none;
    padding-left: 0px;
}
Add background shading to definition list entries
definitions add background shading
/* Add background to the definition list entries. */
dt,
dd {
    background-color: #f4f4f4;
    padding-top: 5px;
}
dd {
    padding-bottom: 5px;
}
Lay out definition list elements in two or more columns
definitions two columns
/* Lay out definition list elements in two or more columns. */
dl {
  column-count: 2; /* "2" or more */
}
Tip: For Heretto PDF Generator, setting a high number of columns for definition list elements works well with landscape document orientations. For more information about the document orientation and page size, see Orientation Size.

Cite, Long Quote, Quote

Style cite elements, long quote elements, and quote elements.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/cite_long_quote_quote.css");
Figure 47. Cite
cite overview
Figure 48. Long Quote.

By default, the text in long quote elements is smaller than text in the document body.

long quote default
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Encapsulate cite elements in inverted commas
cite inverted coma
/* Encapsulate cites in inverted commas. */
.cite::before {
    content:'"';
}
.cite::after {
    content:'"';
}
Make cite elements italic
cite italics
/* Make cite elements italic. */
.cite {
    font-style: italic;
}
Justify text in long quote elements
justify text in long quote
/* Justify text in lq elements. */
.lq,
.lq * {
    text-align: justify;
}
Increase margins
long quote increase margins
/* Increase margins. */
.lq {
    margin-left: 15px;
    margin-right: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

Title

Consistently style the titles of topics, sections, tables, and figures.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/title.css");

By default, the titles of topics nested deeper than Level 5 are styled in the same way as Level 5 titles.

titles
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Style every title
custom titles
/* Style every title. */
.title,
.title *,
.table--title-label,
.fig--title-label,
figcaption:not(figcaption > .desc) {
    color: teal;
    letter-spacing: 0.05em;
}
Style only topic titles
style only topic titles
/* Style only topic titles. */
.topic > .title,
.topic > .title * {
    color: darkorange;
    letter-spacing: 0.05em;
}
Style section titles
style only section titles
/* Style section titles. */
.sectiontitle,
.sectiontitle * {
    color: darkmagenta;
    letter-spacing: 0.05em;
}
Style figure and table titles
style figures and tables titles
/* Style figure and table titles. */
table .title,
.table--title-label,
.fig--title-label,
figcaption:not(figcaption > .desc) {
    color: darkred;
    letter-spacing: 0.05em;
}
Style topics on different levels
titles custom style
/* You can use .topictitle1, topictitle2, .topictitle3, etc. */
.topictitle1, 
.topictitle1 * {
    border-left: 10px solid darkred;
    padding-left: 10px;
    color: darkred;
}
Adjust margins before topic titles
topic titles margin
/* Adjust margins before topic titles. */
.topic > .title {
    margin-top: 80px;
}
Remember: We recommend to adjust page breaks prior to adjusting margins before topic titles. For more information, see Breaks.
Adjust margins before topic titles except for level 1 topic titles.
adjust margins except level 1
/* 
.topic > .title:not(.topictitle1) {
    margin-top: 80px;
}

Section

Adjust the placement of section elements.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/section.css");
section overview
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Increase margins before sections
section increased margins
/* Increase margins before sections. */
.section {
  margin: 50px 0px 0px 0px !important; /* The important property is needed for sites and is not needed for PDF Gen. */
}

Ordered List, Unordered List, Step, Substep, Choice

Adjust the placement of ordered list elements, unordered list elements, step elements, substep elements, and choice elements.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/ordered_list_unordered_list_step_substep_choice.css");
task elements overview
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Adjust margins before list item elements
Remember: We recommend keeping the same margins before list item elements and paragraph elements. See Paragraph.
list item margins
/* Adjust margins before list item elements. */
.li:not(li.step, li.substep, li.choice) {
    margin-top: 10px;
}
Adjust margins before step elements, substep elements, and choice elements
step substep choice margins
/* Adjust margins before step elements, substep elements, and choice elements. */
li.step,
li.step ~ li.step {
  margin-top: 10px;
}
li.substep, li.choice {
    margin-top: 10px;
}
Style step commands
style step command
/* Style step commands. */
li.step > .cmd,
li.step > .cmd > span.ph {
    font-weight: bold;
    color: #457b9d;
}
Style substep commands
style substep commands
/* Style substep commands. */
li.substep > .cmd,
li.substep > .cmd > span.ph {
    font-weight: bold;
}
Style choices content
style choice content
/* Style choices. */
li.choice,
li.choice > span.ph {
    font-style: italic;
}
Do not reset step-counters after step section elements
don't reset counters after step sections
/* Do not reset step-counters after step section elements */
ol.steps[start] {
    counter-reset: lis;
}

Cause, Condition, Context, Example, Postreq, Prereq, Remedy, Result, Steps, Stepsection

Add labels preceding the task topic and troubleshooting topic “sections”.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/cause_condition_context_example_postreq_prereq_remedy_result_steps_stepsection.css");
Figure 49. Task Topic
task topic various elements
Figure 50. Troubleshooting Topic
troubleshooting topic
DITA Outputclass Attributes

This module enables you to set the following @outputclass attributes in the DITA source:

process
To change the default “Procedure” label to “Process” before steps in a task topic, assign the @outputclass="process" attribute to the root topic element.
process caption
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Style labels
styled task captions
/* Style captions. */
.prereq::before,
.postreq::before,
.steps::before,
.steps-unordered::before,
.stepsection,
.cause::before,
.remedy::before,
.condition::before,
.context::before,
.result::before,
.example::before {
    color: darkred;
    font-size: 22px;
    font-variant: small-caps;
}
Hide labels
context prerequisite disabled
/*.postreq::before,
.steps::before,
.steps-unordered::before,
.cause::before,
.remedy::before,
.condition::before,
.result::before,
.example::before,*/
/* Hide captions. */
.prereq::before,
.context::before {
    display: none;
}

Choices, Info, Stepresult, Stepexample, Solution, Substeps, Troublesolution

Add labels before the task topic and troubleshooting topic “subsections”.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/choices_info_stepresult_stepexample_solution_substeps_troublesolution.css");
Figure 51. Task Topic
task various elements
Figure 52. Troubleshooting Topic
troubleshooting topic
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Disable labels before step example elements and step result elements
Figure 53. Enabled Labels
labels before example and step result on
/* Disable elements before stepxmp elements. */
.stepxmp::before {
  display: none;
}
/* Disable captions before stepresult elements. */
.stepresult::before{
  display: none;
}
Figure 54. Disabled Labels
disable labels before example and step result
Add labels before info elements
Figure 55. Disabled Labels
no labels before info
Figure 56. Enabled Labels
label on before info
/* Add captions before info elements. */
.info::before {
  content: "Info: ";
}
Disable the left border
steps no left border
/* Disable the left border. */
.stepresult,
.info,
.stepxmp,
.troubleSolution,
.choices,
.substeps {
    border: none;
    padding-left: 0px;
    margin-left: 3px;
}
.step {
    border: none;
}

Choices, Steps, Substeps Numbering

Add custom numbering to choices elements, steps elements, and substeps elements.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/choices_steps_substeps_numbering.css");
Figure 57. Enabled Module
task various elements
Figure 58. Disabled Module
choices numbering off
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Change the orbs color
custom orbs color
/* Change the orbs color. */
li.step::before,
li.substep::before,
li.choice::before {
    background-color: #457b9d;
    color: #FFF;
}
Disable the left border
See Choices, Info, Stepresult, Stepexample, Solution, Substeps, Troublesolution.

Choicetable, Table

Style choice table elements and table elements.

Overview
Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/choicetable_table.css");
Figure 59. Table with a header row
table with header row
Figure 60. Table without a header row
table without header row
Figure 61. Choicetable.

The “Option” and “Description” choice table headers are generated automatically.

table option and description headers
Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Align table entries vertically
choice table middle align
/* Align entries vertically. */
table > tbody > tr,
table > tbody > tr > td {
  vertical-align: middle; /*or "top", "bottom"
}
Style choice table elements and table elements
table custom
/* Table header color */
table > thead > tr,
table > thead > tr > th,
table > thead > tr > th *,
table > thead > tr > th > .fn::footnote-call {
  color: #ffffff;
  background-color: #3c6e71;
}

/* Odd rows colors. */
table > tbody > tr:nth-child(odd),
table > tbody > tr:nth-child(odd) > td {
      background-color: #d9d9d9;
      color: #353535;
}

/* Even rows colors. */
table > tbody > tr,
table > tbody > tr > td {
      background-color: #ffffff;
      color: #353535;
}

/* Borders colors. */
table {
  border-color: #3c6e71;
}

Palette Modules

Determine the color palette for the rendered content.

Table 4. Palette Modules Reference
Module Description
Gray Module Apply gray-scale styling to the content.
Color Module Apply colorful styling to the content.
No Palette Module Apply high-contrast black-and-white styling to the content.

Version One Templates

Version one templates include: “blue theme”, “minimalist”, base style, and simple styles.

Overview

Figure 62. Minimalist - Cover Page
minimalist cover page
Figure 63. Minimalist - TOC
minimalist table of content
Figure 64. Minimalist - Concept Topic
minimalist concept
Figure 65. Minimalist - Task Topic
minimalist task

Documentation

If you want to maintain your existing Heretto PDF Generator templates based on version one templates, contact your Customer Success Manager.

Graphics Implementation

You can implement graphics to a Heretto PDF Generator template by linking to a repository or by embedding Base64-encoded images.

Linking Graphics from the External Repository

You can link to a graphic stored in a repository external to your Heretto CCMS instance. For example, GitHub.

<img src="https://github.com/Jorsek/pdfgen.github.io/blob/master/shared_images/logo.png?raw=true"/>

Linking Graphics from the content library

You can link to a graphic stored in your Heretto CCMS content library by providing the file UUID followed by the file extension. For more information, see Obtain a Resource UUID.

<img src="a15dc8d0-5fb8-11e9-9279-42010a8e0005.png"/>

Embedding Base64 Graphics

You can embed a Base64-encoded graphic into a template. For more information, see Encode a Graphic to Base64.

<img src="data:image/png;base64,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
"/>

Example

<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_generic_200px_500px.png"/>
                    </div>
                </div>
            </div>  
        </div>
    </div>
</h1>
Figure 66. Cover Page - Custom Logo
custom cover page logo

Encode a Graphic to Base64

You can encode graphics to Base64 by using an online tool or by doing it locally. It is useful if you want to embed graphics in a Heretto PDF Generator template.
  • To convert an image to Base64 by using an online tool, do the following:
    1. In your web browser, go to https://www.base64-image.de/.
      Important: The https://www.base64-image.de/ tool is provided by a third party, and Heretto, Inc., is not responsible for any changes in behavior, functionality, or discontinuation of the tool.
    2. Drag-and-drop an image anywhere in the website.
    3. Click copy image.
  • To convert an image to Base64 locally on macOS, do the following:
    1. Press Cmd > Space and enter terminal.
    2. Press Enter.
    3. Enter base64 -i <image_filepath> -o <output_filepath>
      Where:
      • <image_filepath> is the path to the image that you want to encode.

        For example: /Users/<your_username>/Desktop/imageA.png

      • <output_filepath> is the path to the file that will contain your Base64-encoded image.

        For example: /Users/<your_username>/Desktop/imageA.txt

    4. Open the <output_filepath> and copy its contents.
  • To convert an image to Base64 locally on Windows, do the following:
    1. Click Start and enter: cmd
    2. Click Command Prompt.
    3. Enter certutil -encode <image_filepath> <output_filepath>
      Where:
      • <image_filepath> is the path to the image that you want to encode.

        For example: C:\Users\<your_username>\Desktop\imageA.png

      • <output_filepath> is the path to the file that will contain your Base64-encoded image.

        For example: C:\Users\<your_username>\Desktop\imageA.txt

    4. Open the <output_filepath> and copy the file contents between:

      -----BEGIN CERTIFICATE-----

      and

      -----END CERTIFICATE-----

Obtain a Resource UUID

Each resource in Heretto CCMS has its own Universally Unique Identifier (UUID).

  1. In the content library, right-click a resource and select Properties.
  2. From the API Info area, copy the UUID.

Styling Annotated Images

In Heretto CCMS, you can add callouts to the images to annotate them. These callouts can be globally styled according to your branding needs.

Guidelines

  • We recommend inserting images inside <fig> elements. Our styling examples are prepared with respect to that suggestion.

  • Note that you need to use the !important CSS property to overwrite the styling applied in the SVG Editor embedded in Heretto CCMS.

  • Remember that the updated styling is applied in the final output and is visible the Preview mode. Your Heretto PDF Generator publishing scenario customizations do not overwrite the Content Editor styling.

  • Annotation callouts are represented by <path> elements. Modified CSS code will also affect other <path> elements created in the SVG Editor, specifically those created either with the Path or Pencil tool.

Examples

You can apply customizations by pasting the following code snippets under the @import rules.

Styling the annotations border

You can change the default border look of annotations globally by applying a proper CSS code. Then, there is no need to individually change the color of each callout. In the following example, new styling has been applied to the border color and width.

/* Custom annotation border */
 figure svg g path {
    stroke: #545454 !important;
    stroke-width: 2px !important;
 }
An exemplary product image with styled annotations
Styling the annotations fill color

You can change the default white fill color of your annotations.

 /* Custom annotations fill color */
 figure svg g path {
     fill: #fae3d9 !important;
 }
An exemplary product image with styled annotations
Changing the default font styling

You can change the default font properties of the numbers in the annotation callouts.

/* Custom annotation font */
 figure svg g + text {
    fill: #e65f26 !important;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;
    font-weight: bold !important;
    font-size: 22px !important;
 }
An exemplary product image with styled annotations
  • Note that in this case, the fill property is responsible for the font color, not the color property.

  • Remember that changing the font size may result in numbers not aligned with the callout. This calls for additional styling with CSS.

  • This styling does not impact text fields introduced with the Text Tool in the editor.

  • If you want to apply these settings only to annotations in a particular figure, see how to apply outputclasses to the figures.

Applying styling to particular images only

You may want to apply different type of styling to different kinds of products instead of imposing the global styling on all images.

  1. Select a figure element with an annotated image.

  2. Go to the Attributes tab in the right pane.

  3. Apply some meaningful value to the outputclass attribute.

  4. Introduce the same value to the provided code in place of the underlined example-class phrase.

    /* Custom annotations styling on specific images */
     figure.example-class svg g path {
        stroke: #545454 !important;
        stroke-width: 2px !important;
        fill: #eee !important;
     }
    The provided code combines a few changes. It modifies the:
    • border color
    • border width
    • fill color
Applying styling to particular annotations only

If there is a specific annotation callout that you want to highlight, you can prepare a global styling for such annotations. This is a much safer option than modifying the individual styling in the editor because it enables you to easily change the appearance of selected annotations globally. Then, you do not need to apply individual styling to the selected annotations in numerous topics.

  1. Annotate your image.

  2. Select the annotation that you want to highlight.

  3. Introduce some meaningful value in the class field.
    A specific class applied to the annotation
  4. Save changes by selecting the Close button.

  5. Introduce the same value in the provided code in place of the underlined main-annotation phrase.

     /* Custom styling on specific annotations */
     figure svg g.main-annotation path {
         stroke: #ff0000 !important;
         stroke-width: 4px !important;
     }
  6. Save your scenario. Styling will be applied only to the annotations with a class specified in the previous steps.

Styling applied only to the annotations with a specific class

You can change the font of a given annotation too:

/* Custom font on specific annotations */
figure svg g.main-annotation + text {
    fill: #ff0000 !important;
    font-weight: bold !important;
}

Remember to change the change the main-annotation phrase to the one that you have specified earlier in the SVG Editor.

Font styling applied only to the annotations with a specific class

Develop a Heretto PDF Generator Template

You you can develop a Heretto PDF Generator template directly in Heretto CCMS.

This procedure assumes that you want to base your template on either the Gray template or Color template.

Tip: We recommend extending the Gray and Color templates with custom CSS rather than creating a template from scratch.
  1. Create a Heretto PDF Generator scenario. See Create a Heretto PDF Generator Scenario.
  2. In the right pane, enable the document preview:
    1. Click Select map to preview.
    2. In the Select Map window, select a map.
    3. Click Select.
      Tip: When you change the code, to refresh the preview, click Generate PDF.
  3. If you want to see the individual Gray template or Color template modules in the CSS tab:
    1. While holding the Ctrl keyboard key click the link.
    1. From the tab that opens, copy the entire code.
    2. Replace the contents of the CSS tab with the copied code.
    pdf default preview
  4. In the CSS, Cover page HTML, and XSLT tabs, customize the template.
    To learn about templates customization, see Heretto PDF Generator Templates Development.
    Important: Your edits are not automatically saved! As you develop the code, we recommend to periodically save the template by clicking Save Scenario.
    pdf gen save scenario
  5. Click Save Scenario.
  6. Close the Heretto PDF Generator by clicking the Close icon in the right-top corner.
Your publishing scenario is now available in the publishing interface.

Create a Heretto PDF Generator Scenario

Heretto CCMS Administrator can create Heretto PDF Generator publishing scenarios.

  1. In the Dashboard interface, from the Administration menu, select PDF Generator.
  2. Click New scenario.
  3. In the New scenario window, fill in the Scenario Name field with letters, numbers, hyphens, or underscore characters only.
    The name that you enter will be visible in the publishing interface.
  4. From the Template drop-down menu, select a template.
    Tip: The Gray and Color templates are complete and modular templates that you can use to publish your content with very little customizations out of the box.
  5. Click the Browse button and select where you want to save your configuration files.
    Tip: We recommend saving your templates in a single, obvious, and easily accessible directory in the content library.
  6. If you want to generate chapter-level tables of contents (TOCs):
    1. Select the Chapter Tocs check box.
    2. Specify the maximum chapter-level TOCs depth by filling in the Chapter Toc Depth field.
      Enter 5
    Figure 67. Main TOC
    main table of content
    Figure 68. Chapter-Level TOC
    chapter level table of content
  7. If you want to add XSLT parameters:
    1. Click Add XSLT Param.
    2. Fill in the parameter fields.
      fig.caption.placement = below
      Tip: You can then use the XSLT parameters in the XSLT tab.
  8. Click Create.
  9. Click Save Scenario.

Enable or Disable a Heretto PDF Generator Scenario

Administrators can show or hide a publishing scenario in the publishing interface.

  1. In the Dashboard, click PDF Generator.
  2. Hover-over a publishing scenario and click .
  3. From the context menu, select an action:
    • To disable a publishing scenario, select Disable.

      Disabled publishing scenarios are not visible in the publishing interface.

    • To enable a disabled publishing scenario, select Enable.

      Enabled publishing scenarios are visible in the publishing interface.

Delete a Heretto PDF Generator Scenario

Administrators can delete publishing scenarios that are no longer needed.

  1. In the Dashboard, click PDF Generator.
  2. Hover-over a publishing scenario and click .
  3. From the context menu, select Delete.
  4. If prompted, confirm the deletion.

Duplicate a Heretto PDF Generator Scenario

Administrators can duplicate publishing scenarios.

Tip: Duplicating a publishing scenario is useful if you want to apply some styling modifications without the need to overwrite the original scenario.
  1. In the Dashboard, click PDF Generator.
  2. Hover-over a publishing scenario and click .
  3. From the context menu, select Duplicate.
  4. In the Duplicate scenario window:
    1. Optional: Edit the Scenario Name.
    2. Click the Browse button and select where you want to save your configuration files.
      Tip: We recommend saving your templates in a single, obvious, and easily accessible directory in the content library.
    3. Click Duplicate.

Locally Develop a Heretto PDF Generator Template

You can develop a Heretto PDF Generator template on Windows , macOS, and Linux.

In Heretto CCMS, do the following:
  1. In the Dashboard interface, from the Administration menu, select PDF Generator.
  2. Do any of the following:
  3. In the right pane, enable the document preview:
    1. Click Select map to preview.
    2. In the Select Map window, select a map.
    3. Click Select.
      Tip: When you change the code, to refresh the preview, click Generate PDF.
  4. In the right pane, from the HTML tab, copy the HTML code.
Locally, develop a template by doing the following:
  1. Create a directory for the template development.
    Create a directory on your desktop:
    • C:\Users\user_name\Desktop\PDFGen (Windows)
    • /Users/user_name/Desktop/PDFGen (Mac)

    Where user_name is your user name.

    Tip: If you need version control, you can keep the template files in a Git repository or other source control environment.
  2. In the template development directory that you created in 5, create and edit the testing.html file.
    PDFGen/
    |- testing.html
  3. Paste the HTML code that you copied in 4 to the testing.html file.
  4. In the template development directory that you created in 5, create a testing.css file.
    PDFGen/
    |- testing.html
    |- testing.css
  5. Develop the template in the testing.css file.
Locally, preview the template by doing the following:
  1. Open the shell application by doing one of the following:
    • For Windows, press the Start key and enter cmd
    • For macOS, press Cmd > Space and enter terminal
    • For Linux (Ubuntu 19.10), press the Super key and enter terminal
  2. At the prompt, navigate to the template development directory by entering cd templates_development
    Where templates_development is the directory that you created in 5.
    Enter:
    • C:\Users\user_name\Desktop\PDFGen (Windows)
    • /Users/user_name/Desktop/PDFGen (Mac)

    Where user_name is your user name.

  3. Depending on your operating system, perform one of the following actions:
    • For macOS and Linux, enter prince testing.html -s testing.css
    • For Windows, enter "C:\Program Files (x86)\Prince\engine\bin\prince.exe" testing.html -s testing.css
      Important: The command for Windows assumes that you used the default settings during the Prince installation. If you selected a different Prince installation path, modify the command accordingly.
      Tip: For Windows, you can add C:\Program Files (x86)\Prince\engine\bin\ as a system path environment variable. This way, you will be able to run Prince by entering prince in the command line instead of entering "C:\Program Files (x86)\Prince\engine\bin\prince.exe".

      For more information, see Add the Prince Path to the Windows System Environment Variables.

The locally-generated PDFs may include a Prince watermark (top-right corner).

Figure 69. Locally Generated PDF Example
local prince publishing

Move a Local Heretto PDF Generator templateHeretto PDF Generator to Heretto CCMS

You move a local Heretto PDF Generator template to Heretto CCMS to make the template available in the publishing interface.

  1. Develop a Heretto PDF Generator template locally. See Locally Develop a Heretto PDF Generator Template.
  2. From the testing.css file that you developed locally, copy the CSS code.
  1. In the Dashboard interface, from the Administration menu, select PDF Generator.
  2. Do any of the following:
  3. In the left pane, in the CSS tab, paste the CSS code that you copied from the testing.css file.
  4. Click Save Scenario.

Add the Prince Path to the Windows System Environment Variables

You add the Prince Path to the system environment variables to easily run Prince from the Windows Command Prompt.
Important: This procedure is only applicable for Windows. You do not need to perform this procedure on macOS or Linux.
  1. Click Start and enter environment variables.
  2. Select Edit the system environment variables.
  3. In the System Properties window, click Environment Variables.
  4. In the Environment Variables window, under System variables, double-click Path.
    path variable
  5. In the Edit environment variable window, click New.
  6. Enter "C:\Program Files (x86)\Prince\engine\bin\"
    Important: This assumes that you used the default settings during the Prince installation. If you selected a different Prince installation path, enter the relevant path.
    prince engine variable
  7. In each window, click OK.
You can run Prince by entering prince in the Command Prompt now.

The following example shows that you can enter prince command to run Prince instead of the longish "C:\Program Files (x86)\Prince\engine\bin\" command.

prince command prompt