Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A...

25
Using and Customizing TEI Boilerplate John A. Walsh Department of Information and Library Science School of Informatics and Computing Indiana University 23 October 2015 Downloads: http://dcl.slis.indiana.edu/teibpws/

Transcript of Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A...

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

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 2: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

Page 25: Using and Customizing TEI Boilerplatedcl.slis.indiana.edu/teibpws/teiboilerplate_tutorial.pdf · A different approach to publishing TEI • The typical TEI publication scenario involves

Exercises

• http://dcl.slis.indiana.edu/teibpws/