如何使用CSS定位旁注

Question

我想要的

侧注。首要关注的是，当然是将它们放置在相对于引用它们的文本的高度上。我可以使用JavaScript来完成这个任务，查看侧注参考的offsetTop属性，但那样我就必须处理视口大小调整和缩放，而CSS解决方案则将其留给浏览器。因此，CSS解决方案更可取。

背景和动机

这是博客响应式设计的一部分。如果边栏有足够的空间，便会显示侧注；否则，它们将显示为脚注。这篇文章详细解释了这个问题。请记住，过了一定的宽度，我们仍然会有边距，因为如果要保持可读性，文本行不能超过一定长度，所以我们也可以利用那些未被使用的空间。Tufte是这种解决方案的知名支持者。

我尝试过的方法

到目前为止，我已经尝试了两种方法。它们都使用标记（一个<sup>）的相对定位，以便能够将注释（一个<span>）与引用文本的顶部偏移量相关联。

---

我第一次尝试使用绝对定位：

article {
   width: 50%;
   margin-left: auto;
   margin-right: auto;
}

sup {
   /* Needed to position sidenotes */
   position: relative;
}

.sidenote {
   width: 20%;
   position: absolute;
   
   /* BTW: This should be proportional to the note's height,
      so as to make its vertical center align with the text
      referencing it */
   top: -100%;
}

/* How could I set the notes' horizontal position relative to the margin or to an element other than the enclosing <sup>? */
.sidenote.l {
   right: 0;
}
.sidenote.r {
   left: 15vw;
}

<article>
   <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<sup>1<span class="sidenote r">Several variations of this sentence are known.</span></sup>. 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>
</article>

这里的问题是水平定位。由于我们的参考点是<sup>，所以设置旁注靠近边缘变得棘手。可能可以使用JavaScript解决，但每次视口大小调整时都需要更新偏移量，这让人不感兴趣。 这篇文章提出了类似的方法，但没有展示哪个父元素应该使用相对定位作为参考。如果使用<p>，那么每个段落每侧只能有一个注意事项，这是我想避免的限制。

---

我的第二次尝试围绕着CSS网格进行：

article {
   display: grid;
   grid-template-columns: 15% auto 15%;
}

p {
   grid-column: 2;
}

sup {
   position: relative;
}

.sidenote.l {
   grid-column: 1;
}

.sidenote.r {
   grid-column: 3;
}

<article>
   <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<sup>1<span class="sidenote r">Several variations of this sentence are known.</span></sup>. 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>
</article>

然而，似乎不可能将子元素（<span>）放在与父元素（<sup>）所属的不同网格列中。

- djsp

---

我认为你过于关注技术部分，而忽略了可用性。除了文本本身应该能够自洽外，你还有一些额外的内容要呈现给用户。如果用户对额外内容感兴趣，你希望他们能够专注于阅读并返回主要内容。跨浏览器/跨设备实现这一点的实用方法是使用工具提示或弹出窗口。大胆标记它们的存在并将它们显示在文本上方。与设计师讨论如何使其在任何设备上都具有吸引力。 - tao

@AndreiGheorghiu 如果用户决定打印文章，您会如何处理旁注？工具提示等无法使用。 - sol

通过提出这个问题，您正在为将印刷技术引入数字领域的选择进行辩护。使用印刷技术处理印刷，使用数字技术处理数字。它们需要像素完美匹配的需求是“无效”的。另一方面，它们需要在任何设备上轻松直观地运行，并且仍然具有吸引力，这对于您编写的任何内容的成功至关重要。寻找有意义的简单解决方案。当需要做出此类决策时，我通常会与非技术人员交谈，询问他们认为什么是有意义的。 - tao

@AndreiGheorghiu 响应性并不是很重要。旁注只是其实现的一部分，省略更大的画面使它们更容易实现。如果我能让这部分工作起来，将解决方案插入决策代码将变得简单明了。另一方面，你能解释一下你所说的行是什么意思吗？ - djsp

只是为了反驳一些“这本来就是个坏主意”的观点，我是一个设计师，我相信侧注不仅适用于宽网页布局，而且在这种情况下，它们相对于脚注的优势甚至更加明显。此外，我讨厌 CSS 让它们变得如此困难。 - gerwitz

Answer 1

您可以在旁注元素上使用float: right;（将其右对齐），并使用负的margin-right值，该值等于或大于旁注本身的宽度，并将旁注元素移出主文本容器。浮动还确保它始终与相关文本的高度相同。

（在这种情况下，其他位置设置是不必要的，可以删除）

评论后添加：为了向上移动以使其垂直居中，您可以在其上使用position: relative;和transform: translateY(-50%);，这应该将其向上移动其自身高度的一半。但是，由于某种原因，这会将其向上移动太多，因此我在代码片段中将其更改为30％-尝试找到适合您的值...

（但是，当它位于列/页面顶部时，这可能会引起问题）

article {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.sidenote {
  float: right;
  width: 20%;
  margin-right: -21%;
  position: relative;
  transform: translateY(-30%);
}

<article>
  <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<sup>1<span class="sidenote">Several variations of this sentence are known.</span></sup>.
    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>
</article>

- Johannes

---

谢谢。是否可以将侧注向上移动，使其垂直中心与引用它的文本对齐？ - djsp

请查看我回答和代码片段的补充部分。 - Johannes

Answer 2

你可以使用 margin 而不是 absolute 来定位侧边注。

基本示例...

fiddle

article {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.sidenote {
  width: 20%;
  float: right;
  clear: right;
  margin-right: -33%;
}

<article>
  <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<sup>1</sup><span class="sidenote">Several variations of this sentence are known.</span>.
    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>
</article>

- sol