Question

我有一篇附有旁注的文章。该页面有两列，一篇用于论文，另一列用于旁注。如果一个句子有旁注，则后面跟一个括号中的数字。这个数字是旁注数字。例如：作文：太阳环绕地球。（1）旁注：（1）错误！

我的目标是让所有数字+括号变小。我假设有一个简单的CSS解决方案。

我应该补充说，有80种不同的音符，因此我需要一个简单，省时的解决方案。是否有一个允许我说，“对于每个（n），其中n是一个数字，使字体8pt”？

Answer 1

如果您需要CSS解决方案，可以使用以下内容：

HTML

<b>Essay:</b> The sun circles the earth. <span class="sidenote-number">(1)</span> 
<b>Sidenote:</b> <span class="sidenote-number">(1)</span> Wrong!

CSS

.sidenote-number {
    font-size:  10px;
}

sidenote-number类中的样式将应用于跨度内的文本。

Demo

Answer 2

您可能正在寻找的是HTML （或）表示法。它们分别代表下标和上标。 sub标记允许您创建'维基百科'小编号。

上标^[1]（[1]）

的示例

下标_[1]（[1]）

的示例

Answer 3

如果你正在寻找纯CSS解决方案，那你就不走运了。 CSS无法解析文本并操纵DOM - 这是JavaScript的工作。如果您能够手动更改标记，则可以包含引文，例如(1)，带有语义元素，如(1)，如果您希望它显示为上标，或(1)，如果您想要另外设置样式。鉴于你想要维基百科风格的引用，前者将是你的方式。

但是，如果您希望浏览器在移动中解析括号中的数字，仅使用CSS是不够的 - 您将不得不使用JS。如前所述，查找此类引用的最佳方法是查找格式，例如，以下正则表达式模式可能就足够了：\(\d+\)。但是，它又取决于您希望它们如何匹配。如果您不希望它们错误地匹配正常括号内的数字，例如在句子内或项目符号中，则必须在其前面加上一个否定的空白字符：[^\s]\(\d+\)。

以下是JS + CSS组合的一个简单示例：

$(function() {
  $('p').each(function() {
    $(this).html($(this).html().replace(/[^\s](\(\d+\))/gi,'<sup>$1</sup>'));
  });
});

sup {
  color: blue;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus interdum ullamcorper, for example: (1) Suspendisse semper mattis ante, et efficitur justo tempor in; (2) Cras iaculis, magna a bibendum porta, diam massa ornare nisi, eget finibus sapien enim non elit; (3) Pellentesque ut ultrices libero.</p>

<p>Donec non velit et ante vestibulum maximus(1). Phasellus ac interdum nisi, eu iaculis massa. Proin vel sem est. Morbi euismod massa eu commodo efficitur. Phasellus vitae leo euismod, pretium turpis sit amet, bibendum elit(2). In efficitur id metus ullamcorper tristique. Integer et felis in felis suscipit tincidunt nec nec lectus.</p>

<p>Vestibulum mollis, magna sodales maximus faucibus, leo risus pretium libero, at placerat urna eros et nisl(3). Nunc cursus enim diam, in accumsan augue faucibus vel. Integer feugiat egestas lectus eu blandit. Donec ac neque turpis. Donec imperdiet feugiat purus, a congue dui convallis ut(4). Sed scelerisque ac massa non feugiat. Aliquam erat volutpat. Donec vestibulum odio id pulvinar elementum. Ut laoreet massa ac nibh pulvinar, id consequat tellus malesuada(5). Fusce porta purus diam, in luctus odio laoreet quis. Quisque condimentum condimentum felis sed rutrum. Aenean pellentesque felis in posuere efficitur. Mauris tristique ultricies massa at euismod.</p>

Answer 4

这是基于我的评论的解决方案。它相当于像bibtex这样的平凡的参考管理系统。

注释：

也许你真正想要的是使用每个地方你想要一个编号的旁注，然后使用javascript 通过并自动编号和格式化它们。那将是一个在必须声明span类但不必必须之间进行权衡跟踪你的旁注数字。

通过这种方式，您可以添加，删除或重新排列符号，而不是对侧面音符编号进行硬编码，它们仍会自动编号。

http://jsfiddle.net/abalter/z43gxsfy/

HTML：

#references {
    list-style: none;
}

.sidenote {
    font-size: 0.8em;
}

CSS：

var sources = {
    src1: "Article by so and so in such and such",
    src2: "Book by someone"
};

var sidenotes = $('.sidenote');

$('.sidenote').each(function(index){
   $(this).html('(' + (index+1) + ')');
   $('#references').append($('<li>').html("(" + (index+1) + ")  " + sources[$(this).data('source')]));
});

使用Javascript：

{{1}}

如何缩小括号中数字的字体大小？

4 个答案: