Monday, 30 April 2007

Customizing DITA OT-generated XHTML

I finally figured out how to insert a block of HTML in the header of every generated XHTML file.
The sequence seems to be:

  1. Create a file containing the well-defined XHTML you want included in the header of each generated file, for example:

    <div id="toolbar"><a onclick="history.back()" href="#"><img alt="Display the previous topic" src="back_32x32.gif" border="0" /></img></a><a onclick="history.forward()" href="#"><img alt="Display the next topic" src="forward_32x32.gif" border="0" /></img></a>
    </div>

    Note that there shouldn't be an <?xml... line at the top of the fragment's file.


  2. Edit the file that passes parameters to ANT. I'm using the FM-DITA plugin, so I edited the ditafm-ant.xml file. In the <target name="html"> section, add the lines:

    <param name="args.hdr" value="file:/C:/fullpath/toolbar.html"/>

    Note that a) this must be a complete path, b) it should be a URI with forward slashes.
  3. To copy any additional files (for example, the two GIF files referenced in my header), you can add COPY statements to the ANT build. For example:

    <copy file="common/back_32x32.gif" todir="${project.output.dir}${file.separator}html${file.separator}graphics" />
    <copy file="common/forward_32x32.gif" todir="${project.output.dir}${file.separator}html${file.separator}graphics" />

    Note that if you're using DITA+FM, the COPY element cannot be embedded within an ANTCALL element, so place it, for example, between the </antcall> and the </target> elements in the <target name="html" > section of ditafm-ant.xml.

  4. Note also that for some strange reason best known to ANT, the path of the file to copy is relative to the DITA-OT home folder, and doesn't need a URI prefix.

  5. Re-generate the output.


Note that there are other parameters that work the same way...see dita2htmlImpl.xsl in the dita-ot xsl/xslhtml folder for details.