Digital humanities

Maintained by: David J. Birnbaum ( [Creative Commons BY-NC-SA 3.0 Unported License] Last modified: 2022-04-27T15:03:28+0000

Text #5: XSLT answers

The task

Your task was to write XSLT that will create a reading view of our Phantom of the opera novel in HTML. The test instructions provide general guidelines along with a list of required and optional tasks.

Basic solution

The following XSLT implements all of the required tasks. We explain how the parts work with embedded XML comments. (We always comment our stylesheets, but because this is the answer to a test question, it includes more commentary than we would normally use.) You can read our basic output at


          <xsl:value-of select="$title"/>

Table of contents

  • .
  • [Note ( ): ]

    Solution with bonus tasks

    The following enhanced solution implements the bonus tasks. You can read our the output of this bonus implementation at

              <xsl:value-of select="$title"/>

    Table of contents


  • .
  • ]]>

    Bonus CSS

    The CSS to which we link for the bonus solution is:

    Just linking to a note at the end, without our rule for li:target, does scroll to the note, as expected, but because the notes are short and grouped together at the end of the document the target click cannot scroll all the way to top of the page, which means that we can’t see immediately which note we requested. The CSS :target pseudo-class applies styling to the target of a link, which makes the specific note we asked for stand out among the others. For discussion see :target.