Text only | Skip links
Skip links||IT Services, University of Oxford

1. Getting started with TEI stylesheets

Download http://tei.oucs.ox.ac.uk/Talks/2011-05-26-lyon/Work.zip to your computer. It will create a directory called Work which contains all the files you will need.

The main file is called 3011.xml and is the text of a novel by Rudyard Kipling.

Your first task is to create a new profile. Using the operating system facilities, make a copy of release/profiles/default as release/profiles/lyon. From now on we will do all our work in here.

Load the file release/profiles/lyon/html/to.xsl into oXygen and remove all the code after <xsl:import href="../../../xhtml2/tei.xsl"/>. This gives you a clean file to work on.

Now load the XML file 3011.xml into oXygen, and prepare to transform it using your new file. This means you need to edit the current Transformation Scenario (middle icon in ). I suggest you make a New one:

Make sure you choose the Saxon 9 processor, and put the location of the XSL file into the XSL URL box:

In the Output tab, set the options like this:

Now you can press the Transform button, and your browser should be loaded with an HTML rendition of the novel.

If you are a Linux or Mac user who wants to use a command line, you can experiment now like this to create a file 3011.html which you can load into your browser:

macbookpro:Work rahtz$ release/teitohtml --profile=lyon 3011.xml Read file 3011.xml Wrote 3011.html in /Users/rahtz/TEI/tei.oucs.ox.ac.uk/Talks/2011-05-26-lyon/Work

The available scripts are teitodocx, docxtotei, teitoodt, odttotei, teitolatex, teitoepub, and teitohtml.

2. Changing parameters

From now on, edit your file profiles/lyon/html/to.xsl and simply add new bits of XSL to the end, then run the transformation.

A good starting point is to add
<xsl:param name="cssFile">lyon.css</xsl:param>
<xsl:param name="pageLayout">CSS</xsl:param>
The point of this is to a) use the CSS file in the same directory as the file, so that you can play with it; and b) to activate the slightly more complex layout. This is done changing one parameter, pageLayout, from its default value of Simple to CSS. This creates a display in which the web page is divided into three main areas (top area for titles, right-hand column for main text and left-hand column for navigation). A table of contents is created in the left-hand column, using the <div> structure.1 This layout is created using Cascading Stylesheets (CSS); for use with older browsers who do not support CSS properly, an alternative value for pageLayout of Table will produce approximately the same effect using HTML tables (but this is hardly recommended).

Check that this works for you.

What else can be done to improve the layout? In the following stylesheet, we:
  1. Set the name of the Parent Institution (displayed by default in the navigation bar under the header).
  2. Override the template navbar (by default this is empty) to add a set of standard links which will appear on generated pages.
  3. Provide a set of replacement settings for the CSS stylesheet. This makes use of the template cssHook which is by default (like all templates ending in ‘Hook’) empty. Here we provide a background image for the header, change the colour and margin of the main title, and change the main background colour.
<xsl:param name="cssFile">lyon.css</xsl:param>
<xsl:param name="pageLayout">CSS</xsl:param>
<xsl:param name="parentWords">Mutec Lyon</xsl:param>
<xsl:template name="navbar">
 <a class="navbarhref="http://www.en.lyon-france.com/">Lyon</a> |
<a class="navbarhref="http://www.ens-lyon.eu/">ENS</a> |
<a class="navbarhref="http://www.tei-c.org/">TEI </a>
<xsl:template name="cssHook">
   background: url("sea.jpg");
   background-repeat : no-repeat;
   overflow : inherit;
   height: 140;
   h1.maintitle {
   color: red;
   margin-left: 200px;
   body {
   background-color: #dddddd;
You should now try to
  • change the font size of the navigation bar and the table of contents to make it look more elegant. How? Look at the HTML and the CSS...
  • override the template named stdfooter to provide your own material at the bottom of the page.

If you feel clever and strong, try to be more brutal, and generate just HTML <div> elements, suitable to dropping into another system like a CMS. To do this, you'll need to override the templates called pageLayoutCSS and mainPage.

3. OxGarage

Now it is time to work with OxGarage, to check that works OK for you. Visit oxgarage.oucs.ox.ac.uk:8080/ege-webclient and check that it all works for you. Experiment with converting to and from Word or OpenOffice files.

This layout is mainly intended for texts which use this sort of <div> markup.

TEI@Oxford. Date: 2011-05
Copyright University of Oxford