Styling

The TEI Reader comes with only the minimal CSS styling that defines the interface layout. This section documents the HTML structure the TEI reader generates and which can be used to style the display.

The basic structure of the TEI Reader is as follows:

<div id="tei-reader">
  <nav>
    <!-- Navigation content goes here -->
  </nav>
  <main>
    <!-- Main text content goes here -->
  </main>
  <aside>
    <!-- Annotation content goes here -->
  </aside>
</div>

Text

Any HTML is valid within this area. As mentioned in the content documentation, 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.

Full 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 main annotation structure is very simple:

<aside>
  <dl>
    <!-- Annotations go here -->
  </dl>
</aside>

Each annotation is structured as follows:

<dt>
  <div class="title">
    <!-- Annotation title -->
  </div>
  <div class="action">
    <a>
      <svg viewBox="0 0 24 24">
        <path d="..."/>
      </svg>
    </a>
  </div>
</dt>
<dd>
  <!-- Annotation content -->
</dd>

The <div class="action"> contains an <a> action, which when clicked by the user hides the annotation. In the structure the annotation title and content can be any valid HTML.

Full example:

<aside>
  <dl>
    <dt>
      <span class="page-line">1,3</span><span class="word-range">annotation</span>
      <div class="action">
        <a>
          <svg viewBox="0 0 24 24">
            <path d="..."/>
          </svg>
        </a>
      </div>
    </dt>
    <dd>This is what an example annotation can look like.</dd>
  </dl>
</aside>

Small devices

There is no difference in the generated HTML structure between large and small device sizes. However, for small devices, annotations are shown at the bottom of the display, only one annotation is visible at any time, and the annotation HTML is only generated when an annotation has been selected by the user.