CSS内联文本的垂直突出显示

Question

我允许用户突出显示文档中的文本，当它突出显示时，将通过在左侧装订线中显示垂直条来表示。我需要帮助绘制下方屏幕截图左侧的垂直条高亮显示。

Mockup屏幕截图，其中黑条将成为文本

CodePen with current attempts I Will be referencing

我已经能够使用getSelection()捕获选择。我在选择周围添加了一个内联元素。我需要帮助指定文档的哪一部分被选中的垂直条。

我已经尝试了一些部分存在但我有点失落的事情。

此文本显示在<pre>中。希望尽可能保持<pre>为止。我试图找到一种方法来通过普通的旧HTML / CSS / JS来获得这个装订线，而不需要像角度GutterComponent这样需要跟踪大量偏移量，高度和位置的复杂东西。

1）附加相对绝对<div>对

我以为我可以通过调用div来附加一个相对定位的div，它具有我需要的阴沟位置，绝对getBoundingClientRect()用于高度和内联元素的顶部。

这很糟糕，因为对getBoundingClientRect()的调用对内联元素不起作用，如CodePen所示。此外，divs创建了一个新行，可能会破坏文本块。

2）使每个突出显示的部分成为块元素并使用边框

这很糟糕，因为我不能正确地将边框定位在排水沟中而不会弄乱文档的其余部分。它也有与上面相同的问题，将文本分解为块元素。

我主要是寻找有关如何在左侧创建这些高光的指导，以便它们跨越内联元素的整个高度。

此外，我已阅读此问题，但我无法解析如何在这里实际应用这些概念，我需要 一些指导Inline elements and line-height

谢谢

Answer 1

最简单的方法是跟随一个（但它没有调整友好度）。

选择一些文字并等一下：

var t;

function mark() {
  var selection = getSelection()
  
  if (selection.isCollapsed) return
  
  var rect = selection.getRangeAt(0).getBoundingClientRect()
  var base = document.body.getBoundingClientRect()
  
  var span = document.createElement('span')
  span.style.top = rect.top - base.top + 'px'
  span.style.height = rect.height + 'px'
  document.body.appendChild(span)
}

document.addEventListener('selectionchange', function (e) {
  clearTimeout(t)
  t = setTimeout(mark, 1000)
})

body {
  padding-left: .75em;
  position: relative;
}

span {
  position: absolute;
  left: 0;
  width: .25em;
  background: blue;
}

<p>I'm allowing a user to highlight text in a document and when it is highlighted, it will be denoted by showing a vertical bar in the left gutter. I need help drawing the vertical bar highlights on the left side of the below screenshot.
<p>Mockup screenshot where black bars would be text
<p>CodePen with current attempts I Will be referencing
<p>I am already able to capture the selection using getSelection(). I am adding an inline element around the selection. I need help with the vertical bars that designate which part of the document was selected.
<p>I've tried a couple things that get partially there and I'm a little lost.
<p>This text is displayed in a &lt;pre&gt;. The desire is to keep the &lt;pre&gt; as prestine as possible. I'm trying to find a way to get this gutter through plain old HTML/CSS/JS without something complex like an angular GutterComponent that would have to track a ton of offsets, heights, and positions.