using and customizing tei boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · a...
TRANSCRIPT
![Page 1: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/1.jpg)
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/
![Page 3: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/3.jpg)
TEI Boilerplate overview
![Page 4: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/4.jpg)
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.
![Page 5: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/5.jpg)
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
![Page 6: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/6.jpg)
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.
![Page 7: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/7.jpg)
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.
![Page 8: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/8.jpg)
TEI Boilerplate Architecture
![Page 9: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/9.jpg)
Technologies
• XSLT 1.0*
• HTML5
• CSS
• Javascript (optional)
*XSLT 2.0 could be used with Saxon-CE.
![Page 10: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/10.jpg)
TEIBP Architecture
TEI + XSLT
HTML
+CSS&
JavascriptTEI
![Page 11: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/11.jpg)
TEIBP XSLT Output: HTML5/TEI hybrid document
![Page 12: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/12.jpg)
TEIBP XSLT Output: HTML5 with embedded TEI…
![Page 13: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/13.jpg)
TEIBP XSLT Output: HTML5 with embedded TEI and CSS
![Page 14: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/14.jpg)
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.
![Page 15: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/15.jpg)
Demo
• Demo from teiboilerplate.org.
• A. C. Swinburne’s “Rondel” MS. Special Collections Research Center. Syracuse University.
![Page 16: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/16.jpg)
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>
![Page 17: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/17.jpg)
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.
![Page 18: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/18.jpg)
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>
![Page 19: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/19.jpg)
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>
![Page 20: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/20.jpg)
Using TEI’s @style
<hi style="font-size:24pt; font-variant:small caps"> Between </hi>
![Page 21: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/21.jpg)
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"/>
![Page 22: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/22.jpg)
Reading & designing with firebug
![Page 23: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/23.jpg)
The PetrarchiveA TEI Boilerplate-based digital edition
• http://petrarchive.org/
![Page 24: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves](https://reader030.vdocuments.mx/reader030/viewer/2022041014/5ec557ef13b08355f20aa068/html5/thumbnails/24.jpg)
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>