Embed Size (px)
Using and Customizing TEI Boilerplate
John A. WalshDepartment of Information and Library Science
School of Informatics and ComputingIndiana University
23 October 2015
Downloads: http://dcl.slis.indiana.edu/teibpws/
TEI Boilerplate overview
A different approach to publishing TEI
• The typical TEI publication scenario involves transforming TEI to HTML.
• TEI Boilerplate instead embeds the TEI inside an HTML shell and uses CSS to style the TEI directly, rather than styling HTML derived from the TEI.
A simple TEI publishing solution
• TEI Boilerplate provides a template TEI P5 file, along with bundled XSLT and CSS.
• TEIBP is client-based and requires no software to be installed.
• TEIBP requires only one line of code added to a TEI document
• TEIBP is CSS-based
Practical benefits of TEIBP Approach
• Simplicity.
• TEI projects can take advantage of widespread HTML, CSS, JavaScript expertise.
• TEI projects can exploit the many JavaScript frameworks & libraries.
• Teaching contexts.
• Omeka.
Theoretical motivations
• Remove HTML middleman.
• Design for TEI and TEI semantics.
• Weaken separation of form and content.
• Encourage thoughtful and intentional design of TEI content.
TEI Boilerplate Architecture
Technologies
• XSLT 1.0*
• HTML5
• CSS
• Javascript (optional)
*XSLT 2.0 could be used with Saxon-CE.
TEIBP Architecture
TEI + XSLT
HTML
+CSS&
JavascriptTEI
TEIBP XSLT Output: HTML5/TEI hybrid document
TEIBP XSLT Output: HTML5 with embedded TEI…
TEIBP XSLT Output: HTML5 with embedded TEI and CSS
Selective transformation
• TEI <ptr> and <ref> are transformed to HTML links (<a>).
• TEI <graphic> is transformed to HTML <img>.
• Value of @xml:id is copied to HTML @id.
• If an element does not have an @xml:id, then a unique id is generated for @id
• TEI <rendition> elements are used to generate CSS classes and rules inside HTML <style type="text/css">
• TEI <tagUsage> elements are used to generate default CSS rules for TEI elements
• Code inside <eg:egXML> is serialized as text.
Demo
• Demo from teiboilerplate.org.
• A. C. Swinburne’s “Rondel” MS. Special Collections Research Center. Syracuse University.
How to use…
• Add the following line at the top of one’s TEI document (after the XML declaration, if one exists):
<?xml-stylesheet type=“text/xsl” href=“teibp.xsl”?>
• E.g:
<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="teibp.xsl"?><TEI xmlns="http://www.tei-c.org/ns/1.0">
<!-- … my tei document … -->
</TEI>
TEI Boilerplate and CSSTEI Boilerplate makes extensive use of CSS to style the hybrid HTML/TEI documents in the browser. The CSS is drawn from four possible sources:
1. External css stylesheets:
• teibp.css provides default styles for the HTML shell and TEI document. Additional themes are available or may be developed by users.
• custom.css is an empty stylesheet provided as a placeholder for user styles.
2. <rendition> elements with @scheme="css" within the TEI document are used to generate CSS declarations understood by the browser.
3. <tagUsage> elements within the TEI document are used to generate default CSS styles for TEI elements.
4. The global TEI @style attribute (new in P5 2.2.0) may be used to include inline CSS in TEI documents. The contents of @style are applied by the browser.
Pointing to <rendition> with @rendition
<body> <pb n="104" facs="../images/acs0000001-01-147.jpg"/> <head rendition="#center #n #uppercase">A Match</head> <lg> <l n="1"> <hi rendition="#small-caps">If </hi>love were what the rose is,</l> <l n="2" rendition="#l-indent-01">And I were like the leaf,</l> <l n="3">Our lives would grow together</l> <l n="4">In sad or singing weather,</l> <l n="5">Blown fields or flowerful closes,</l> <l n="6" rendition="#l-indent-01">Green pleasure or grey grief;</l> <l n="7">If love were what the rose is,</l> <l n="8" rendition="#l-indent-01">And I were like the leaf.</l> </lg> <!-- … --></body>
using @style<body> <pb n="104" facs="../images/acs0000001-01-147.jpg"/> <head rendition="#center #n #uppercase">A Match</head> <lg> <l n="1"> <hi style="font-weight:bold; text-decoration:underline; font-variant:small-caps;">If</hi>love were what the rose is,</l> <l n="2" rendition="#l-indent-01">And I were like the leaf,</l> <l n="3">Our lives would grow together</l> <l n="4">In sad or singing weather,</l> <l n="5">Blown fields or flowerful closes,</l> <l n="6" rendition="#l-indent-01">Green pleasure or grey grief;</l> <l n="7">If love were what the rose is,</l> <l n="8" rendition="#l-indent-01">And I were like the leaf.</l> </lg> <!-- … --></body>
Using TEI’s @style
<hi style="font-size:24pt; font-variant:small caps"> Between </hi>
TEI Boilerplate's facsimile page viewer
• TEI Boilerplate providers a simple viewer for facsimile page images using linked images found in the pb/@facs attribute.
• E.g.;
<pb n="[v]" facs="../images/acs0000001-02-010.jpg"/>
Reading & designing with firebug
The PetrarchiveA TEI Boilerplate-based digital edition
• http://petrarchive.org/
Enabling different text views
<script xmlns="http://www.w3.org/1999/xhtml" type="text/javascript"> function switchCustomCSS(theme) { document.getElementById('customcss').href=theme.options[theme.selectedIndex].value; } </script>
<!-- … —>
<link xmlns="http://www.w3.org/1999/xhtml" id="maincss" rel="stylesheet" type="text/css" href="../css/teibp.css" /><link xmlns="http://www.w3.org/1999/xhtml" id="customcss" rel="stylesheet" type="text/css" href="../css/custom.css" />
<select xmlns="http://www.w3.org/1999/xhtml" style="display:inline;" id="themeBox" onchange="switchCustomCSS(this);"> <option value="../css/custom.css">diplomatic transcription</option> <option value="../css/custom_norm.css">edited text</option></select>
