Tei_visualization is a project mainly written in JAVASCRIPT and RUBY, it's free.
TEI document transformations via Javascript & XSLT
== tei_visualization
This is the source code to a website hosted at http://tei.pauldyck.com/ . The purpose of the web site is to provide a way to view TEI documents in an immersive, interactive environment.
This software grew out of a course I taught with Paul Dyck at Canadian Mennonite University in 2008. We were teaching humanities students to encode literary texts in the TEI, and I wanted some way to let students visualize the results of their encoding ... in a sense, to get some payoff for the work they were putting in. (In addition to the pristine beauty of the XML itself, of course).
There are, of course, a variety of ways to view TEI documents. One approach is to view the raw XML in a browser, with the help of the appropriate CSS styles. We did teach that, and it works well enough. However, I wanted to experiment with using Javascript to make the experien more interactive, and take better advantage of the relationships identified in the markup.
There are ways of using Javascript with pure XML, and I experimented with that. However, many of the interactive features I was thinking of required maniuplating "style" attributes at run-time, which (as far as I could figure) doesn't actually change the appearance of anything when viewing pure XML in a browser. (That is, there is no attribute in pure XML which the browser recognizes as dynamically changing the appearance of the element).
So, I needed a way to convert the TEI documents to HTML. One approach I experimented with was embedding the TEI document into an XHTML document, using the TEI namespace. Unfortunately, I didn't keep careful notes at that stage. My recollection is that there were two problems with that approach. One was that the Javascript frameworks I was using did not seem to be entirely functional with XHTML documents ... the obstacles did not appear to be insurmountable, but I recall running into bugs of various kinds. The other issue was (if I recall correctly) the style issue again ... the browsers would only give effect to run-time style modifications in the HTML namespace ... so it was not possible to treat the TEI-namespaced elements as first-class Javascript citizens.
What I ended up doing, then, was using XSLT to transform the TEI document into an HTML equivalent. One can, of course, use sophisticated XSLT to achieve a variety of interesting transformations. However, I was mostly interested in experimenting with the Javascript side of things, so I opted for an (initially) simplistic XSLT transformation strategy. I simply turned all of the TEI tags into
For example, At that point, I could use CSS to get a first approximation of how the document should look. Aside
from the usual formatting, it was (of course) necessary to hide some things completely (display: none) and
make quite a few things inline (display: inline). The next question was how to add the Javascript interactivity I was looking for. I had previously
done some programming with Prototype and Scriptaculous, and with ExtJS, but I thought this would be
a good opportunity to learn jQuery, so I gave that a try. My approach at this stage was at least
somewhat "unobtrusive" ... I used jQuery to cycle through the generated HTML and set up behaviours and
user interface elements that seemed useful. The key issue that I ran into at that stage was that the
various jQuery UI plugins available did not always work well with each other ... I was spending too
much time trying to figure out interactions between plugins from different sources. Ultimately, I realized
that I was not actually aiming for an unobtrusive Javascript experience ... I actually wanted something
more "immersive" and application-like. So, I started again in ExtJS, which is an excellent framework for a more immersive approach. I implemented
some initial features that made sense to me, and then the students and I started working interactively. I
set up a WebDAV server for the students to upload files, and then set up a web site that would serve those
files using the XSLT transformations and the Javascript UI I wrote. Each student was working on their own
project, and part of their assignment was to think about how their text could be presented in a way that
would be useful for scholarly purposes. We then worked iteratively ... the student would think of a feature,
and we would talk about what kind of TEI markup would be needed to support that feature. Then the student
would work on the markup, and I would work on the Javascript. Part of what we wanted to simulate was the
experience of working with a programmer ... that is, identifying desired features (and bugs to fix), discussing
them, and then seeing them implemented. In the end, every student came up with some feature that was
uniquely suited to their particular document (though often useful for other TEI documents as well). I would
say that about half of the features were student-driven and half my ideas. From a technical point of view, I wanted to do the computing in the browser, rather than on the server. If
I recall correctly, my thinking was that I wanted the experience to be very fluid, so I wanted to avoid
round-trips to the server as much as possible. The general architecture, then, was something like this: The HTML page was just an almost-empty shell that downloaded the necessary Javascript via