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 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

http://fsymbols.com/generators/lines/

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?

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; }

<p>
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. 
</p>

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; }

<p>
Lorem <span class="annotation" data-uid="004">ipsum dolor <span class="annotation" data-uid="001">sit amet, <span class="annotation" data-uid="002">consectetuer adipiscing</span> elit.</span> Aenean commodo ligula eget dolor. Aenean massa. <span class="annotation" data-uid="002">Cum sociis <span class="annotation" data-uid="001">natoque penatibus et <span class="annotation" data-uid="003">magnis</span> dis parturient montes, nascetur</span> ridiculus mus.</span> Donec quam felis, ultricies nec, <span class="annotation" data-uid="002">pellentesque eu, </span><span class="annotation" data-uid="001"><span class="annotation" data-uid="002">pretium</span> quis, sem.</span> Donec pede justo, fringilla vel, aliquet nec,</span> vulputate eget, arcu.
</p>

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.

Answer 2

you could do it something like this

p {
  text-decoration: underline overline line-through;
  border-top: 3px solid red;
  border-bottom: 3px solid green;
  display: inline-block;
  padding: 2px 0 0 0;
  font-size: 50px;
  margin: 0;
}

<p>Test</p>

Answer 3

It seems they are just using using ̅c̅o̅m̅b̅i̅̅̅̅ni̅̅̅ng overline and ̲u̲n̲d̲e̲r̲l̲in̲̲̲̲̲e̲

http://www.fileformat.info/info/unicode/char/0332/browsertest.htm

http://www.fileformat.info/info/unicode/char/0305/browsertest.htm

I am not sure you can make the combining underline another colour than the text but you can in some browsers change the colour of the text decoration Changing Underline color

This does not work for me in Chrome

.example {
  text-decoration: underline;
  -webkit-text-decoration-color: red;
  -moz-text-decoration-color: red;
  /* vendor prefix not required as of V36 */
  text-decoration-color: red;
  /* color: green; */

}

<b class="example">text-decoration</b>  <br/>

  
<b style="color:red">u̲n̲d̲e̲r̲l̲in̲̲̲̲̲e̲<b><br/>
  
  
  
  

Answer 4

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 <span>.

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/