tweaking brat

This page contains miscellaneous information regarding various tweaks to brat. These are not part of standard configuration, and there is currently no easy user-friendly way to make these adjustments.

Fonts

This section describes how to adjust brat fonts.

brat primarily uses TrueType (.ttf) fonts. Additionally, SVG fonts (.svg) are used in embedding when generating SVG for export and conversion to other formats such as PNG. With a bit of work and help from conversion tools such as ttf2svg (see also helper script tools/ttf2svg.sh distributed with brat), it should be possible to set up brat to use almost any font. For simplicity, the following assumes that you are setting up a font named FONT and already have the TrueType and SVG files, FONT.ttf and FONT.svg (the latter is not needed if you don't care about SVG export).

First, copy the font files to static/fonts/ in the brat base directory.

cp FONT.ttf FONT.svg static/fonts/

Next, open the style sheet file style.css using your favorite text editor and edit as follows:

1) add a @font-face rule (e.g. where other similar ones are found in the .css):

@font-face {
  font-family: 'FONTNAME';
  src: url('static/fonts/FONT.ttf') format('truetype');
}

(Here, FONTNAME can be anything you like as long as you use the name consistently also in the following.)

2) change the font-family properties you are interested in to refer to FONTNAME. For example, if you want to change the primary text font, edit the lines

text {
  font-size: 13px;
  font-family: 'Liberation Sans', Verdana, Arial, Helvetica, sans-serif;
}

to read e.g.

text {
  font-size: 13px;
  font-family: 'FONTNAME', Verdana, Arial, Helvetica, sans-serif;
}

You may want to also change the list of "fallback" fonts (here, Verdana, Arial, Helvetica, sans-serif) to something resembling your font for the benefit of browsers that don't support .ttf fonts.

Hint: as of this writing, brat uses the font-family 'Liberation Sans' for standard text and 'PT Sans Caption' for annotations. Searching for these strings in style.css should allow you to find all the locations where the font is set.

If you need to support SVG export using your font, you should add 'FONT.svg' to the list SVG_FONTS in the brat source file server/src/svg.py:

SVG_FONTS = (
        path_join(FONT_DIR, 'FONT.svg'),
        [...]
        )

Finally, to have the font change take effect, you may need to do a "hard" refresh (CTRL+SHIFT+R on many browsers) of the brat page in your browser.

Highlight effects

This section describes how to adjust brat annotation highlighting.

brat applies a variety of effects to visually mark aspects of annotations such as having an associated normalization annotation, an error detected in annotation validation, or an annotator note. The visual appearance of these markings is controlled by settings in style.css and variables in client/src/visualizer.js.

In brief, to adjust the "halo" effects for validation errors, annotations with notes, and similar, look for something like the following in style.css:

.shadow_AnnotatorNotes {
  fill: #3ab7ee;
}

and these settings in client/src/visualizer.css:

var rectShadowSize = 3;
var rectShadowRounding = 2.5;
var arcLabelShadowSize = 1;
var arcLabelShadowRounding = 5;

For changing the emphasis given to annotations with an associated normalization annotation, look for this in style.css:

rect.Normalized {
  stroke-width: 1.5;
}

See any online documentation on style sheets on how to edit style.css.