Text with multiple underlines

Question

My application is that it is some online document to which user can annotate and underline the text for reference. Now this can be done by multiple users, hence need to have dif

Answer 1

All the answers are not complete so far.

Your main requirement is:

Application is that it is some online document to which user can annotate and underline the text for reference. Now this can be done by multiple users, hence need to have different colors for each underline.

According to the above quote, it is required to have all words, white spaces or even letters kept as a separated inline element for instance .

Why?

• Every user can annotate text (thus every sign can be selected)
• Note that when the annotation is long and it breaks to another line, underline (border) should also preserve the vertical position

It will be definitely easier to handle annotations when every element will be separated, especially when you want to use responsive layout.

Let's take a look at the example:

• Note that the users can make selection of every sign
• Underline position is being preserved (javascript was needed here)
• Multiple levels of annotations can be supported (javascript was used here)
• It is fully responsive (try to shrink, expand fiddle's preview pane)

Fiddle: https://jsfiddle.net/00w5f0c9/1/