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

Annotating text with text does not seem the right way to do it. I think annotation should be done by markup. To implement multiple underlinings (I understand that there could be more than two users), you could use border-bottoms in nested spans. These need to be set to display as inline-blocks, so you can influence their height, so you can nest more spans without overwriting the border. It also needs to be considered that overlappings - also non-hierarchical - can happen.

Note that I kept the underlining span itself from the list of users and their associated colors.

span.user { border-bottom:1px solid; display:inline-block; padding-bottom:1px; }

span[data-uid='001'] { border-bottom-color:blue; }
span[data-uid='002'] { border-bottom-color:red; }
span[data-uid='003'] { border-bottom-color:orange; }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 

EDIT:

I found a better solution that covers the line-breaking problem caused by using "display:inline-block":

p { width:150px; line-height:2em; }

span.annotation { border-bottom:1px solid; }

span.annotation span.annotation { padding-bottom:2px; }

span.annotation span.annotation span.annotation { padding-bottom:4px; }

span.annotation span.annotation span.annotation span.annotation { padding-bottom:6px; }

span[data-uid="001"] { border-color:orange; }
span[data-uid="002"] { border-color:blue; }
span[data-uid="003"] { border-color:red; }
span[data-uid="004"] { border-color:green; }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

The only thing I dislike here is that you need a CSS statement for each layer of nesting (could be easier with LESS). However, in the application you would limit the display of the annotation layers to (lets say) five and find another way to display that there are more than five annotation layers.