jPharr: An Experiment in Web Layout and Classical Texts

At last weekend’s “Publishing Text in a Digital Age” workshop, there was (understandably!) a lot of discussion about the potential benefits of born-digital editions over traditional print volumes. One thread that came up again and again was the legacy of the codex and book design in web editions. E.g. Should digital editions imitate book pagination? Does a table of contents have a place in a search-friendly web version? An index? This sort of thing.

This conversation reminded me of an experiment with page layout that I used for my (always in-progress) Tin Latin Reader. I call it jPharr—a portmanteau of jQuery and Pharr—as in Clyde Pharr, from whose student reader of the Aeneid I took the idea.

Pharr designed the layout each page to include the following three sections from top to bottom: 1. the text of the poem, 2. vocabulary, and 3. assorted notes on the texts.

A sample page from Pharr's Aeneid, Book 1.1-4 with vocabulary and notes.

A sample page from Pharr’s Aeneid, Book 1.1-4 with vocabulary and notes.

The pros and cons of Pharr’s design are concisely presented in E.F. DeHoratius’ review (Classical Journal 96 [2000], p. 211) of B.W. Boyd’s edition of Aeneid 10 and 12—a book designed (literally) to supplement Pharr’s coverage of the first six books:

“Proponents of Pharr’s edition praise its compactness of text, notes, and vocabulary, formulated to ease the inexperienced or secondary-school reader into Vergil’s extensive poetic lexicon. Detractors of Pharr’s text, however, claim that the very visible vocabulary system that garners so much praise provides those inexperienced readers for whom it was expressly designed and with whom it is so often used too great a crutch to lean on.”

The goal of jPharr is to find some middle ground between the proponents and the detractors through web design. Javascript—and in particular the Javascript library, jQuery—is particularly good at dynamically hiding page elements. Accordingly, I was able to maintain the benefit of keeping all supporting materials for the text on the page, while removing the criticism that these materials are either a distraction or a crutch by making use of Anas Nakawa’s Multi Open Accordion for jQuery. Now, with one click, readers can reveal the vocabulary. With another, the notes. Just as easily, readers can return to a plain text. A working version of jPharr can be seen at this page.

Text with vocabulary section closed.

Text with vocabulary section closed.

Text with vocabulary section open.

Text with vocabulary section open.

jPharr is a page layout that imitates a traditional book. Yet it does so in a way that allows the biggest design criticism to be overcome while losing no utility. It is an overall conservative move from print to web, in the sense that it has only one major change. At the same time, this one change gives the student reader a powerful sense of control over their learning, i.e. how much vocabulary help, how much grammar help they do or do not need.

Pharr saw his own method as a pedagogical (and psychological!) improvement, writing that “the old system involves not merely a great waste of time, but it necessitates continual interruption in the continuity of the student, hindering or even preventing concentration upon the work at hand and thus making for bad mental habits.” (C. Pharr. 1998. Vergil’s Aeneid: Books I-VI. Waukonda, Il., p. x)

jPharr adds a bit of refinement to this progress, allowing for less interruption and more concentration because it removes distraction, or even just the temptation of distraction, when necessary. Where Pharr spoke highly of the support material being “constantly before” the student, I’d like to think that he would see the added benefit in having the material instead constantly available to student. For this reason, I’d like to think of jPharr as a simple yet successful experiment.

To add this functionality to your own web page:

  1. Download the latest version of Multi Open Accordion from https://code.google.com/p/jquery-multi-open-accordion/downloads/list. Unzip and add to your web directory. (Make sure you also put the jQuery and jQuery UI scripts in this directory.)
  2. Add the following lines to your HTML:
    <script src=”jquery-1.4.3.min.js”></script>
    <script src=”jquery-ui-1.8.13.custom.min.js”></script>
    <script src=”jquery.multi-open-accordion-1.5.3.js”></script>
  3. Place all of the content that you want to be collapsible in a <div> tag with the id equal to multiOpenAccordion:
    <div id=”multiOpenAccordion”> … </div>
  4. Place the title of each section, e.g. “Vocabulary”, in an <h3> tag:
    <h3><a href=”#”>Vocabulary</a></h3>
  5. Place each section you want to collapse in a <div> tag:
    <div> … </div>

You can see an example of the proper markup for Sections 3 through 5 under the “Markup” section at https://code.google.com/p/jquery-multi-open-accordion/.

This is only one example of a web layout that imitates traditional book design, while leveraging the technological advantages of displaying content dynamically. Along these lines, I think there are many other interactions and effects in the jQuery UI that could be used in a similar fashion. More experiments to follow!

Advertisements

One comment

  1. The work you did with your Tin Reader got me thinking about making something similar for use on the Ipads which my students recently started using in class. In the beginning I started using iframes and accordion lists for the vocab and notes below the text. However, I like to keep everything on the same screen and the expanding panels often drive some on the text off the screen. I like to use tabbed panels so that the student doesn’t need to scroll and the text stays in place. Dreamweaver has a tabbed panels widget that works pretty well for this purpose. http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS6FED301A-59A1-45ce-BC1F-110743A27FE9.html Someday I would like to know enough query to allow a student to get a definition by highlighting a word.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: