如何使用CSS放置旁注 [英] How to position sidenotes with CSS

问题描述

边注。当然，最重要的问题是将它们放置在相对于引用它们的文本而言的高度。我可以使用JavaScript做到这一点，查看注释参考的 offsetTop 属性，但是然后我还必须处理视口大小调整和缩放，而CSS解决方案会保留到浏览器。因此，最好使用CSS解决方案。

Sidenotes. The foremost concern is, of course, placing them at a height relative to that of the text referencing them. I can do it with JavaScript, looking at the offsetTop property of the note reference, but then I would have to handle viewport resizes and zooming as well, whereas a CSS solution would leave that to the browser. A CSS solution is thus preferable.

这是博客的响应式设计的一部分。如果边距有足够的空间，则应将其显示为边注；否则，它们应作为脚注出现。 这篇文章对其进行了详细说明。请记住，超过一定宽度后，无论如何我们都会有页边距，因为如果要保持可读性，文本行不能超过一定长度，因此我们也可以利用未使用的空间。 Tufte是此解决方案的著名支持者。

This is part of the responsive design of a blog. Notes shall be displayed as sidenotes if there is enough room for them in the margins; otherwise, they shall appear as footnotes. This post explains it in more detail. Keep in mind that, past a certain width, we'll have margins anyway, since text lines cannot exceed a certain length if they are to remain readable, so we could as well employ that otherwise unused space. Tufte is a well-known proponent of this solution.

到目前为止，我已经尝试过两种方法。他们两个都在标记上使用相对定位（< sup> ），以便能够定位便笺（< span> ），相对于参考文本的顶部偏移最大。

So far I have tried two approaches. Both of them use relative positioning on the marker (a <sup>) so as to be able to position the note (a <span>) with a top offset relative to that of the referencing text.

我的第一次尝试是绝对定位：

My first try employs absolute positioning:

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可能可行，但是每次调整视口大小时，我都必须更新偏移量。不希望它。

The problem here is horizontal positioning. Since our reference is the <sup>, it becomes tricky to set the sidenote near the margin. It might be doable with JavaScript, but then I would have to update the offset every time the viewport was resized. Not looking forward to it.

此post 提出了一种类似的方法，但是没有显示应该将哪个父对象设置为具有相对位置的引用。如果是< p> ，则会出现一个问题，即每个段落的每一侧只能有一个注释，这是我宁愿避免的限制。

This post suggests a similar approach, but doesn't show which parent should be set as reference with relative positioning. If it's the <p>, the problem arises that we can only have one note on each side per paragraph, which is a limitation I would rather avoid.

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

My second try revolves around CSS grid:

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> ）属于。

However, it seems as though it weren't possible to put a child (the <span>) in a different grid column than the one its parent (the <sup>) belongs to.

推荐答案

您可以使用 float：right; （位于右侧元素上）和负的 margin-right 值等于或大于边注本身的宽度，并将seidenote元素移出主文本容器。浮动还确保其始终位于相关文本的高度。

You can do that using float: right; on the sidenote element (which aligns it right) and a negative margin-right value which is equal to or more than the width of the sidenote itself and will move the seidenote element out of the main text container. The floating also makes sure it's always at the height of the related text.

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

(the other position settings are unnessessary and can be erased in this case)

注释后添加：要使其向上移动以使其垂直居中，可以使用 position：relative; 和 transform：translateY（-50％）; 可以将其移至自身高度的一半。但是，由于某种原因，它会变得过于粘滞，因此我在代码段中将其更改为30％-尝试找到适合您的值...

ADDITION AFTER COMMENT: To move it upwards in order to center it vertically, you can use position: relative; and transform: translateY(-50%); on it, which should move it up half of its own height. However, for some reason that moves it up too muc, so I changed it to 30% in my snippet - try to find a value that suits you...

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

(However, this will probably cause problems when it's at the top of a column/page)

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>

这篇关于如何使用CSS放置旁注的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！