TEI Boilerplate (TEI anzeigen mit CSS und javascript)



#About TEI Boilerplate

TEI Boilerplate (http://teiboilerplate.org/) is a lightweight solution for publishing styled TEI (Text Encoding Initiative) P5 content directly in modern browsers. With TEI Boilerplate, TEI XML files can be served directly to the web without server-side processing or translation to HTML. Our TEI Boilerplate Demo illustrates many TEI features rendered by TEI Boilerplate.

#Browser Compatibility

TEI Boilerplate requires a robust, modern browser to do its work. It is compatible with current versions of Firefox, Chrome, Safari, and Internet Explorer.

Note: For security reasons, some browsers (e.g., Chrome) will not process the XSLT transformation when the TEI document is opened from the local file system. Chrome does work fine when the TEI files are delivered through a Web server, including localhost.

If you have problems with TEI Boilerplate with a modern browser, please let us know by filing a bug report or feature request at http://github.com/GrantLS/TEI-Boilerplate/issues.


TEI is an XML-based language for describing and analyzing literary texts and other documents of interest to humanities scholars. Although TEI provides mechanisms for describing the design, presentational, and material features of the source document, projects and individual scholars that use TEI are responsible for developing their own methods, or implementing existing solutions, for converting the TEI to a presentation-ready state for the web or print (Rahtz, 2012). Two potential paths to reach this goal are:

  1. Transforming TEI to HTML using XSLT and styling the HTML output with CSS.
  2. Styling the TEI directly with CSS by referencing a CSS stylesheet from within the TEI document.

Both of these approaches have advantages and disadvantages. Although HTML is the language of the web and, as such, is well supported by browsers, HTML’s descriptive capabilities are much less expressive than TEI’s. When TEI is transformed to HTML, much of the richness of the TEI is lost or obscured in the resulting HTML. However, the browser understands HTML very well and knows, for example, when to initiate retrieval of a document based on certain user events, such as clicking a link. The second option, CSS-styled TEI, delivers the TEI document directly to the browser. However, while the browser may apply CSS to format and style a TEI document, the browser doesnot understand the semantics of TEI. For instance, the browser does not understand that TEI’s <ptr> and <ref> elements are linking elements.

TEI Boilerplate bridges the gap between these two approaches by making use of the built-in XSLT (1.0) capabilities of browsers to embed the TEI XML, with minimal modifications, within an HTML5 shell document. Features expected of web documents, such as clickable links and display of linked images, are enabled through selective transformation of a very small number of TEI elements and attributes. Both the HTML5 shell and the embedded TEI are styled using CSS.

TEI Boilerplate is not intended to be a replacement for the many excellent XSLT solutions for publishing and displaying TEI/XML on the web. It is intended to be a simple and lightweight alternative to more complex XSLT solutions. There are both practical and theoretical advantages to this lightweight approach.

#Using it in Your Project

Download the TEI Boilerplate files, and host the dist directory on a web server.

The simplest way to use TEI Boilerplate (TEIBP) is simply to add your TEI files to the dist/content directory of TEI Boilerplate and include the following xml-stylesheet processing instruction at the top of your TEI documents, after the XML declaration and before the root <TEI> element:

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

You may then access your TEI files from a modern browser and see the resulting styled document.

TEI Critical Apparatus Toolbox

This page offers a graphical user interface for the customisation of an XSLT transformation from TEI XML to LateX (reledmac) and PDF. Although we tried to offer as generic a transformation as possible, further customisation might be necessary for your own flavour of encoding. You have the possibility of performing such advanced customisation at the bottom of this form, provided you know XSLT and LateX.


The TEI Critical Apparatus Toolbox is a tool for people preparing a natively digital TEI critical edition.

The Toolbox lets you

  • Check your encoding: offers facilities to display your edition while it is still in the making, and check the consistency of your encoding
  • Display parallel versions: choose the sigla of the witnesses, and the different versions of the text, following each chosen witness, will be displayed in parallel columns.
  • Print an edition of a TEI XML edition, with a TEI-to-LateX and PDF transformation
  • Annotate an image: lets you easily trace zones on an image to prepare a documentary edition
  • Get statistics on the XML tags effectively used in different parts of your edition, and some word count.

TEI Lex-0 — A baseline encoding for lexicographic data

TEI Lex-0 is both a technical specification and a set of community-based recommendations for encoding machine-readable dictionaries. It is rooted in the Guidelines of the Text Encoding Initiative (TEI) and delivered as a customization of the TEI schema.

Following the spirit of TEI Analytics, developed in the context of the MONK project (Zillig 2009), TEI Lex-0 aims at establishing a baseline encoding and a target format to facilitate the interoperability of heterogeneously encoded lexical resources. This is important both in the context of building lexical infrastructures as such (Ermolaev and Tasovac 2012) and in the context of developing generic TEI-aware tools such as dictionary viewers and profilers.


TEI ODD Element List

Element list for ODD

This is a brief reference sheet listing the most essential elements used in writing
a TEI ODD file.

Ordered by Function

High-level ODD Structures

The element that contains the formal schema specifications within the ODD file. All
the schema customization elements listed below are children of schemaSpec.
Used on schemaSpec indicates the name of the schema that will be created; required by roma.
A reference to a TEI module (i.e. a grouping of elements representing a single chapter
of the TEI Guidelines), by which the module is included in the custom schema.
Used on moduleRef, gives the short name of the module to be included
Used on moduleRef, lists which elements from the module which should not be included
Used on moduleRef, lists which elements from the module should be included (thus excluding all others)
Used on almost all ODD elements, indicates the nature of the change being made in
relation to unmodified TEI:
  • add indicates that the feature in question originates with the customization and is additional to the unmodified TEI schema
  • delete indicates that the feature in question is being deleted from the custom schema
  • change indicates that the feature in question is being changed in some detail, and that
    the changed portion should override the corresponding portion of the unmodified TEI
    schema, leaving other portions unchanged
  • replace indicates that the feature in question is being completely changed, and that the
    portion designated in the custom schema should entirely replace the specification
    for that feature in the unmodified TEI

Element Management

A specification of a single element in the schema, which can be used to delete an
element from an included module (with mode=“delete“) or to modify some aspect of the element’s definition (with mode=“change“ or mode=“replace“).
Used with elementSpec, indicates the module in which the element in question is defined.
Used with elementSpec, indicates the name of the element in question
Used inside elementSpec to change the name of an element; indicates the new name by which the element being
specified will be known in the custom schema
Used within elementSpec (or classSpec) to change the class membership of the element (or class). Contains one or more memberOf elements which, by means of their key attributes, indicate the specific classes to which the element (or class) is being
added or from which it is being deleted.
Designates a specific model class to which an element is being added, or from which
it is being deleted.
used on memberOf, contains the name of the class being designated.
used on memberOf, with value add, indicates that the element is being added to the class designated by the memberOf element.
Contains the content model for an element in RELAX NG (XML syntax) or Pure ODD elements,
for which see Content, below
Contains a further syntactic constraint, typically expressed in ISO Schematron.


A reference to an element (typically a TEI element, but perhaps one you’ve added in
your customization), indicating that it is permitted or required at this point
used on elementRef, indicates the element being refered to.
indicates the smallest number of times the indicated element may occur at this point
(default is 1).
indicates the largest number of times the indicated element may occur at this point
(default is unbounded, i.e. an infinite number of times).
A reference to an entire model class, all of whose members may (or must) occur at
this point
used on classRef, indicates the model class being referred to.
used on classRef, indicates which members of the model class are being referred to
used on classRef, indicates which members of the model class are not being referred to
Used to indicate that a string of zero or more characters is allowed at this point.
Indicates that each of the items referred to by the references inside must occur;
if preserveOrder=“true“ then furthermore they must occur in the order specified
Indicates that only one of the items referred to by the references inside must occur
(the number of times a selected alternate must occur is specified by minOccurs and maxOccurs

Attribute Management

A list of attribute definitions; used to contain the attDef elements that are used to add, delete, or modify the attributes for an element.
Used to designate an attribute that is being added, deleted, or modified.
Used on attDef, indicates the name of the attribute in question.
A list of values for an attribute (used to add or alter a set of constrained values).
A single value in a value list for an attribute.
Contains a reference to a TEI datatype, used when constraining the contents of an
element or attribute value.
Contains a further syntactic constraint, typically expressed in ISO Schematron.

Schema Documentation and Management

Used inside elementSpec, attDef, and valItem to provide the full natural-language equivalent of the name (i.e. ident) of the construct. E.g., the gloss for elementSpec ident=“att“ is attribute (as opposed to attention)
Used inside elementSpec, attDef, and valItem to document the new or altered element, attribute, or attribute value.
Contains an example of usage of the attribute (in attDef), class (in classSpec), element (in elementSpec), or macro (in macroSpec) along with optional commentary
Contains commentary or discussion about usage of the attribute (in attDef), class (in classSpec), element (in elementSpec), or macro (in macroSpec)
A specification of a TEI class (either a model class or an attribute class); often
used (with a mode of change) to change the membership of an attribute class
A specification of a TEI datatype or a chunk of arbitrary RELAX NG code

Processing Model Documentation

Documents potential processing
for a specified element
Names the process or
function which this processing model uses in order to produce
The XPath predicate
expression giving the condition under which this model applies
Whether to obey
any rendition attribute which is present (by default no)
Description of the
rendering of this element (in selected context)
A grouping of
model elements with common output
A sequence of
model elements intended as a single set of actions

Copyleft 2010 Syd Bauman and Julia
Flanders; source available at

TEI Publisher workshop

Einen online workshop unter dem Titel „Stay home and Learn TEI Publisher From Scratch“ bietet Wolfgang Meier an. Die Materialien finden sich unter https://github.com/eeditiones/workshop .

Die Slides der ersten Sitzungen sind hier verfügbar:

Videos der ersten Sitzung:

Videos der zweiten Sitzung

Videos der dritten Sitzung

TEI-Publisher in WordPress einbinden


Embeding TEI Publisher Components in WordPress

This is a short rewrite of Wolfgang’s post on Embedding TEI Publisher Components in Hugo . For WordPress you can do the same thing very easily. I used the example of Wolfgang’s post; just make sure that your site is whitelisted.

Just install the Code Embed Plugin and create a custom field 1 with the name „CODEpbembed“ and the value:

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.3/webcomponents-loader.js"></script><script type="module" src="https://unpkg.com/@teipublisher/pb-components@latest/dist/pb-components-bundle.js"></script>

Then add another custom field with the name „CODEpbkant“ and the value:

<pb-page endpoint="https://teipublisher.com/exist/apps/tei-publisher" emit="kant" class="embedded"><pb-document id="kant" path="test/kant_rvernunft_1781.TEI-P5.xml" odd="dta"></pb-document><pb-navigation direction="forward" keyboard="right" emit="kant" subscribe="kant"><paper-fab icon="icons:chevron-right"></paper-fab></pb-navigation><pb-navigation direction="backward" keyboard="left" emit="kant" subscribe="kant"><paper-fab icon="icons:chevron-left"></paper-fab></pb-navigation><pb-view src="kant" xpath="//teiHeader/fileDesc/titleStmt/title" emit="kant" subscribe="kant"><pb-param name="header" value="short"></pb-param></pb-view><pb-view class="transcription" src="kant" view="page" emit="kant" subscribe="kant" append-footnotes="" animation=""></pb-view></pb-page>

We add a third custom field with some CSS:

pb-page {
    position: relative;
    padding-top: 10px;
    border-top: 1px solid #e0e0e0;

.embedded pb-navigation {
    position: absolute;
    top: 45%;

.embedded pb-navigation[direction="forward"] {
    right: 0;

.nav {
    height: 40px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
pb-view {
    margin-left: auto;
    margin-right: auto;
.transcription {
    overflow: auto;
    display: flex;
    justify-content: center;
    height: 400px;
pb-navigation[direction="forward"] {
    float: right;

Use the Custom Field like this (without the whitespace between the brackets):

{ {CODECss}}
{ {CODEpbembed}}
{ {CODEpbkant}}

tei2html Stylesheets aus dem Projekt Gutenberg



A collection of XSLT 3.0 style sheets to transform a document encoded in according to the TEILite DTD to HTML. They have been specifically developed to create a monolithic (single) HTML document for posting on Project Gutenberg, but are also capable of generating ePub files from the same source with a similar look and feel. In line with the type of material Project Gutenberg deals with, these style sheets are designed to deal with encoded pre-existing works, rather than works created digitally from scratch.

The transformation supports the following elements as present in TEI:

  • Plain Text and text styles
  • Title Pages
  • Tables
  • Lists
  • Tables of contents
  • Poetry and Plays
  • Footnotes
  • Illustrations
  • Cover images

Furthermore, the script can generate

  • Tables of Contents.
  • Lists of Corrections.
  • Colophons
  • Metadata as used in ePub

Tei2Html includes localisation support for English, Dutch, and to a lesser extend German, French, Spanish, Tagalog and Cebuano.

Note, that these scripts partly depend on the use of rend attributes and other TEI conventions. It should not be expected that an arbitrary TEI file renders well with those scripts (although it should render reasonable in any case.)

If you need modifications, extensions of these scripts, or need to have other TEI/XML/XSLT related work done, please be in touch with me on how I can help.

The Socio-Technical Sustainability Roadmap

The Visual Media Workshop, University of Pittsburgh:


These pages are designed to introduce you to the Socio-Technical Sustainability Roadmap (STSR), including who it is designed to help, how it functions as a workshop, and what you can expect to leave knowing:

Welcome and Getting Started

Overview of the STSR Modules

Possible Workshop Schedules

What will I take away from the STSR?

In 2018-2019, we will be running a series of institutes based on this STSR at five locations across the United States. To learn more, please visit the website:

Sustaining DH: An NEH Institute for Advanced Topics in the Digital Humanities