Content

The TEI Reader uses three types of content to generate its interface. The text content contains the main text to display, the navigation content generates the navigation bar on the left-hand side, and the annotation content generates the annotations on the right-hand side.

Text

The text content can be any valid HTML, the TEI Reader defines no constraints. The only requirements are specific attributes to link the text content to the navigation and annotation:

data-heading-id
This attribute needs to be set on all elements that are headings that are also configured in the navigation. The values do not have to be unique.
data-annotation-id
This attribute needs to be set on all elements that are linked to an annotation. The values do not have to be unique.

Example:

<h1 data-heading-id="welcome">Welcome</h1>
<p>Here is an <a data-annotation-id="1">annotation</a> that is shown
  on the right, if the user clicks on the link.</p>
<h2 data-heading-id="chapter-1">Chapter 1</h2>
<h3 data-heading-id="chapter-1">A useful chapter</h3>

Annotations

The annotation content is also a JSONAPI formatted data-structure that lists all annotations that are referenced in the text content. Each annotation has two attributes title and content, both of which can contain HTML content. The basic structure for each annotation is as follows:

{
    "type": "annotations",
    "id": "id-value",
    "attributes": {
        "title": "Annotation title to display (escaped HTML)",
        "content": "Annotation content to display (escaped HTML)"
    }
}

Important

If you are using the embedded loader, you must escape your HTML so that the browser does not parse it.

For the text content example above, the annotation could look like this:

{
    "data": [
        {
            "type": "annotations",
            "id": "1",
            "attributes": {
                "title": "&lt;span class=\"page-line\"&gt;1,3&lt;/span&gt;&lt;span class=\"word-range\"&gt;annotation&lt;/span&gt;",
                "content": "This is what an example annotation can look like."
            }
        }
    ]
}