TEI Boilerplate: Displaying a facsimile beside a transcription

Charles Riondet, Inria

The TEI Boilerplate is a light framework to transform TEI P5 documents with a minimal XSLT stylesheet and present them in a browser, styled with CSS and Javascript. It has been developed by John Walsh, Grant Simpson and Saeed Moaddeli, from Indiana University.

The aim of this solution is to display directly the XML file, skipping the transformation in HTML. The usefulness of such a solution is obvious in order to have a rapid and clear human-readable version of a TEI document. However, TEI Boilerplate can also be a basis for more complex transformations and the production of extensive digital editions.

We would like to show here how we could use the TEI Boilerplate framework to visualize in the same page the edition of a manuscript and the digital image of the original document.
There are several ways to achieve the same result (or even an even more fancy result using elaborate Javascript instructions). Here is one of the simplest, which also gives a few hints of how the users could customize TEI Boilerplate according to their needs with average or even low programming skills.

The principle of TEI Boilerplate customization is very simple: the user can add any constraint in style instruction in two empty files: content/custom.xsl for XSLT processing and CSS/custom.css for styling. Here, we will use mainly the CSS file, but a minor changes in the XSLT templates can be done before.

Page breaks and facsimiles (optional)

What is follows a <pb/> corresponds to the content of a page. The image is associated to the  <pb/> element. TEI boilerplate rightly requires the use of the  @facs attribute to point to the URL of the image.

 <pb facs="images/image1.png" n="1"/>

If you prefer to refer to your images in a <facsimile> element, you must modify an XSL template in the file content/teibp.xsl. But to make sure you know exactly the changes you made, I suggest that you copy the template in the file content/custom.xsl and make the change here.

The template to modify is called pb-handler :

<xsl:template name="pb-handler">
 <xsl:param name="n"/>
 <xsl:param name="facs"/>
 <xsl:param name="id"/>

 HERE, IT'S "TEI/facsimile/surface/graphic/@url"-->
 <xsl:variable name="facsUrl" select="//tei:surface[concat('#', @xml:id) = $facs]/tei:graphic/@url"/>
 <span class="-teibp-pageNum">
 <!-- <xsl:call-template name="atts"/> -->
 <span class="-teibp-pbNote">
 <xsl:value-of select="$pbNote"/>
 <xsl:value-of select="@n"/>
 <xsl:text> </xsl:text>
 <span class="-teibp-pbFacs">
 <a class="gallery-facs" rel="prettyPhoto[gallery1]">
 <xsl:attribute name="onclick">

<!-- replace the parameter $facs with the created variable $facsUrl -->

<xsl:value-of select="concat('showFacs(',$apos,$n,$apos,',',$apos,$facsUrl,$apos,',',$apos,$id,$apos,')')"/>

 <img alt="{$altTextPbFacs}" class="-teibp-thumbnail">

<!-- Replace also the value of the html attribute @src ( which is @facs), by the variable $facsUrl -->

<xsl:attribute name="src">
 <xsl:value-of select="$facsUrl"/>

CSS styling


To display side by side the transciption and the image, CSS instructions must be add in the custom.css file (CSS/custom.css)
The first widen the page.

 html {
 width: 90%;

Here, you shift the TEI boilerplate toolbox in the right corner of the page, or make it invisible

 #teibpToolbox {
 /* shift the toolbox in the right corner of the page */
 /* make the toolbox invisible */

Then, you can enlarge the image and make it float next to the text

 .-teibp-thumbnail {
 max-height: 1000px;

The following will delete the margin of the whole element containing the page number and the image, and align the tops of the transcripton and the facsimile.

 margin: 0em 0px;

Here, you can make changes to the way the page number is displayed.



These changes are very basic but efficient, and abides to the philosophy of TEI Boilerplate, that is to “largely preserve the integrity of the TEI document” (http://teiboilerplate.org/). For more elaborate CSS instructions, you can find a lot of documentation on websites such as http://www.csszengarden.com/.

Download the TEI Boilerpalte on Github : https://github.com/GrantLS/TEI-Boilerplate
TEI document kindly provided by Magdalena Porst (FHP Potsdam).
Images from :
Institut national de recherche en informatique et en automatique (INRIA, Paris FR) . (2016). Journal intime de Leonore Alt [Corpus]. Disponible sur www.ortolang.fr : http://hdl.handle.net/11403/leonore-alt

Leave a Reply

Your email address will not be published. Required fields are marked *