TEI Boilerplate Walk Through

TEI Boilerplate

Boilerplate is a system to create styles for XML text for web publication that uses CSS and HTML browsers and doesn't require the use of a server or other tools.

Set Up Boilerplate on Your Computer

Download the TEI_TEACHING.ZIP file below (click file and then double click the zip file) and unpack on your computer. Make note of where you upacked it. (This is from Women Writers TEI Workshops) Your directory should look like this:


It is critical that you have the exact directory structure here on your installation. If files are in the wrong place or named differently, they will not work.

Your TEI File

The XML template that I provided you with earlier is set up to use Boilerplate's styling. You can see that at the top of the document it has references to the boilerplate directories.

Save the TEI file you have been working on in the /content directory of the Boilerplate directory.


Open your sample TEI file in your browser. See how the xml is rendered. The styling on the document is coming from a file in the Boilerplate directory called custom.css.

You can edit the style of the document by adding text to the custom.CSS file. (The /* indicates a comment that explains what the CSS code does. For more on CSS coding, see CSS cheat sheet.

add:before {content:"\2191"} /*Adding an uparrow at the start of additions--use backslash and 4digit unicode #*/
add:after {content:"\2193"} /*Adding a down arrow at the end of additions*/
del {text-decoration: line-through;} /*Striking out deletions*/
corr:before {content:"[";} /*bracketing corrected text*/
corr:after {content:"]";} /*bracketing corrected text*/
corr {font-style: italic;} /*italicising corrected text*/
supplied:before {content:"[";} /*bracketing supplied text*/
supplied:after {content:"]";} /*bracketing supplied text*/
supplied {font-style: italic;} /*italicizing supplied text*/
persName {color:red;} /*made personal names red--just to show what it can do*/
note {font-style: italic;} /*Italicizing headnote */
note:after {content:"--JA20C";} /*Add attribution to headnotes*/
p {text-indent:50px;} /*Indenting paragraphs about 5 spaces*/

Viewing the File

To view your XML file with the Boilerplate styling, open it as a local file in your browser.

  • Firefox - CTRL-O and navigate to the correct directory and select the file.
  • Safari - A little trickier - see howto.
  • Chrome - CTRL-O and navigate to the correct directory and select the file.
  • Internet Explorer - CTRL-O and Browse for the correct directory and select the file.


Navigate to the file on your computer and select Open With and choose a browser.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License