How to Repeat Note Titles After a Page Break

Suppose that you have large notes that split between pages or columns and you want the note icon and title to be displayed on the next page/column. To add this functionality, use an Oxygen Publishing Template and follow these steps:

If you have not already created a Publishing Template, you need to create one. For details, see How to Create a Publishing Template.
Link the folder associated with the publishing template to your current project in the Project Explorer view.
Using the Project Explorer view, create an xslt folder inside the project root folder.

In the newly created folder, create an XSL file (for example, named merged2html5Extension.xsl) with the following content:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:xs="http://www.w3.org/2001/XMLSchema"
  exclude-result-prefixes="xs"
  version="3.0">
  
  <!-- Display notes titles and content in table cells. -->
  <xsl:template match="*" mode="process.note.common-processing">
    <xsl:param name="type" select="@type"/>
    <xsl:param name="title">
      <xsl:call-template name="getVariable">
        <xsl:with-param name="id" select="concat(upper-case(substring($type, 1, 1)), 
substring($type, 2))"/>
      </xsl:call-template>
    </xsl:param>
    <table>
      <xsl:call-template name="commonattributes">
        <xsl:with-param name="default-output-class" 
select="string-join(($type, concat('note_', $type)), ' ')"/>
      </xsl:call-template>
      <xsl:call-template name="setidaname"/>
 <!-- Normal flags go before the generated title; revision flags only go on the content. -->
      <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]
/prop" mode="ditaval-outputflag"/>
      <thead>
        <tr>
          <th class="note__title">
            <xsl:copy-of select="$title"/>
            <xsl:call-template name="getVariable">
              <xsl:with-param name="id" select="'ColonSymbol'"/>
            </xsl:call-template>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <xsl:text> </xsl:text>
            <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]
/revprop" mode="ditaval-outputflag"/>
            <xsl:apply-templates/>
            <!-- Normal end flags and revision end flags both go out after the content. -->
            <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" 
mode="out-of-line"/>
          </td>
        </tr>
      </tbody>
    </table>
  </xsl:template>
  
</xsl:stylesheet>

Open the template descriptor file associated with your publishing template (the .opt file) and set the XSLT stylesheet created in the previous step with the com.oxygenxml.pdf.css.xsl.merged2html5 XSLT extension point:

<publishing-template>
  ...
  <pdf>
    ...        
    <xslt>
      <extension
        id="com.oxygenxml.pdf.css.xsl.merged2html5"
        file="xslt/merged2html5Extension.xsl"/>
    </xslt>

Create a css folder in the publishing template directory. In this directory, save a custom CSS file with rules that style the glossary structure. For example:

table.note th,
table.note td {
  text-align: left;
  padding: .75em .5em .75em 3em;
}

table.note {
  background-repeat: no-repeat;
  background-image: url("../img/note.svg");
  background-position: .5em .5em;
  border: 1px solid;
}

table.note.note_other { background-image: none; }
table.warning { background-image: url("../img/warning.svg"); }
table.caution { background-image: url("../img/caution.svg"); }
table.trouble { background-image: url("../img/troubleshooting.svg"); }
table.important { background-image: url("../img/important.svg"); }
table.attention { background-image: url("../img/attention.svg"); }
table.notice { background-image: url("../img/notice.svg"); }
table.remember { background-image: url("../img/remember.svg"); }
table.fastpath { background-image: url("../img/fastpath.svg"); }
table.restriction { background-image: url("../img/restriction.svg"); }
table.danger { background-image: url("../img/danger.svg"); }
table.tip { background-image: url("../img/tip.svg"); }

table.note {
  background-color: rgba(0, 120, 160, 0.09);
  border-color: #0078A0;
}
table.note_danger,
table.note_caution {
  background-color: rgba(255, 202, 45, 0.1);
  border-color: #606060;
}
table.note_warning,
table.note_attention,
table.note_important {
  background-color: rgba(255, 202, 45, 0.1);
  border-color: #FFCA2D;
}
table.note_restriction {
  background-color: rgba(255, 226, 225, 0.32);
  border-color: #FF342D;
}

Open the template descriptor file associated with your publishing template (the .opt file) and reference your custom CSS file in the resources element:

<publishing-template>
  ...
  <pdf>
    ...                
    <resources>            
      <css file="css/custom.css"/>
    </resources>

Edit the DITA Map PDF - based on HTML5 & CSS transformation scenario.
In the Templates tab, click the Choose Custom Publishing Template link and select your template.
Click OK to save the changes and run the transformation scenario.