如何縮小括號中數字的字體大小？

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類中的樣式將應用於跨度內的文本。

演示版

Answer 2

您可能要尋找的是HTML <sup> （或<sub> ）符號。 它們分別代表下標和上標。 sub標簽可讓您創建“類似於Wikipedia”的小數字。

上標^[1]的示例（ <sup>[1]</sup> ）

下標_[1]的示例（ <sub>[1]</sub> ）

Answer 3

如果您正在尋找純CSS解決方案，那么您就不走運了。 CSS無法解析文本和操作DOM，這是JavaScript的工作。 如果您能夠手動更改標記，則可以使用語義元素（例如<sup>(1)</sup>包裝引文，例如(1) ，如果您希望其顯示為上標或<span>(1)</span>否則，請設置樣式。 鑒於您想要Wikipedia風格的引用，因此前者是可行的方法。

但是，如果您希望瀏覽器在移動中解析括號中的數字，那么僅靠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進行自動編號和格式化。 這將是必須聲明跨度類但不必跟蹤您的邊注編號之間的折衷方案。

這樣，您可以添加，刪除或重新排列符號，而不必對旁注編號進行硬編碼，並且它們仍會自動正確編號。

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

的HTML：

<h1>Cascading Style Sheets (CSS)</h1>

<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the 
    look and formatting of a document written in a markup 
    language <span class="sidenote" data-source="src1"></span>. 
    Although most often used to change the style of web pages and user 
    interfaces written in HTML and XHTML, the language can be applied to 
    any kind of XML document, including plain XML, SVG and XUL. Along with 
    HTML and JavaScript, CSS is a cornerstone technology used by most websites 
    to create visually engaging webpages, user interfaces for web applications, 
    and user interfaces for many mobile applications <span class="sidenote" data-source="src2"></span>.</p>

<h3>References</h3>

<ul id='references'></ul>

CSS：

#references {
    list-style: none;
}

.sidenote {
    font-size: 0.8em;
}

Javascript：

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')]));
});

Answer 5

未經測試的regex / javascript / jquery解決方案：

    $(document).ready(function() 
    {
        walk(document.body);
    });
    //Iterate through every part of the page
    function walk(node) 
    {

    // I stole this function from here:
    // http://is.gd/mwZp7E

    var child, next;

    switch (node.nodeType)  
    {
        case 1:  // Element
        case 9:  // Document
        case 11: // Document fragment
            child = node.firstChild;
            while(child) 
            {
                next = child.nextSibling;
                walk(child);
                child = next;
            }
            break;

        case 3: // Text node
            check(node);
            break;
    }

    //Check if the text node contains parentheses.
    function check(node) 
    {
        var v = textNode.nodeValue;
        var res = v.match(/\(*.\)/g); //Match anything inside of parentheses

    if(res)
    {
        v.style.fontSize = "8px"; //Not sure if that part would actually work
    }   

    textNode.nodeValue = v;
    }