I am looking for a way to provide rendering of complex annotations for text in a javascript context. The annotations are based on the way a user has tagged individual words and groups of words.

The annotating can be hierarchical. E.g. a group may have an annotation that spans the width of the group while individual words within the group may also have their own annotation.

I have considered CSS, canvas and SVG. With the latter two am not clear on how to position the rendering such that it lines up with the text. See sample markup below.