Is it possible to create a vertical line on the side of a SELECTED text?

Question

What I need exactly is to be able to select a text which goes over 1 or more lines and after I push a button, I want a vertical line to appear on the left side of the selected text.

For example, in the text on the below picture I would want a blue vertical line to appear on the left side of line 2 to 4 when I click the button. Example

Thanks for any help!

Unfortunately I don't really know where to start.The only thing I do have so far is some code to highlight or underline selected text. I managed this through this post: https://stackoverflow.com/questions/17288964/how-to-change-color-of-the-selected-text-dynamically-on-click-of-button — Jon De Cae, May 16 '18 at 14:45

Andrew G Nugent · Answer 1 · 2018-05-17T13:36:28.140

0

Set a div to the text you are wanting to get the verticle line on

//in your HTML
<div id="left-boarder">
   <p> words here </p>
</div>

//in your CSS 
#left-boarder {
boarder-left: 1px solid black;
}

edited May 17 '18 at 13:36

answered May 16 '18 at 17:24

Andrew G Nugent

1
2

I believe you would have to wrap those lines in an inline element – Andrew G Nugent May 16 '18 at 17:26
Have you tested your solution? There's a glaring error in the html. – i alarmed alien May 17 '18 at 08:58
you have to use `=` to separate an key and its value – Nianyi Wang May 17 '18 at 09:39

Jon De Cae · Answer 2 · 2018-05-17T13:12:24.997

So far this is the workaround that I am using. Not working as I want to as you may see if you run the code.

b {
    font-weight:normal;
    border-left: 2px solid blue;
    padding: 2;
    position: absolute;
    left: 0%;
}

<!DOCTYPE html>
<html>
 <head>
  <title>Page Title</title>
 </head>
 
 <body>
     <span id="content" style="line-height: 1.8">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet odio eu magna mattis vehicula. Duis egestas fermentum leo. Nunc eget dapibus eros, id egestas magna. Fusce non arcu non quam laoreet porttitor non non dui. Ut elit nisl, facilisis id hendrerit et, maximus at nunc. Fusce at consequat massa.
      </span>
      <br/><br/>
      <button id="vertical_line">Vertical Line</button>

<script>
document.getElementById("vertical_line").onclick = function() {
  // Get Selection
  sel = window.getSelection();
  if (sel.rangeCount && sel.getRangeAt) {
    range = sel.getRangeAt(0);
  }
  // Set design mode to on
  document.designMode = "on";
  if (range) {
    sel.removeAllRanges();
    sel.addRange(range);
  }
  // Colorize text
  document.execCommand("bold", false,);
  // Set design mode to off
  document.designMode = "off";
}
</script>
 </body>
</html>

Once I select a text and then click the button, the selected text will be surrounded by the tags "< b >". What I did is edit the style of "bold" in CSS. It's quite an ugly work-around so far. I would be grateful if anybody can come up with a smarter solution.

There is a vertical line appearing, but still not along the side as I want it to do.

Cheers

just tried adding to CSS: "float: left;" and now it does put a vertical line on the left, but it also takes the selected text and puts it in a new separate paragraph. I want the text to stay as it is. — Jon De Cae, May 17 '18 at 09:34

Is it possible to create a vertical line on the side of a SELECTED text?

2 Answers2