Footnotes Related to Tables in PDF Documents

pjporter88
Posts: 4
Joined: Sat Oct 16, 2021 8:36 pm

Footnotes Related to Tables in PDF Documents

Post by pjporter88 » Sun Oct 17, 2021 2:55 pm

Hello,

I have been reviewing how to style footnotes in PDF output using DITA to HTML5 with CSS. It only seems to cover "typical" cases of footnotes that get collected and placed at the bottom of the page, where a separator line could be added.

We have a use case where we often have footnotes inside the cells of tables and want the footnotes placed in small font immediately underneath the table instead of at the bottom of the page, so that the footnotes are "connected" to the table. Alternatively, perhaps the footnotes could go inside an html footer element for that table.? I know there is no footer for tables in DITA though.

Is this possible? If so, how might that be done?

Thank you!
Pat

julien_lacour
Posts: 218
Joined: Wed Oct 16, 2019 3:47 pm

Re: Footnotes Related to Tables in PDF Documents

Post by julien_lacour » Tue Oct 19, 2021 9:41 am

Hello Pat,

If you want to move table footnotes follow these instructions:
  1. Create a publishing template file (.opt) in a new folder from your project. Then create an xslt folder inside it.
  2. In the newly created folder, create an XSLT style-sheet (for example merged2mergedExtension.xsl) with the following content:

    Code: Select all

        <?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="2.0">
    
          <!-- Match only top level tables (i.e tables that are not nested in other tables),
            that have footnotes. -->
          <xsl:template match="
              *[contains(@class, 'topic/table')]
              [not(ancestor::*[contains(@class, 'topic/table')])]
              [//*[contains(@class, 'topic/fn')]]">
            <xsl:next-match>
              <xsl:with-param name="top-level-table" select="." tunnel="yes"/>
            </xsl:next-match>
    
            <!-- Create a list with all the footnotes from the current table. -->
            <ol class="- topic/ol " outputclass="table-fn-container">
              <xsl:for-each select=".//*[contains(@class, 'topic/fn')]">
                <li class="- topic/li " id="{generate-id(.)}" outputclass="table-fn">
                  <xsl:apply-templates select="node()"/>
                </li>
              </xsl:for-each>
            </ol>
          </xsl:template>
    
          <!-- Match the footnotes in table entries, replace them with a link. -->
          <xsl:template match="*[contains(@class, 'topic/entry')]//*[contains(@class, 'topic/fn')]">
            <xsl:param name="top-level-table" tunnel="yes"/>
            <!-- Determine the footnote number. -->
            <xsl:variable name="fn-number" select="
                index-of($top-level-table//*[contains(@class, 'topic/fn')], .)"/>
            <xref type="fn" class="- topic/xref " href="#{generate-id(.)}"
              outputclass="table-fn-call">
              <xsl:value-of select="$fn-number"/>
            </xref>
          </xsl:template>
    
        </xsl:stylesheet>
    
  3. Open the .opt file and set the XSLT style-sheet created in the previous step with the com.oxygenxml.pdf.css.xsl.merged2html5 XSLT extension point:

    Code: Select all

        <publishing-template>
          ...
          <pdf>
            ...        
            <xslt>
              <extension
                id="com.oxygenxml.pdf.css.xsl.merged2merged"/>
                file="xslt/merged2mergedExtension.xsl"
            </xslt>
    
  4. 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:

    Code: Select all

        /* Customize footnote calls, inside the table. */
        *[outputclass ~= 'table-fn-call'] {
          color: black;
          text-decoration: none;
          font-size: smaller;
          vertical-align: super;
          line-height: none;
        }
    
        /* Hide the "on page .." text that follows xrefs. */
        *[outputclass ~= 'table-fn-call']:after {
          display: none;
        }
    
        /* Customize the list containing all the table footnotes. */
        *[outputclass ~= 'table-fn-container'] {
          border-top: 1pt solid black;
        }
    
        /* Customize footnotes display, below the table. */
        *[outputclass ~= 'table-fn'] {
          font-size: 1em;
        }
        *[outputclass ~= 'table-fn']::marker {
          font-size: 1em;
        }
    
  5. Open the template descriptor file associated with your publishing template (the .opt file) and reference your custom CSS file in the resources element:

    Code: Select all

        <publishing-template>
          ...
          <pdf>
            ...                
            <resources>            
              <css file="css/custom.css"/>
            </resources> 
    
  6. Edit the DITA Map PDF - based on HTML5 & CSS transformation scenario.
  7. In the Templates tab, click the Choose Custom Publishing Template link and select your template.
  8. Click OK to save the changes and run the transformation scenario.
Feel free to change the values from the CSS in order to obtain the desired output.

Regards,
Julien

pjporter88
Posts: 4
Joined: Sat Oct 16, 2021 8:36 pm

Re: Footnotes Related to Tables in PDF Documents

Post by pjporter88 » Tue Oct 19, 2021 2:48 pm

Thank you Julien!
Can't wait to implement this.
Very much appreciated!
Pat

Post Reply