Simplifying Display and Creating Interaction with TEI Documents


As the release version of the TEIViewer is still in its infancy, you may wish to keep an eye on for updates on its progress.

Click the link below to download the TEIViewer. Unzip the contents into the same directory as your TEI XML document. Then add the following code to the top of your TEI XML document, just above the opening <TEI> element:

<?xml-stylesheet type="text/xsl" href="tv/tv.xsl" ?>

You may then open it in a browser, allowing the browser's XSL engine to transform it client-side, or you may run it through an XSL processor. At this time, the Firefox browser and the Saxon XSL processor are known to work, though other tools may work as well. Support for Internet Explorer is coming. :(

Click here to download the TEIViewer

Brief description, and how to modify it

The listing below is the annotated structure of the unpacked download.

  • tv - contains the required XSL, JavaScript, and CSS files (including the Core and XHTML branches of the TEI Stylesheets current as of the current release of the TEIViewer) comprising the following fields and directories:
    • tv.xsl - the main XSL stylesheet that includes and imports all the necessary dependencies from the other directories in the package. If the TEIViewer is deployed somewhere other than the directory containing the TEI source XML, the paths for the CSS file ("cssFile") and the TEIViewer root directory ("tvRootDir") params will need to be adjusted in this file to reflect their new locations.
    • css - this directory contains the CSS needed to define the looks and behavior of the site and elements. The odd.css and tei.css are the unmodified CSS stylesheets that come with the TEI XSL Stylesheets. The other files are part of the TEIViewer.
    • xsl
      • common - this directory contains the unmodified common branch of the TEI XSL Stylesheets
      • xhtml - this directory contains the unmodified XHTML branch of the TEI XSL Stylesheets
      • tv - this directory contains the modifications to the TEI Stylesheets that help/enable the TEIViewer to work. Most of the modifications consist of creating CSS classes instead of inline CSS styles so that jQuery selector functions can find them and modify the DOM based on them, and sometimes create layers of content or the like. Usually, these functions just take the place of named templates called by the TEI XSL Stylesheets.
    • js - this directory contains the jQuery library and associated plug-ins, as well as the tv.js file that comprises the TEIViewer functionality. The jQuery libraries are unmodified and current with the release of the TEIViewer.
    • img - the only thing currently in this directory is the little image to indicate the draggability of the TEIViewer panel. It will house any future images if/when they are needed for the TEIViewer.