Help/Annotations along the text

De Rich Annotator System

Readings can have different forms from studies on a separate page linked to literary texts to annotations displayed along the text.

For annotations displayed along the text, in a separate box, instead of a separate page, the "half-right" <div> class can be used. This div class creates a floating box filling 40% of the screen width at the right side. The annotation text has to be between the opening <div class="half-right"> tag and the closing </div> tag.

The original text can be marked by different font color or background color:

  • For different font color, put the text between <span style="color:#hex color code;"> and </span> tags.
  • For different background color, put the text between <span style="background-color:#hex color code;"> and </span> tags.

It is recommended to create subpages for the annotated text (or for annotations only, see below). Slashes (/) within a page name break the page into parent and subpages, recursively, e.g.:

  • Text with links – the text page;
  • Text with links/Annotation 1 – a subpage with annotation.

You can link directly to any page’s subpage using the normal double square brackets notation, by providing the full name – including the slash(es) and the individual subpage name(s).

To avoid copying the same text in each annotation subpage, use labeled section transclusion: mark off sections in the text, and transclude all unchanged sections to the annotation subpage; only the annotated paragraph has to be copied. If you don't want to change anything in the original text, all sections can be transcluded, and only the <div> block with the annotation has to be inserted at the right place. You can therefore easily create as many subpages as annotations, and the labeled section transclusion makes simple to place the "half-right" class div at the right position. Thus annotation subpages contain the transcluded original text (with links to other annotation subpages) and the annotation displayed in a floating box.

To have annotation boxes on the top of the page regardless to the position of the <div> block in the text, use anchors in annotations links (See Links).


Back to contents