Symbol representation as the "clickable" annotation

[AnthonyKamers]

I don't know if you guys have already considered using a symbol representation in the text to represent what an annotation is. The current way, i.e., using highlights in the text, prevents the user from accessing multiple annotations in the same area. If we have a symbol representation before the annotation target, we can have multiple annotations for the same target and be able to click individually on each one. My team has made some arrangements in another annotation lib so this would be possible, and the result I show next:
.

Would it be possible to change the base renderer to have this done? Following this line of reasoning, can we give a symbol representation of each annotation's purpose or something like that?

[rsimon]

It's an interesting thought. But would be difficult to implement, I believe. The text annotator doesn't modify the DOM element that contains the text. We wouldn't be able to "inject" anything between words.

That being said: I you absolutely can access overlapping annotations. If you click, it is always the smallest annotation at that point that will get selected. It's never possible for a larger annotation to obstruct access to a smaller annotation "underneath".

If you are worried about bad visibility of overlaps to users, you could make use of the z-index property in the style function to create staggered underlines:

The only problematic case would be two annotations that are completely identical (= start at the same character, end at the same character). This is probably what you mean. But my personal feeling is that this should really be one annotation, but with a different payload. (You can attach as many "bodies" as you want, representing different annotation parts). In that sense, the UI shouldn't really allow the creation of perfect overlaps. RecogitoJS did that AFAIR. But the text annotator currently doesn't prevent it. It may come back as a feature in the future, though.