Last modified: Monday, 14-Nov-2022 09:20:04 UTC. Maintained by: Elisa E. Beshero-Bondar (eeb4 at psu.edu). Powered by firebellies.

XSLT Exercise 5: Internal Links and Sorting

Behrend Travel Letters postcard of Elsinore castle

The input collection on our textEncoding-Hub

You will be working with same digitized XML collection of Behrend family's travel letters 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 Fall 2021 Behrend Travel Letter collection, setting the title elements of each file in an HTML table. Here is our output for that previous assignment.

Making 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.

Here is our new linked and sorted HTML output for this assignment.

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 the Behrend’s travel letters:

<td><a href="#Greenwich-1955-07-18">1955-07-18:    We got on board about 10
                     Harriet had stayed in Greenwich over night so we. . .</a></td>

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 Greenwich-1955-07-18. In our case, we’ve assigned that @id attribute value to the <div> for that document in the full-text portion of our file:

<div class="letter" id="Greenwich-1955-07-18">

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 <div> elements that we used to section off each letter in the body of our page, e.g., <div class="letter" id="Greenwich-1955-07-18"> (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,

<td><a href="#Greenwich-1955-07-18">1955-07-18:    We got on board about 10 Harriet had stayed in Greenwich over night so we. . .</a></td>

means if the user clicks on the linked content in this table cell, the browser will scroll to the line that reads <div class="letter" id="Greenwich-1955-07-187"> elsewhere in 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 the Behrends' travel letters 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="$travelColl//letter"/>. 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="$travelColl//letter"></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="$travelColl//letter">
                     <xsl:sort/>
            </xsl:apply-templates/>

As written, the preceding will sort the <letter> 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

If we made the images directory available, 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"/>

If you have not done this already, it is definitely 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.