- Help
- »
- Annotations
Links are used to link text segments to properties or other entities. The text segment is marked with a tag. Use links for structured annotations such as references to persons, places, content analysis categories or simple text highlighting.
Footnotes are standalone tags or tags around a text segment that refer to a footnotes entity containing a comment relating to the text passage. Use footnotes for critical apparatus, comments, or memos.
Rendering options
Both annotation types can be rendered as formatting (e.g. italic text), as stand-alone tags (e.g. word separators or literature references), or as brackets (e.g. indicating text added in a transcription). Each tag can contain additional attributes. They are stored in the database fields using XML tags and converted to HTML tags for displaying.
Annotations do not necessarily need a links or footnotes entity and, thus, can also be used as simple markup tags. By default, each annotation has a button in the toolbar.
The tag_type key of the configuration determines the behavior (work in progress):
- Tags: Tags with standard tool buttons. Rendering is determined by the tag_type key:
text(render a standalone value),format(format a text segment),bracket(the text segment is enclosed in brackets). Each tag can have attributes and link to one single entity, such as a property or an article. - Attributes: Annotations that link to multiple categories are called molecules. The molecule itself is a standard tag configruation. It refers to other link types in their attributes key. The configuration entitities need to have the tag type
attributeand their toolbutton must be disabled. - Dropdowns: Annoations can be grouped to create drop-down buttons. To create such a tool button, configure a simple links annotation but omit the tag_type key. In the toolbutton configuration object, set the dropdown key to
trueand set a value in the group key. All other links types to be subsumed under this dropdown must have the same group key value in their toolbutton configuration and no other toolbutton keys. - Line breaks: Line breaks need to be configured using a links annotation with tag type
break. - Special characters: Configuratiuon entities with the tag_type
characterare considered special characters and are inserted via the special characters button in the toolbar.
Each annotation, whether link or footnote, has a name and optionally can be assigned to a custom group by setting a common value in the group key. When editing, for each group, you can separately toggle the annotation boxes using the settings button next to the text input fields. Further, you can use the group names instead of annotation names to configure which annotations are allowed in which fields.
| Key | Description |
|---|---|
| group | Optional. Name of the group to which this annotation belongs, for example “transcription”. This allows multiple annotations to be addressed collectively. This is particularly useful when configuring XML fields, as it means you don't have to list all allowed annotations individually. Instead, you can add the group name. |
| toolbutton | A toolbar configuration object (see below). Example for a literature reference button:
"toolbutton": { "group": "links", "icon": "literature"}
The configuration object can be abbreviated:
1. Boolean-value ( false|true): By default, each annotation is assigned its own button in the toolbar (true). To prevent a button from being created, the key is set to false. Usually you should disable tool buttons for special characters, because they are placed in the special characters drop-down menu (see below). Corresponds to the enable key in the full configuration.2. String: Label of the tool button, for example [abc] or a Unicode symbol. Corresponds to the symbol key on the full configuration. |
| shortcut | Editor shortcut. Examples:
|
| tag_type | Defines how the annotation is rendered.
|
| attributes | Optional. An attributes list object. Each key is an attribute name, and the value contains an attribute configuration object with the following keys:
id, value, class and attributes with an data prefix are reserved and must not be used. |
| fields | Field configration list object. Keys represent field names, values contain a field configuration object including the rendering configuration. Available fields for footnotes:
render subkey to one of
`prefix` or `postfix` (for the brackets), or `text` (for tag values).
|
| prefix | For bracket tags, the value used for the opening bracket. For text tags, this value is prefixed to the value given in the `html_content` key. For format tags, this value is inserted as text at the beginning of the selected range. |
| content | For text tags this value is rendered as the tag content. For example, word separators can be represented by a middle dot. |
| postfix | For bracket tags, the value used for the closing bracket. For text tags, the value is appended to the `html_content` value. For format tags, this value is inserted as text at the end of the selected range. |
| escape | If the values in prefix, content and postfix need to be interpreted as raw HTML, disable escaping by setting it to false. |
| html md txt rdf ttl jsonld |
Depending on the output format, tags are rendered differently: HTML requires tags, whereas Markdown and full-text search should not contain tags. In the html, md and txt keys, rendering objects with the keys `tag_type`, `tag`, `prefix`, `content` and `postfix` can be provided. These override the default settings for the respective formats. This way, for example, the rendering of a paragraph can be changed from tag_type "bracket" for the default HTML rendering to "format" for Markdown rendering in order to hide the markup. If possible, it is advised to set the default rendering to plain outputs without markup and then explicitly override the rendering in the `html` key - instead of first defining HTML rendering and then reverting it for all other possible output formats. For example, you can omit bracket rendering by default and only output bracket markup in HTML format. |
| html.tag | The tag name used for HTML rendering. If omitted, by default, all XML tags (which correspond to the annotation names in the types configuration) are converted to span tags with CSS classed that can be used for styling. Each converted tag is assigned the css class `xml_tag`. In addition, each tag is assigned a css class according to the pattern `xml_tag_<name>`. For example, a links annotation named `wtr` will be stored in the XML field as wtr tag and rendered as a span element with the class `xml_tag_wtr`. Format tags, in addition, are assigned the css class `xml_format`. Bracket tags are converted into three tags. The opening bracket is assigned the class `xml_bracket_open`, the closing bracket is assigned the class `xml_bracket_close`, and a tag wrapping the content is assigned the class `xml_bracket_content`. |
| css_style | CSS styling embedded in the web page when rendering entities as HTML. See the `html.tag` configuration to determine CSS selectors for styling the annotation.
Example to create a break after a tag:
Annotation groups can be hidden with the settings button next to input fields. This will not really hide the content of all tags in the group. Instead it adds a css class following the pattern `.xml_group_<groupname>_unadorned` to the container which allows you to provide simplified unobstrusive styling. For example, you can change the color from blue to the default black color. Provide default rendering in the `default` subkey and rendering for the unselected state in the `unadorned` subkey. Example: Small caps configured in a links configuration named `k` that appear as normal text when the text group has been unselected.
{
"default": ".xml_tag_k {
color: #1ccaaa;
font-size: 1em;
font-variant: small-caps }",
"unadorned": ".xml_group_text_unadorned .xml_tag_k {
color: inherit;
font-size: inherit;
font-variant: inherit; }"
}
|
| color | Optional. A colour used to style the annotation box next the input field. |
Examples
Example of a checkbox configuration:
{
"caption": "Line begins within a word: ",
"title": "If the new line begins within a word, select \"yes\".",
"input": "checkbox",
"values": {
"yes": "yes",
"no": "no"
}
}
Example of a molecular annotation configuration:
If an annotation should link to multiple properties, a corresponding link configuration without a tool button is first created for each target property type. The molecular annotation itself uses them in its attributes configuration. In the following example defines a moleculear annotation with two input fields:
{
"tag_type": "format",
"attributes": {
"annotations": {
"input": "link",
"type": "annotations"
},
"categories": {
"input": "link",
"type": "categories"
}
}
}
The configuration refers to other link configurations in the type keys. The respective annotations and categories annotation
are configured without tool button. The tag_type key must be set to attribute:
{
"group": "annos",
"toolbutton": false,
"tag_type": "attribute",
"fields": {
"to": {
"format": "record",
"targets": {
"properties": ["annotations"]
}
}
}
}
Toolbuttons
A button is created for each annotation. Their design is defined in the toolbutton key.
Icons (or short labels) for the buttons are configured using Uincode characters in the symbol key.
You can use icons from Font Awesome if you set the font subkey to awesome.
As an alternative, Epigraf ships with a set of SVG icons used for transcriptions. The file name of the SVG graphic can be provided in the icon key. For annotations that lack a symbol or icon key, the annotation's IRI fragment is used to refer to an SVG file (which then must be present on the server).
| Key | Description |
|---|---|
| symbol | A short label such as [abc] or a Unicode symbol such as ✅ for a check mark symbol. After saving, the character is automatically translated into its Unicode escape sequence ("\u2705" in the example). |
| font | Set the 'font' key to "awesome" if you want to use Unicode symbols from Font Awesome. Find an appropriate free icon on the Font-Awesome page, e.g. the book icon. Copy either the glyph or the Unicode codepoint and paste it into the `symbol` key. Code points are inserted with the prefix \u.
|
| style | CSS styles to change the appearance fo the button, for example: color:#ff0000; font-weight:bold; for a red bold button. |
| group | All toolbuttons with the same group value are combined into a drop-down menu. Example: If the group of link annotations for reference to literature and for references, to other articles both contain reference), a drop-down menu with the corresponding toolbuttons is created. To bypass drop-down creating, set the group to default. |
| dropdown | To design dropdown buttons, a separate annotation is created just for the dropdown button. The group key must match the group of all assembeld buttons, and the dropdown key is set to true. The button can be designed using additional keys such as icon, symbol or style. Example :
"toolbutton": {
"group": "links",
"icon": "reference",
"dropdown": true
}
|
| icon | The icon key is an alternative to thy symbols key for using SVG icons. The value refers to a predefined SVG file shipped with Epigraf. Currently, it is not possible to upload user-defined SVG files, they can only be integrated by developers. |
Breaks
Line breaks are created in the editor with Shift+Enter. They are stored in XML as empty nl tags and rendered in HTML as br tags. You must always provide a links configuration named "nl" for line breaks, as follows:
{
"tag_type": "break",
"toolbutton": false
}
If line breaks are allowed in an input field, the nl type must be listed in the types key of the XML field configuration.
Special characters
The editor contains a standard set of special characters (punctuation marks, currency symbols, units, etc.) that can be inserted using the Special Characters button in the toolbar. More special characters can be added by creating a links configuration with the following fields:
| Key | Description |
|---|---|
| name | English name of the special character, should follow the name in the Unicode standard. For example, the character "■" is called "BLACK SQUARE". The name should be in lower case and without spaces or special characters. In the example, “black_square” would be a perfect name for the configuration entity. |
| scope | Must be set to `links`. |
| category | A custom categoy value makes it easier to navigate in the types configuration, for example "Characters", although it has no consequences for editing. |
| caption | Name of the special character displayed in the toolbar, for example "Black square" (in english). |
| IRI fragment | Derived from the name prefixed with "char-", for example "char-black_square". |
| config | Contains the extended configuration of the special character, see the next table. |
While the previous fields define the name, the Config field configures the behavior in the XML editor. The following keys are important:
| Key | Description |
|---|---|
| toolbutton | For special characters, always set to `false`. |
| group | The group name can be used when configuring XML fields to control which characters are allowed in the respective field. Usually you should set this to `character`. |
| tag_type | For special characters, always set tot `character`. |
| content | The character to be inserted. Please note: After saving, the character is automatically converted to its Unicode escape sequence For example, "■" becomes `\u25A0`. |
| shortcut | The keyboard combination to insert the special character, (e.g., "Ctrl+K"), in English and without any spaces. |
| pane | Multiple special characters can be grouped together into a pane, for example to create a dedicated "Edition" pane. Special characters not assigned to a specific pane are listed in the "Custom" pane. |