Last modified: Monday, 15-Nov-2021 12:06:20 UTC. Maintained by: Elisa E. Beshero-Bondar (eeb4 at psu.edu). Powered by firebellies.

XSLT Exercise 5

The input collection on our textEncoding-Hub

You will be working with same digitized XML collection of Warren Behrend’s papers that you worked with in the last assignment, the collection we posted on our textEncoding-Hub GitHub repository. If you need a new copy of the files, please refer to our instructions on the previous exercise for accessing them by syncing, cloning, and copying the directory out of your local GitHub directory. You will be building on the previous exercise, and you can take your stylesheet from that assignment and modify it for this one.

Overview of the assignment

For your last assignment you used the XSLT @mode attribute to create a table of contents for the documents in the Warren Behrend collection, setting the title elements of each file in an HTML list. Our output for that previous assignment is at https://newtfire.org/courses/tutorials/WBColl-1.html.

Making in internal links from the Table of Contents

We are going to enhance our output from the last assignment in the following ways:

We’re going to create links between the items in the table of contents and the full text of the documents, so that you can click on a title in the table of contents and be taken immediately to the corresponding full text.
We’re going to sort the table of contents and the full text entries by date.

Our HTML output for this assignment is at https://newtfire.org/courses/tutorials/WBColl-2.html.

The tools we need

To create links between the first lines in the table of contents and the poems in the full text section of the page below we’re going to use attribute value templates (AVT). We have been working with these in earlier XSLT assignments, but you may want to review Obdurodon’s page on how they are written: http://dh.obdurodon.org/avt.xhtml.

To sort the titles in the table of contents, and in the full-text, we’re going to use <xsl:sort>.

How HTML linking works

The <li> items in the table of contents should include <a> (anchor) elements, which is how HTML identifies a clickable link. An anchor that is a clickable link has an @href attribute, which points to the target to which you want to move when you click on the link. For example, the table of contents might contain the following list item for one of Warren Behrend’s letters:

<li><a href="#WtoP-Dec17">Letter from Warren Behrend to Mary and Ernst Behrend, 1929-12-17</a></li>

HTML <a> elements that have @href attributes normally appear blue and underlined in the web browser, to advertise that they are links. The target of a link can be any element that has an @id attribute that identifies it uniquely. (This is why you need to use a hashtag (#) in the @href on the Table of Contents that links to an @id, because the # indicates you are pointing to the unique identifier that follows.) If you click on this line in the browser, the window will scroll to the element elsewhere in the document that has an @id attribute with the value WtoP-Dec17. In our case, we’ve assigned that @id attribute value to the <h2> for that document in the full-text portion of our file:

<h2 id="WtoP-Dec17">Letter from Warren Behrend to Mary and Ernst Behrend, 1929-12-17</h2>

Adding links to your output

You should review Obdurodon’s page on Attribute value templates (AVT), and locate the @xml:id attributes in the source texts. You can use this special attribute on each source document to output both the target of an internal link, and the link itself.

To create link targets, we applied @id attributes to the <h2> elements that we used as titles for each poem in the body of our page, e.g., <h2 id="WtoP-Dec17"> (notice, NO hashtag). Meanwhile, in the table of contents at the top we created <a> elements with @href attributes that point to these @id values. The value of the @href attribute must begin with a leading # character, but that # must not be part of the value of the @id attribute to which it points. For example,

<li><a href="#WtoP-Dec17">Letter from Warren Behrend to Mary and Ernst Behrend, 1929-12-17</a></li>

means if the user clicks on the linked content in this list item, the browser will scroll to the line that reads <h2 id="WtoP-Dec17"> in the main body of the page. Remember: the value of the @href attribute begins with #, but the value of the corresponding @id attribute on the <h2> element you want to scroll to doesn’t.

Armed with that information, you can take your answer to the main assignment and, using AVTs, modify it to create the <a> elements with the @href attributes and the @id attributes for the targets.

Sorting

It makes sense to sort our collection of Warren Behrend’s last correspondence with his parents in order by date, to help our readers navigate chronologically. To do this we will need to apply the XSLT sort function. To learn how to sort your table of contents before you output it, start by looking up <xsl:sort> at https://www.w3schools.com/xml/xsl_sort.asp or in Michael Kay.

So far, if we’ve wanted to output, say, our table of contents in the order in which they occur in the document, we’ve used a self-closing element to select them with something like <xsl:apply-templates select="$WBColl//xml"/>. That the self-closing empty element tag is informationally identical to writing the start and end tags separately with nothing between them, that is, <xsl:apply-templates select="$WBColl//xml></xsl:apply-templates>. To cause the elements being processed to be sorted first, you need to use this alternative notation, with separate start and end tags, because you need to put the <xsl:sort> element between the start and end tags. If you use the first notation, the one with a single self-closing tag, there’s no between in which to put the <xsl:sort> element. In other words, you want something like:

<xsl:apply-templates select="$WBColl//xml">
                     <xsl:sort/>
            </xsl:apply-templates/>

As written, the preceding will sort the <zml> elements alphabetically by their text value. As you’ll see at the sites mentioned above, though, it’s also possible to use the @select attribute on <xsl:sort> to sort a set of items by properties other than alphabetic order of their textual content, which is what we will be doing in sorting on date information. To retrieve the date information, write the xsl:sort @select value as an XPath in relation to the what you hav eselected in xsl:apply-templates around it. Here, xsl:apply-templates sets the context for what is sorted, and the xsl:sort specifies with @select how it should be sorted.

Once you have figured out how to sort the table of contents, go on and sort the documents that appear in the full-text portion of the file as well.

Finishing touches

You could try outputting the images: see if you can find a good place to include them with their associated letter. Constructing working references to image files may be a challenge. These are applied based on the location of your output HTML file. So, if the images/ directory is one step down in your file directories from the HTML file you are outputting, you will want to point to it like this: <img src="images/yourPicture.jpg" alt="image from my archive"/>

Finally, it's time to associate some CSS with this file! Write some CSS and associate a CSS stylesheet to your output (write the CSS file link into your XSLT) to make it look more interesting than what you get by default in a web browser! When finished, submit your XSLT and your HTML and CSS files on Canvas.