HTML CTS tool kit

With the HTML CTS kit, you can create web pages that resolve and display passages of texts when you include CTS URNs in your page.

Set up your web page

The HTML CTS kit uses javascript to retrieve text cited by URN, and applies XSLT and CSS to format the results visually in your web page. All of these resources are contained in the ctskit folder that comes with the downloaded package: you’ll need to make that available on your web server.

An easy way to begin is simply to clone the index.html in the package, and modify its contents.

Alternatively, if you create a web page from scratch in the same directory as ctskit, paste the following lines into the head element of your page:

<!-- COPY FROM HERE... -->

<!-- CHS css -->
<link href="ctskit/css/normalize.css" media="screen" rel="stylesheet" type="text/css" ></link>
<link href="ctskit/css/simple.css" media="screen" rel="stylesheet" type="text/css"></link>
<link href="ctskit/css/tei.css" media="screen" rel="stylesheet" type="text/css"></link>

<!-- Everyone uses JQuery -->
<script src="ctskit/js/jquery-1.7.2.min.js" type="text/javascript" ></script>

<!-- Sarissa Javascript (for doing xslt stuff) -->  
<script src="ctskit/js/sarissa/sarissa-compressed.js" type="text/javascript"></script>
<script src="ctskit/js/sarissa/sarissa_ieemu_xpath-compressed.js" type="text/javascript"></script>

<!-- CHS Javascript -->
<script src="ctskit/js/simple_ajax.js" type="text/javascript" ></script>

<!-- User-defined variables -->
<script type="text/javascript">
    var textElementClass = "cts-text";
    var pathToXSLT = "ctskit/xsl/chs-gp.xsl";
    /* If a URN is in http://... format, the scripts will happily use that; if you have a 
       "bare" URN, the variable below will be used to construct a service-request.     */
    var urlOfCTS = "";

<!-- ...TO HERE -->

Citing a text in your page

Create a <blockquote>…</blockquote> element with a class value of “cts-text” and a cite attribute whose value is a CTS-URN. The element can contain some descriptive language. When the page loads, it will resolve to the text. (Note that HTML5 does not want <blockquote> elements to be empty, so throw some content inside the element; it will be replaced by the text pointed to by the citation, but will be visible in the source of the HTML document.)

Some notes


See a live web page citing images and texts with URN values. Compare the source HTML (“View source” in your browser) with the browser display of images and texts.