ReaderViewAnnotationLayer

ReaderViewAnnotationLayers are used for creating and rendering ReaderViewAnnotations. Annotation layers are created using ReaderView.createAnnotationLayer and are rendered on top of publication content.

Each annotation layer will create an overlay element on top of each page in the ReaderView. Annotations will render as rectangles into these overlay elements.

The ReaderViewAnnotationLayer DOM structure is as follows:

- `<div class="colibrio-reader-view-annotation-layer">` which is rendered on top of all pages.
     - `<div class="colibrio-reader-view-annotation-container">` which is rendered for each annotation.
         - One or more <div> elements, if the annotation refers to a range, or
         - One <div> element, if the annotation refers to a position in the content.

Additionally, the ReaderViewAnnotationLayer element (<div class="colibrio-reader-view-annotation-layer">) will also have one of the following classes when displayed in a spread:

• colibrio-reader-view-annotation-layer--left-spread if the element is in the left spread slot.

• colibrio-reader-view-annotation-layer--right-spread if the element is in the right spread slot.

For example, to style a <div class="colibrio-reader-view-annotation-container"> element depending on which side of the spread it is rendered on:

1. Set a custom class name for containers in this layer. For example layer.defaultAnnotationOptions.containerClassName = "my-container-class".

2. Add the following CSS to the WebView by calling ReaderView.addCustomCss():

.colibrio-reader-view-annotation-layer--left-spread .my-container-class {
    // My left spread styles.
}

Use ReaderViewAnnotationLayer.options to set the desired CSS styles for overlay elements. Use ReaderViewAnnotationLayer.defaultAnnotationOptions or ReaderViewAnnotation.options to set the desired CSS styles for the rendered annotation rectangles.

There are no styling on these elements by default, (except positioning styles).

It is recommended to set "mix-blend-mode" to for example "multiply" in the ReaderViewAnnotationLayer.options.layerStyle to display text highlights.