Quickstart

Dependencies

The TEI Reader is distributed as an NPM package, you thus require one of the following:

Installation

To install the TEI Reader either run

$ yarn add tei-reader

or

$ npm install tei-reader

depending on which package manager you use.

Embedding the Reader

The TEI Reader can be embedded into any HTML page in two steps. First the TEI Reader script and styles need to be included in the HTML <head> element:

<head>
  ...
  <link rel="stylesheet" href="node_modules/tei-reader/dist/app.css"/>
  <script src="node_modules/tei-reader/dist/app.js"></script>
  ...
</head>

Then the reader itself can be embedded anywhere in the <body>:

<body>
  ...
  <tei-reader></tei-reader>
  ...
</body>

After loading the TEI Reader then replaces the <tei-reader> tag with its own content, which can then be styled as desired. The main tag for the content is the following:

<body>
  ...
  <div id="tei-reader">
    ...
  </div>
  ...
</body>

The detailed HTML structure is documented in the styling section.

Showing (and Hiding) the Reader

By default the TEI Reader is hidden. To show the TEI Reader, you need to set the class attribute of the #tei-reader element to "visible":

document.querySelector('#tei-reader').classList.add('visible');

To hide the TEI Reader attach a click event listener to the #tei-reader. Any clicks that are directly on that element are clicks on the overlay, which is the moment when you should hide the TEI Reader:

var teiReader = document.querySelector('#tei-reader');
teiReader.addEventListener('click', function (ev) {
    if (ev.target === teiReader) {
        teiReader.classList.remove('visible');
    }
});

Loading Data

The TEI Reader needs three pieces of data: the main text, the navigation data, and the annotation data. These can either be loaded directly from an element in the HTML page itself or can be loaded remotely. Which loader to use and its configuration are set via the window.teiReaderConfig object, which must be defined before you use the <tei-reader> tag.

Embedded Content

For the embedded content loader, use the following configuration setting:

<script>
  window.teiReaderConfig = {
      loader: 'local-html-json',
      elements: {
          text: '#source .text',
          nav: '#source .nav',
          annotation: '#source .annotation'
      }
  };
</script>

The three settings elements.text, elements.nav, and elements.annotation all contain CSS selectors that mark the elements that contain the main text, navigation configuration, and annotation configuration. The text element can contain any HTML you wish to use. Details on the content for the navigation and annotation elements can be found in the content documentation.

Remote Content

For the remote content loader, use the following configuration setting:

<script>
  window.teiReaderConfig = {
      loader: 'remote-tei-xslt',
      urls: {
          tei: 'text.tei',
          text_extract: 'text-extract.xslt',
          nav_extract: 'nav-extract.xslt',
          annotation_extract: 'annotation-extract.xslt'
      }
  };
</script>

The urls.tei setting defines the URL from which to load the TEI content file. The urls.text_extract, urls.nav_extract, and urls.annotation settings define the URLs from which to load the XSLT stylesheets for transforming the TEI file into the text, navigation, and annotation settings. The text XSLT must produce HTML output, while the navigation and annotation XSLTs must produce JSON as documented here.