forked from TEI-Boilerplate/TEI-Boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
209 lines (145 loc) · 19.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TEI Boilerplate</title>
<meta name="generator" content="BBEdit 10.1" />
<link id="maincss" rel="stylesheet" type="text/css" href="css/teibp.css" />
<style type="text/css">
html {
margin-left: 4em;
margin-right: 8em;
padding: 2.5em;
font-family:"Gentium Book Basic", Cochin, Georgia, Serif;
font-size: 14pt;
background-color: #ebebeb;
color: #292929;
width: 36em;}
h1, h2, h3, h4, h5, h6 {
font-family: Arvo, sans-serif;
font-weight: normal;
}
h1 {
font-size: 135%;
}
h2 {
font-size: 120%;
}
h3 {
font-size: 105%;
}
pre {
font-size: 70%;
border: dashed 1px #808080;
padding: 1em;
border-radius: 5px;
}
#references ~ p {
padding-left:2em;
text-indent:-2em;
}
p {text-align:left;}
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31051795-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div>
<div id="banner">
<img src="images/teibp_logo.png" alt="TEI Boilerplate Logo" style="border:0;" />
<hr style="margin-bottom:.15em;" />
<div style="float:right"><a href="content/demo.xml">demo</a> | <a href="content/teibp.xml">template</a> | <a href="content/teibpstyles.xml">template styles</a> | <a href="http://github.com/GrantLS/TEI-Boilerplate">download</a></div>
</div>
</div>
<div id="content"><h1 id="aboutteiboilerplate">About TEI Boilerplate</h1>
<p><a href="http://teiboilerplate.org/">TEI Boilerplate</a> (<a href="http://teiboilerplate.org/">http://teiboilerplate.org/</a>) is a lightweight solution for publishing styled <a href="http://www.tei-c.org/">TEI</a> (<a href="http://www.tei-c.org/">Text Encoding Initiative</a>) 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 <a href="http://dcl.slis.indiana.edu/teibp/content/demo.xml">TEI Boilerplate Demo</a> illustrates many TEI features rendered by TEI Boilerplate.</p>
<h1 id="browsercompatibility">Browser Compatibility</h1>
<p>TEI Boilerplate requires a robust, modern browser to do its work. It is compatible with current versions of Firefox, Chrome, Safari, and Internet Explorer (IE 9).</p>
<p><em>Note:</em> 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 <code>localhost</code>. </p>
<p>If you have problems with TEI Boilerplate with a modern browser, please let us know by filing a bug report or feature request at <a href="http://github.com/GrantLS/TEI-Boilerplate/issues">http://github.com/GrantLS/TEI-Boilerplate/issues</a>.</p>
<h1 id="introduction">Introduction</h1>
<p>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:</p>
<ol>
<li>Transforming TEI to HTML using XSLT and styling the HTML output with CSS.</li>
<li>Styling the TEI directly with CSS by referencing a CSS stylesheet from within the TEI document.</li>
</ol>
<p>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 <code><ptr></code> and <code><ref></code> elements are linking elements. </p>
<p>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.</p>
<p>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 <em>simple and lightweight</em> alternative to more complex XSLT solutions. There are both practical and theoretical advantages to this lightweight approach.</p>
<h2 id="practicalbenefits">Practical Benefits</h2>
<p>XSLT is far more powerful than CSS and can manipulate XML documents in ways that CSS cannot. XSLT can radically transform documents and can combine multiple XML data sources into a single output file or multiple output files. But the power of XSLT comes at a cost. XSLT is a far more complex language than CSS and has a far steeper learning curve. There are relatively few expert XSLT programmers compared to the numbers of expert Web developers with extensive knowledge of HTML/CSS/JavaScript.</p>
<p>On the other hand, JavaScript is an extremely capable language for doing fancy things with XML content. JavaScript frameworks like JQuery and EXT JS, and the major browsers provide excellent support for manipulating the DOM (Document Object Model) of the web page. With TEI Boilerplate, the TEI document becomes part of the DOM, and JavaScript may then be used to perform more complex transformations, movements, and other manipulations of the TEI content than can be achieved with CSS alone. Our <a href="http://dcl.slis.indiana.edu/teibp/content/demo.xml">TEI Boilerplate Demo</a> includes a simple example in the “Toolbox,” with a check box that uses JavaScript to hide and reveal the page breaks in a portion of the demo document.</p>
<p>TEI Boilerplate gives HTML/CSS/JavaScript documents direct access to original TEI content, and it gives TEI documents direct access to the substantial capabilities of HTML, CSS, and JavaScript—the dominant document format, styling language, and (client-side) programming language of the web. TEI Boilerplate aims for simplicity and elegance, but it also facilitates complexity and innovation by exposing TEI content directly to the capabilities of JavaScript, the many powerful JavaScript frameworks, and CSS.</p>
<p>In teaching contexts, TEI Boilerplate is a useful solution. Students and scholars new to TEI are rightly excited and enthused as they encode their first documents and experience the expressive power of TEI markup. But too often that initial excitement and enthusiasm dissipate when new TEI users inquire about publishing their documents on the web and are confronted with sometimes overwhelming details about an unfamiliar programming language, XSLT, and other information about server-side processing and transformation engines. With TEI Boilerplate, users can simply add a single line of code to their documents to instruct modern browsers to produce formatted output of their TEI content. And that default TEI Boilerplate output may be further tweaked and customized using CSS.</p>
<h3 id="teiboilerplateandomeka">TEI Boilerplate and Omeka</h3>
<p>TEI Boilerplate also provides a simple solution for delivering TEI documents through <a href="http://www.omeka.org">Omeka</a>, the popular open-source web-publishing platform. No additional software or plugins are necessary. One can simply host the TEI Boilerplate XSLT, JavaScript, and CSS files on a server alongside Omeka and change a parameter in the TEI Boilerplate XSLT file to point to that server.</p>
<p>Note: Some browsers apply the “same origin” security policy to XSLT stylesheets, which prohibits the use of XSLT from a different domain than the input document. For this reason, it is best to host the TEI Boilerplate files in the same domain as the Omeka installation.</p>
<h2 id="theoreticalmotivations">Theoretical Motivations</h2>
<p>The power of TEI lies in the richness and expressiveness of its vocabulary. But much of that richness and expressiveness is lost in the translation to HTML. TEI Boilerplate largely preserves the integrity of the TEI document. Because the TEI document is delivered directly to the browser, that source TEI document—unchanged by any XSLT transformation—can be easily accessed and saved to the desktop or mobile device.</p>
<p>Scholars labor over the intricate encoding of TEI documents, encoding that may represent sophisticated readings and analysis. But with the typical XSLT publishing solution, which transforms the TEI to HTML, much or all of the richness of the TEI content is lost. Furthermore, the presentation of the document is targeted at the HTML surrogate rather than the intricately encoded TEI document. This results in a conceptual disconnect between the design of the document and the original TEI encoding. By exposing the TEI directly to the browser, one may format the TEI directly, applying intentional design to a sophisticated model of a source document. If one wishes to manipulate the document using JavaScript, one may manipulate the TEI directly. Scholars are likely to be intimately familiar with their TEI documents, and their engagement with and understanding of these documents may benefit when the formatting and processing is targeted at the TEI itself, rather than at an HTML surrogate.</p>
<p>TEI Boilerplate respects the integrity of the TEI document, and keeps the TEI document central throughout the publication process. TEI Boilerplate takes advantage of the separation of form and content inherent in XML, XSLT, CSS frameworks. However, like Liu (2004), Galey (2010), and others, the authors of TEI Boilerplate view that separation with suspicion. TEI Boilerplate attempts to weaken that separation of form and content in the typical TEI-to-web design and delivery model by largely removing the HTML layer, exposing the TEI-encoded text directly to the browser, and providing scholars with more immediate access to the readings, models, and analysis embedded in the TEI-encoded document.</p>
<h1 id="howitworks">How It Works</h1>
<p>When a TEI document using TEI Boilerplate is accessed by a browser, the browser reads a line (the <code>xml-stylesheet</code> processing instruction) in the file that indicates that the XML should be processed by the TEI Boilerplate XSLT stylesheet. The browser then processes the TEI according to the rules of the stylesheet, which results in an HTML5 shell document within which the TEI document is embedded. A very small number of TEI elements and attributes (e.g. <code><ptr></code>, <code><ref></code>, <code><figure></code>, and <code>@rend</code>) are converted to their closest HTML equivalents to enable features such as clickable links, display of images, and support for inline CSS. The HTML shell contains a link to the TEI Boilerplate CSS file, which tells the browser how to style the full document.</p>
<h1 id="usingitinyourproject">Using it in Your Project</h1>
<p>Download the <a href="http://github.com/GrantLS/TEI-Boilerplate">TEI Boilerplate files</a>, and host the <code>teibp</code> directory on a web server.</p>
<p>The simplest way to use TEI Boilerplate (TEIBP) is simply to add your TEI files to the <code>teibp/content</code> 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 <code><TEI></code> element:</p>
<pre><code><?xml-stylesheet type="text/xsl" href="teibp.xsl"?>
</code></pre>
<p>You may then access your TEI files from a modern browser and see the resulting styled document.</p>
<h2 id="facsimilepageimages">Facsimile Page Images</h2>
<p>TEI Boilerplate has (since version 1.1) a simple built-in page viewer for facsimile page images. The page viewer looks for <code>@facs</code> attributes on page break <code><pb/></code> tags, e.g.:</p>
<pre><code><pb n="42" facs="../images/page057.jpg"/>
</code></pre>
<p>Of course, the path to the image file must be correct, relative to the TEI file. </p>
<p><em>Known Issue: In WebKit-based browsers, e.g., Safari and Chrome, if the <code>@facs</code> links are to a remote server (e.g., <code><pb n="42" facs="http://www.example.com/images/page057.jpg"></code>), the facsimile page viewer will always open at the first page of the document, rather than scrolling correctly to the page selected in the transcription. We expect to solve this problem, but haven’t figured it out yet.</em></p>
<h1 id="teiboilerplateandcss">TEI Boilerplate and CSS</h1>
<p>TEI Boilerplate makes extensive use of CSS to generate styled documents in the browser. The CSS is drawn from three possible sources:</p>
<ul>
<li>External css stylesheets:
<ul>
<li><a href="http://dcl.slis.indiana.edu/teibp/css/teibp.css"><code>teibp.css</code></a> includes default styles for the HTML shell and TEI document.</li>
<li><a href="http://dcl.slis.indiana.edu/teibp/css/custom.css"><code>custom.css</code></a> is an empty stylesheet provided as a placeholder for user styles.</li>
</ul></li>
<li><code><rendition></code> elements with <code>@scheme="css"</code> within the TEI document are used to generate CSS declarations understood by the browser.</li>
<li>The global <code>@rend</code> attribute may be used to include inline CSS in TEI documents. The contents of <code>@rend</code> are copied to <code>@style</code>, which is understood by the browser.</li>
</ul>
<h1 id="customizingthelook">Customizing the Look</h1>
<p>TEI Boilerplate includes a default “theme” and some alternative themes. These are provided mostly as an illustration of TEI Boilerplate’s capabilities. Users may modify these supplied themes in the following ways:</p>
<ol>
<li>By supplying <code><rendition></code> elements with <code>@scheme="css"</code> within the <code><tagsDecl></code> section of your TEI document. TEI Boilerplate will automatically convert the <code><rendition></code> elements into CSS declarations in a <code><style></code> element of the HTML5 shell that surrounds the TEI document after the simple XSLT transformation. TEI elements that use the <code>@rendition</code> attribute to point to <code><rendition></code> styles will be styled accordingly. This mechanism is similar to using HTML’s <code>@class</code> to point to CSS classes. See the <a href="http://www.tei-c.org/release/doc/tei-p5-doc/en/html/HD.html#HD57">TEI Guidelines</a> for more details on <code><rendition></code> and <code>@rendition</code>. The TEI Boilerplate <a href="http://dcl.slis.indiana.edu/teibp/content/teibp.xml">TEI template</a> (<a href="http://dcl.slis.indiana.edu/teibp/content/teibp.xml">teibp.xml</a>) also includes examples.</li>
<li>By adding custom CSS to the <code>custom.css</code> file located in the <code>teibp/css</code> directory. The HTML shell created by TEI Boilerplate includes a link to the custom.css file. This file is empty by default. You may add user styles to this file.</li>
</ol>
<h1 id="theteiboilerplatetemplate">The TEI Boilerplate Template</h1>
<p>An important component of TEI Boilerplate is a “boilerplate” <a href="http://dcl.slis.indiana.edu/teibp/content/teibp.xml">TEI template</a> (<a href="http://dcl.slis.indiana.edu/teibp/content/teibp.xml">teibp.xml</a>), a very simple TEI file, with some XML comments about where one might typically put basic information (e.g., title, author, bibliographic details of any source material). The most important features of the TEI Boilerplate template are:</p>
<ul>
<li>The <code>xml-stylesheet</code> processing instructions with links to the TEI Boilerplate XSLT and CSS files.</li>
<li>A <a href="http://dcl.slis.indiana.edu/teibp/content/teibpstyles.xml">pre-defined set of <code><rendition></code> elements</a> with generally useful styles for describing a source document or for use in a born-digital TEI document. For instance, the template includes styles for bold, italicized, underlined, and “normal” text; for left-aligned, right-aligned, centered, and fully justified text; for indentation of verse lines; block quotes; and so on. These styles are discussed in more detail in a separate document: <a href="http://dcl.slis.indiana.edu/teibp/content/teibpstyles.xml">Styles available in the TEI Boilerplate Template</a></li>
</ul>
<p>Users of TEI Boilerplate may choose to use the styles provided in the template, and add to, modify, or replace them. As explained above, <code><rendition></code> elements, along with <code>@rendition</code> and <code>@rend</code> are all used by TEI Boilerplate to produced styled documents in the browser. Thus, TEI authors may achieve substantial results by using these standard TEI features, without the need to edit any of the TEI Boilerplate code.</p>
<h1 id="downloads">Downloads</h1>
<p>Download the latest release of TEI Boilerplate from <a href="http://github.com/GrantLS/TEI-Boilerplate">GitHub</a>: <a href="http://github.com/GrantLS/TEI-Boilerplate">http://github.com/GrantLS/TEI-Boilerplate</a>.</p>
<h1 id="people">People</h1>
<p>The TEI Boilerplate team is:</p>
<ul>
<li><a href="http://www.slis.indiana.edu/faculty/jawalsh/">John Walsh</a>, Indiana University</li>
<li><a href="http://grantsimpson.name/">Grant Simpson</a>, Indiana University</li>
<li>Saeed Moaddeli, Indiana University</li>
</ul>
<p>Please send general feedback to John Walsh at <a href="mailto:[email protected]">[email protected]</a>. Bug reports and feature requests may be submitted through <a href="http://github.com/GrantLS/TEI-Boilerplate/issues">GitHub</a>: <a href="http://github.com/GrantLS/TEI-Boilerplate/issues">http://github.com/GrantLS/TEI-Boilerplate/issues</a>.</p>
<h1 id="references">References</h1>
<p>Galey, A. (2010). The human presence in digital artifacts. In W. McCarty (Ed.), <em>Text and genre in reconstruction: effects of digitization on ideas, behaviours, products, and institutions</em> (pp. 93–117). Oxford: Open Book.</p>
<p>Liu, A. (2004). Transcendental data: Towards a cultural history and aesthetics of the new encoded discourse. <em>Critical Inquiry, 31</em>, 49–84.</p>
<p>Omeka (2012). Omeka: Serious web publishing. Retrieved from http://omeka.org/about/</p>
<p>Rahtz, S. (2006). Storage, retrieval, and rendering. In L. Burnard, K. O’Brien O’Keeffe, & J. Unsworth (Eds.), <em>Electronic textual editing</em> (pp. 310–333). New York, NY: Modern Language Association of America.</p></div>
<div id="footer"> Powered by <a href="http://dcl.slis.indiana.edu/teibp/">TEI Boilerplate</a>. TEI Boilerplate is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0
Unported License</a>. <a href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons License" style="border-width:0;" src="http://i.creativecommons.org/l/by/3.0/80x15.png" /></a></div>
</body>
</html>