TEITOK Help Pages

Working with Conditional CSS files

TEITOK allows you to modify the text visualization - choose which orthographic realization to show for a word, whether to render the page and line breaks, and which tags to display. But all these are related to a specific set of options in the XML files - and sometimes, there are other elements in the XML for which you want to change the visualization. For instance, if you have a learner corpus for which you want to optionally display the teacher corrections. Or if you want to optionally highlight the named entities. Or if you want to toggle spoken annotations on and off. For all those cases, the conditional CSS function in TEITOK can help you to achieve exactly that.

The function consists of buttons, that will toggle CSS style files on and off. This is done in the settings, in //xmlfile/styles. Here, you define for each button what the title of the button should be, and what the related .css file is. Furthermore, you can define conditions in XPath or regular expression defining when the button should appear.

As an example - say we want terms in our text to be optionally highlighted. We can achieve this by defining a toggle button with the following defition:

    <item key="terms" display="Terms" xpcond="//text//term" css="terms.css"/>

This will display a button above the text display if there is an element <term> in the transcription. Clicking this button will activate the style definitions in Resources/terms.css, which can be edited via the "edit resource files" in admin. And in that CSS file we then define a highlighting colour for <term> elements:

    #mtxt term { background-color: #99FFCC; }

So clicking the button will set all terms in the transcription on a light green background.

Since the conditional CSS files are always loaded last, any definition in them will override the defitions in the standard htmlstyles.css and xmlstyle.css. So for instance it is possible to have say spoken annotations such as pauses, gaps, and extralinguistic elements be hidden or displayed as textual elements in the normal view (say rendering short pauses as commas and long pauses as dots), but have them display as spoken data symbols (double slash for long pauses, etc.) when clicking on a button "Spoken rendering".

Back to index