How to align a side note at the same horizontal level as a marked element?

Question

In rendering some HTML document, I would like to mimic the process of handwritten annotations, in which there is a main text, and some annotation put at the same level of an highlighted text in the right margin.

I use CSS grid mechanism to set up the main area (for the main text) and the side area (for annotations).

Some example code illustrating the problem and the sought result is available on jsfiddle. The code is reproduced below.

HTML code:

.kb-container {
  display: grid;

  grid-template-columns: 4fr 2em 2fr;
  grid-template-rows: auto;

  grid-template-areas: "main . side";
}

.kb-main {
  grid-area: main;
}

.kb-side {
  grid-area: side;
}

<body>
  <div class="kb-container">
    <div class="kb-main">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />

        Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. <mark>Donec fermentum</mark>. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.</p>
    </div>
    <div class="kb-side">This is a side note (currently not, lined up with "Donec fermentum").</div>
  </div>
</body>

Using CSS grid and flex containers, I am able to head in the right direction and line up the annotation to the marked text. However, the solution is not satisfactory, because it introduces new <div> block elements, thereby breaking the initial text composition (which was using inline elements <mark>).

<html>

<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 4fr 2em 2fr;
      grid-template-areas: "main . side";
    }
    
    .grid-main {
      grid-area: main;
    }
    
    .grid-side {
      grid-area: side;
    }
    
    .flex-container {
      flex-direction: column;
    }
  </style>
</head>

<body>
  <div class="flex-container">
    <div class="grid-container">
      <div class="grid-main">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate
          vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi.</p>
      </div>
    </div>
    <div class="grid-container">
      <div class="grid-main">
        <mark>Donec fermentum.</mark>
      </div>
      <div class="grid-side">This is a side note. It is lined up with the marked text. However, the initial text composition has been broken, due to the introduction of new div tags. 
      </div>
    </div>
    <div class="grid-container">
      <div class="grid-main">
        <p>Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam
          arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
        </p>
      </div>
    </div>
  </div>
</body>

</html>

How do you mark the text? Based on what condition you mark the text? or the text you mark is always static? using javascript, jquery? — Deepu Reghunath, Nov 04 '19 at 10:32
Hi Deepu, I am only doing some static prototyping in HTML and CSS, therefore, it is not yet important how the text has been marked. And indeed, it has been marked using the `` tag in the source code. — Franck Carre, Nov 04 '19 at 16:30

score 0 · Answer 1 · answered Nov 04 '19 at 21:24

Here is a solution with additional Javascript code (inspired by the reply to the question Retrieve the position (X,Y) of an HTML element), and not relying only on CSS/HTML.

alignSideNote()

function alignSideNote() {
  const markedElement = document.getElementById('mark')
  const sideElement = document.getElementById('side')
  const markRect = markedElement.getBoundingClientRect()
  const sideRect = sideElement.getBoundingClientRect()
  const offset = markRect.top - sideRect.top
  sideElement.style.marginTop = offset.toString() + 'px'
}

.kb-container {
  display: grid;
  grid-template-columns: 4fr 2em 2fr;
  grid-template-rows: auto;
  grid-template-areas: "main . side";
}

.kb-main {
  grid-area: main;
  text-align: justify;
}

.kb-side {
  grid-area: side;
}

<body>
  <div class="kb-container">
    <div class="kb-main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p> Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate
        vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. <mark id="mark">Donec fermentum</mark>. Pellentesque malesuada
        nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat.
        Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.</p>
    </div>
    <div class="kb-side" id="side">This is a side note (lined up with "Donec fermentum" using Javascript finally).</div>
  </div>
</body>

How to align a side note at the same horizontal level as a marked element?

1 Answers1