<oo>→<dh> Digital humanities

Background

Andrew Lang and his wife, Leonora (Nora) Blanche Alleyne, were the editors of a late Victorian collection of twelve colored books of fairy tales. These volumes were enormously influential in reshaping the cult of fairy tales (originally a type of folk and literary text for adults) into a genre of children’s literature. The Yellow Fairy Book was first published in 1894.

The task

Your task is to write XSLT that will create an XHTML reading view of our XML version of The Yellow Fairy Book, which can be found at yellowFairy.xml. The look and style of the output is up to you except for places where we specify (below) certain elements to include, and with the exception of those features, any valid XHTML output that is consistent with the way a collection of tales might reasonably be rendered is fine.

You may find it helpful to download and explore the Relax NG schema that we used to validate the XML, which you can find at http://dh.obdurodon.org/yellowFairy.rnc. You can develop and run your XSLT transformation without the schema, but examining the schema might help you understand the structure of the XML, which could make it easier to plan your transformation.

You should upload both your XSLT and the XHTML output created by your transformation. If you undertake the extra-credit CSS option (see below), upload your CSS file, as well.

General guidelines

• Perform a sanity check after each step in your development: Does your output look the way you expect in a browser? Does the angle-bracketed output look the way you expect in <oXygen/>?

• Validate your XHTML output before you submit it. Valid output is a baseline requirement for any XSLT transformation, and for that reason it is worth a lot of points on this test. To ensure that your document is valid, save the output of your transformation, open it in <oXygen/>, and validate it there. Your document must conform to the type of valid HTML5 with XML syntax that you’ve been using consistently in other assignments and in your projects. It must include the correct HTML doctype declaration, it must be in the correct HTML namespace, and it must make appropriate descriptive use of HTML elements. For example, use headers hierarchically (e.g., don’t skip from <h1> to <h3>), use a meaningful and appropriate @alt attribute on all <img> elements, etc.

• Avoid hard-coding information into your XSLT that is available from the XML. For example, don’t type out titles that are present in the XML, don’t require a specific number of stories, etc.

• There are multiple ways to complete this task, and your solution doesn’t have to be the same as ours. With that said, your XSLT must be consistent with good practice. For example, apply templates to all stories at once instead of to each one separately, don’t confuse XPath patterns with XPath expressions, don’t use pull processing (<xsl:for-each>, <xsl:value-of>) where push processing (<xsl:apply-templates> and <xsl:template>) would be more appropriate, etc.

• Organize your XSLT in a way that makes sense and include comments (comments in XSLT use the same syntax as in XML) that label sections of your code and help you find your way around. Comments should not be This is My XSLT Test; make them insightful not only to help you during your coding process, but also to help those who will view your code (think of your hypothetical project teammates were this part of your course project). Good use of mindful comments is worth points!

• Should you have any questions, please ask in the #xslt channel in our Slack workspace. We can’t give you the answer, but we’ll do whatever we can short of that to help. Should you get stuck at a particular point in your XSLT in a way that doesn’t get cleared up over Slack, include a properly formatted comment that tells us specifically how you tried to debug it, where by specifically we mean what (exactly) you tried, what you expected, what you got instead, what you think the source of the problem is, how you tried to fix it, etc. Not being able to get all the way to a solution can nonetheless earn credit, but only if you provide a thoughtful and specific description of your debugging efforts.

Required tasks

At a minimum, the output of your transformation must include the following features that might be expected in any reading view of a book containing a collection of tales:

• A main title as well as author and editor names that are extracted from the XML (not typed in as literal values). The title should appear in two places: in a ]]> element inside the ]]> and in an ]]> inside the ]]>.

• A table of contents with the story names.

• Each story in its own HTML <section> with the story name at the start (extracted from the XML, and not supplied as a literal value).

• Story titles and the ]]> content (if present) formatted in a way that stands out from the rest of the text.

• All paragraphs within each chapter so that your stories retain their original paragraphed structure and are not rendered as single blocks of continuous text.

Bonus (optional, extra-credit) tasks

• Style your HTML meaningfully with CSS that enhances the overall effect of the reading view. Your CSS must be in a separate file, which you should upload to Canvas along with your XSLT and HTML, and it must be linked to the HTML output of your transformation with an HTML <link> element that you create as part of your transformation. Make sure that the filename of your CSS matches the filename specified in the @href attribute on your <link> element.

• Enhance the table of contents to create clickable links that scroll the page to the appropriate location within the main text.

• The tales in this collection originate with different authors and storytellers, and the ]]> element is used to denote when someone other than just Andrew Lang or Nora Alleyne contributed to a story. Instead of rendering that information where it appears in the XML, create footnotes with raised numbers after the title within the body and put the sources (that is, the contents of the <origin> element) at the end of the entire page, with clickable links that connect them. The HTML for raised numbers is <sup> (mnemonic: superscript).

  You’ll need to generate the note numbers programmatically and they need to run consecutively, so that the first note number is 1, the second is 2, etc.