Spans and styles

Spans

It is possible to annotate spans, possibly including multiple words, in the Tsakorpus JSON format. Span annotations cannot be searched directly, but they can be displayed in search results. Tsakorpus uses CSS styles and HTML classes for that. You can assign each span a certain style that will determine what it looks like.

This is what a span looks like in a JSON file:

1{
2  "off_start": ...,
3  "off_end": ...,
4  "span_class": "...",
5  "tooltip_text": "..."  // optional
6}

The off_start and off_end parameters are integers that define the offset of the relevant segment in the text value in characters.

span_class is a string that defines the style. When displayed in a search hit, the relevant segment is put inside a <span> element with the class attribute set to style_%SPAN_CLASS%. For example, if span_class equals i, the actual span tag will look like <span class="style_i">.

The classes should be defined in /search/web_app/static/css/span_styles.css. There are several predefined classes:

  • style_i (italics);

  • style_b (bold);

  • style_sup (superscript);

  • style_sub (subscript);

  • style_txt_hX for X = 1, 2 and 3 (headers).

If the tooltip_text parameter is set, it can be used to display a tooltip. However, this is not done automatically. Instead, its value is written to the data-tooltip-text attribute of the <span> element. You can make it visible by referencing it in the corresponding style definition. Here is an example of how this can be done:

 1.style_%SPAN_CLASS%:hover:before {
 2  content: attr(data-tooltip-text);
 3  background-color: #000;
 4  color: #fff;
 5  top: 1em;
 6  padding: 10px;
 7  border-radius: 4px;
 8  position: absolute;
 9  white-space: nowrap;
10}

Languages/tiers

It is possible to display text in different languages/tiers differently. Each sentence is assigned an HTML class sent_lang_%LANGUAGE_NAME%. If you want to define a style for some language, you can do it in /search/web_app/static/css/span_styles.css. Two styles are defined by default:

  • sent_lang_ref (for “reference tiers”): smaller font, gray color.

  • sent_lang_english_note (for comments in English): light gray color.