Creating Revision Bars / Markers In Margin Using Css

I have a document and I need to track changes using revision bars (black bars in the margin to indicate where changes have taken place). The changed text is done using

Solution 1:

Use JavaScript to get the height and position of the .changeText elements. With this info you can then construct the black bars. Here is an example using jQuery:

var $body = $( 'body' );
var $edit = $( '.edit' );

$edit.each( function ( i, el ) {

  var $el  = $( el );
  var top  = $el.position().top;
	var $bar = $( '<div/>', {
    class: 'edit-bar',
    style:
      'top:' + top + 'px;' + 
      'height:' + $el.height() + 'px;'
  } );
  
  $body.append( $bar );
  
} );

body {
  margin: 0;
}

p {
  margin-left: 3rem;
}

.edit {
  background-color: yellow;
}

.edit-bar {
  position: absolute;
  left: 10px;
  border-left: 5px solid black;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cupiditate, eligendi delectus voluptas. Dolore laborum nostrum consectetur incidunt, debitis animi eum vel expedita amet deleniti eaque sed voluptates, consequuntur ut. <spanclass="edit">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cupiditate, eligendi delectus voluptas. Dolore laborum nostrum consectetur incidunt, debitis animi eum vel expedita amet deleniti eaque sed voluptates, consequuntur ut.</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cupiditate, eligendi delectus voluptas. Dolore laborum nostrum consectetur incidunt, debitis animi eum vel expedita amet deleniti eaque sed voluptates, consequuntur ut. 
</p><p>
Sapiente cupiditate, eligendi delectus voluptas. Dolore laborum nostrum consectetur incidunt, debitis animi eum vel expedita amet deleniti eaque sed voluptates, consequuntur ut. <spanclass="edit">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cupiditate, eligendi delectus voluptas.</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cupiditate, eligendi delectus voluptas.  
</p>

Use each() to loop through the jQuery object of .changeText elements. For each find out the height and position of the .changeText element with height() and position(). Then create the bar element and append it to the page.

Notice that the black bars are absolute positioned. In your final code you may have a container element that you will need to apply position: relative; to so the bars appear where you expect them to. Also, I've created a margin with p elements for the black bars to be placed. Again, this might change in your final code. You might create this space with the margin or padding of some other element.

Solution 2:

In Javascript, you can get an element offset from its parent with the property offsetTop, as explained here:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

This, along with the height of the element, recovered using offsetHeight, can be what you need to draw the black markers:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

So, for instance, you can use:

document.getElementsByClassName("changeText").forEach(element => {
  let top = element.offsetTop;
  let height = element.offsetHeight;
  drawMarker(top, height);
}

The function drawMarker could create divs with absolute positioning using the supplied data, for example.

Solution 3:

You can mess around with the :before css-tag.

I'm not 100% there yet, but this might be a step in the right direction:

jsfiddle

I add a :before selector for the spans:

.changeText:before {
  position: absolute;
  left: 50px;
  background-color: black;
  content: " ";
  width: 10px;
  height: 1em;
}

Our remaining problem now is that the height of the bar doesn't match with the height of the highlighted text. We can throw some javascript around to solve this.

Last attempt: jsFiddle

Share