trupti trupti - 10 months ago 54
CSS Question

Text with multiple underlines

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 different colors for each underline.

So basic requirement is that I need to have a text with multiple underlines below it. Also the underline colors should differ.

Hard way I know is that I can add div/span with line and position it under the text but it can be bit difficult to handle the positions in case of responsive window.

Is there any way to do this using text properties only?
I googled for it and found this link

They are using fsymbols to generate underlines.
But I'm not getting how can I add this to my application. Also it doesn't look like it can have different colors.

Any simpler way or I have to do the hard way only?

Thanks for any help!

Answer Source

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 <span class="user" data-uid="003">amet, <span class="user" data-uid="001"><span class="user" data-uid="002">consectetuer</span> adipiscing elit</span>. Aenean</span> commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <span class="user" data-uid="001">Donec <span class="user" data-uid="003">quam</span> felis,</span> ultricies nec, pellentesque eu, pretium quis, sem. <span class="user" data-uid="003">Nulla</span> consequat massa quis enim. Nullam dictum <span class="user" data-uid="001">felis eu pede mollis pretium. </span><span class="user" data-uid="002"><span class="user" data-uid="001">Integer</span> tincidunt.</span> Cras dapibus.