19

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?

friedemann_bach
  • 1,418
  • 14
  • 29
pravid
  • 719
  • 9
  • 27

5 Answers5

23

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.

friedemann_bach
  • 1,418
  • 14
  • 29
  • 1
    Imo the best solution so far. I was trying something similar but didn't came up with a solution that supports multi-line annotation/responsiveness, which seems to be a problem here, too. – Marvin Nov 29 '16 at 09:09
  • Yes, there are varying line-heights, and line-breaking could be improved. – friedemann_bach Nov 29 '16 at 09:13
  • 1
    For example, if there is a span that starts in line 1 and ends in line 2, the border will not underline the text in line 2. You need to resize your browser window to see it in your example or just assume that a user annotes the whole text from "Lorem" to "dapibus". /edit: yes "line-breaking" was the word I was looking for ;) – Marvin Nov 29 '16 at 09:17
  • Updated. I think that fixes the line-breaking issue. – friedemann_bach Nov 29 '16 at 14:12
5

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>
Rahul
  • 4,294
  • 1
  • 10
  • 12
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/>
Community
  • 1
  • 1
mplungjan
  • 169,008
  • 28
  • 173
  • 236
3

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/

luke
  • 3,531
  • 1
  • 26
  • 46
  • This also seems a good solution. My another concern for both the solutions here is that, if we are talking huge document and many users annotating text, will it affect the performance? – pravid Nov 30 '16 at 08:50
  • It depends on what do you mean by huge. I've made a simple test of javascript execution time, it takes around 5s for 25k of span elements. Obviously javascript code can be optimized, or you can limit the number of span elements while rendering your document. Fiddle: https://jsfiddle.net/00w5f0c9/2/ – luke Nov 30 '16 at 09:45
1

p {
  font-family:tahoma;
   font-size:16px;
}

span {

  border-bottom:1px solid blue;
  position:relative;
  display:inline-block;
 
}
span:before {
  content:'';
  position:absolute;
  left:0;
  bottom:-3px;
  border-bottom:1px solid red;
  display:block;
  width:100%;
  
}
span:after {
  content:'';
  position:absolute;
  left:0;
 bottom:-5px;
  border-bottom:1px solid green;
  display:block;
  width:100%;
  
}
<p>
non-decorated text <span>decorated text</span> non-decorated <span>decorated text</span>
not decorated
</p>

You can try to play with after and before pseudo elements, too. Not sure how many lines you need, but you can also add few more, this way...

sinisake
  • 11,240
  • 2
  • 19
  • 27