javascript - 将侧边栏中的内容垂直对齐到文本中的引用 [基于 Tufte 风格的评论]

Question

假设我有一个很长的文本(字体大小是可调的，所以事先将它分成几部分并不是一个真正的选择)，其中包含引用([1]、[2]、...)和相应的注释。

<div id="content>
  <p>Lorem ipsum dolor sit amet, consetetur<span id ="ref1">[1]</span> sadipscing elitr, 
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
  </p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<span id ="ref2">[2]</span>
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<span id ="ref3">[3]</span>
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="sidebar">
  <div id="com1">
    should be next to [1]
  </div>
  <div id="com2">
    should be next to [2]
  </div>
  <div id="com3">
    should be next to [3]
  </div>
</div>

有没有办法以纯 HTML/CSS 的方式将注释与引用对齐，或者是否需要 Javascript？向后兼容性并不重要。

评论应始终可见且水平对齐。作为奖励，他们应该允许任何形式的内容，而不仅仅是纯文本。

另外请记住，两个引用可以彼此相邻，这样第二个评论就会被推低一点。

在这一点上，我认为除了 JS 之外没有其他可行的选择。如果字体大小是固定的，可以很容易地将文本分解成 div 并简单地对齐它们。

Answer 1

1) 添加边栏文本为 data- attribute

2) 使用 attr() CSS function 在绝对定位的伪元素中显示它.

3) 然后您可以通过切换 <span> 来完善结果带有 <sup> 的元素元素和

4) 添加CSS计数器动态生成对应的评论编号作为每条评论的前缀。

FIDDLE

尝试在上面的 fiddle 中调整窗口宽度!

标记

<sup data-comment="should be next to [1]" id ="ref1">[1]</sup>

CSS

#content
{
    margin-right: 150px;
    counter-reset: section; /* Set the section counter to 0 */
}
sup
{
    font-size: 10px;
}
sup[data-comment]:before
{
    counter-increment: section; /* Increment the section counter */
    content: counter(section);  /* Display the counter */

    position: absolute;
    right:10px;
    width: 130px;
    font-size: 8px;
}
sup[data-comment]:after
{
    content: attr(data-comment);
    position: absolute;
    right:0;
    width: 130px;
    font-size: 12px;
}