Interface IReaderViewAnnotationLayer<T>

You can create a new annotation layer using ReaderView.createAnnotationLayer('someName');

Each annotation layer will create an overlay element on top of each page in the ReaderView. Added 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.setDefaultAnnotationOptions({ containerClassName: 'my-container-class' }).
2. Add the following CSS to your app's stylesheet:

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

Use ReaderViewAnnotationLayer.setOptions() to set the desired CSS styles for overlay elements. Use ReaderViewAnnotationLayer.setDefaultAnnotationOptions() or ReaderViewAnnotation.setOptions() to set the desired CSS styles for the rendered annotation rectangles.

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

It is recommended to use "mix-blend-mode" with for example "multiply" in the layerStyle to display text highlights. For example:

annotationLayer.setLayerOptions({
    layerStyle: {
        'mix-blend-mode': 'multiply'
    }
});

annotation.setOptions({
    rangeStyle: {
        'background-color': 'violet'
    }
});

Use 'opacity' instead of 'mix-blend-mode' if the latter is not supported by the browser. You can check browser support by using RuntimePlatform.isCssDeclarationSupported('mix-blend-mode', 'multiply')