TEITOK Help Pages

Styling TEI/XML files

Most web pages that are based on XML documents convert the XML files to HTML before displaying them. This is either done beforehand, or on-the-fly using XSLT. TEITOK works differently: it embeds the XML directly into the HTML page, creating a blend of XHTML and TEI/XML. It does this since many of the display options use information from the TEI/XML file, that would not be available when converted to HTML. All embedded TEI/XML is located inside an HTML element with the xml-id "mtxt", and how that XML fragment is visualized is defined in CSS style file.

So text inside a TEI element <hi rend="italics"> is not converted to an HTML element <i>, but rather, the text is displayed in italics, because the CSS file contains an explicit command to make it italics:

#mtxt hi[rend=italics] { font-style: italics; }

This CSS command tells the browser to display any <hi> node that has an attribute @rend="italics" and is located inside an element with the id mtxt using an italics font. So that would apply to anything like the italics in this fragment:

<div id="mtxt">Something in <hi rend="italics">italics</hi>.</div>

Default styles are provided in a file teitok.css, which is located in the Javascripts folder, so any template file should always include this CSS file to make sure necessary system definitions are always present. But any CSS definitions in there can be overruled by project-specific styles, which are by default in a file xmlstyles.css inside the Resources folder, to make sure they can be easily editing within the interface. The xmlstyles.css file should always be load after the teitok.css to make sure local definitions take preference over default definitions.

Symbol-based rendering

Traditionally, much linguistic mark-up was done using special symbols - so for instance, in spoken corpora, truncated words were often followed by a & sign to indicate the word was truncated: trunc&. In TEI, truncated speech is marked up as <del type="truncation">. Since we can use colors in a browser, there is no need to restrict mark-up rendering to symbols, but that is not to say we cannot use symbol-based rendering: the teitok.css file in fact by default uses symbol-based rendering for truncations, in the following way:

#mtxt del[type=trunctaion]::after { content: '&'; }

This will put a pseudo-element after any <del type="truncation"> node, filled with the content '&'. So this will render <del type="truncation">trunc</del> as above: trunc&. Further CSS styles then make sure that any <del>, including the &, is displayed in grey.

This provides a very convenient way to display mark-up in a way that is familiar to the target audience, but where the symbol-based mark-up is generated by the computer, and hence does not interfere with the text. However, there is a small complication: when the content of the deleted element is suppressed, which is what by default happens in the @form view, the pseudo-element is not suppressed, meaning the & will stay as a ghost element. This is not something that can be solved in CSS, and hence TEITOK provides a Javascript solution that can be used in CSS: when changing views, any token that no longer has any content is adorned with an attribute empty="1", which can then be used by CSS to suppressed the associated pseudo-elements:

#mtxt *[empty=1] { display: none; }

View-specific styling

There are situations in which certain mark-up should only be displayed in specific text views. For instance, in the COPLE2 corpus, there are indications of the corrections made by the teacher in student essays. These corrections should be shown in the transcription view, but not in any other. Again, this is not something that can be handled directly in CSS, and TEITOK provides a Javascript-based handle: when switching the text-view, the new text view is set as an attribute on the #mtxt element. So when switching to @pform (the raw XML view), the #mtxt element will be set to <div id="mtxt" show="pform">, which we can then use to define view-specific style settings - we can make any text inside an element with @hand="teacher" with a yellow background, but only in the raw XML view in the following way:

#mtxt[show="pform] *[hand=teacher] { background-color: yellow; }

Back to index