Tech Radar

Some existing or proposed browser APIs, web standards, modules, or other resources that could be useful for Apache Annotator, in combination with it, or for other annotation-related projects and purposes.

Annotation formats

See Annotation Formats.

Annotation software/projects

See Other Web Annotation Projects.

Potentially useful JS&TS packages

See Relevant TS&JS modules.

Text Fragments

Text Fragments (previously “ScrollToTextFragment”); implemented in Chrome/Edge/Opera/… (see caniuse). And also in a homemade TypeScript implementation & polyfill.

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

Defines a URL fragment syntax similar to the WA Model’s TextQuoteSelector (or a RangeSelector containing TextQuoteSelectors):

(see issue #60)

Note that the ‘fragment directive’ introduced here (with the :~: seperator) could find uses beyond the :~:text=… fragment; e.g. mapping WA Selectors to URL fragments (like in the Selectors&States note).

Intl.Segmenter

https://github.com/tc39/proposal-intl-segmenter: Proposal for Unicode-aware text segmentation (finding word boundaries) in Javascript.

(see issue #55)

ARIA / Accessible annotations

• https://w3c.github.io/annotation-aria/
• https://github.com/aleventhal/aria-annotations#readme
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Annotations
• https://github.com/w3c/aria/issues/749

Possibly also usable internally, to keep track of highlights and annotation bodies.

(see issue #53, #45)

Intersection Observer

https://www.w3.org/TR/intersection-observer/

One use case: “Calculating element visibility” → helpful for lazy loading/anchoring/highlighting

(see issue #47, #78)

CSS custom highlight API

https://www.w3.org/TR/css-highlight-api-1/ “a mechanism for styling arbitrary ranges of a document identified by script.” (see issue #54) https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API

Could replace, or be used in, our highlightText() function; using <mark> elements could become a fallback. See comment on issue #135

// CSS
:root::highlight(example-highlight) {
  background-color: yellow;
}
// JS
const range = matchAnnotation(…);
CSS.highlights.add(new Highlight("example-highlight", range));

Highlight API

WorkerDOM

“The same DOM API and Frameworks you know, but in a Web Worker.” (work in progress)

from issue #49:

WorkerDOM is part of the growing list of AMP Project open source and potentially standardized outputs.

This one in particular could be useful for highlighting implementations:

Use Cases:

1. Embedded content from a third party living side by side with first party code.
2. Mitigation of expensive rendering for content not requiring synchronous updates to user actions.
3. Retaining main thread availablity for high priority updates by async updating elsewhere in a document.