Как уменьшить размер шрифта в скобках?

Question

У меня есть эссе с боковыми. Страница имеет две колонки, одну для эссе, другую для боковых. Если в предложении есть побочный элемент, за ним следует число в круглых скобках. Число - это номер боковой линии. Например: Эссе: Солнце кружит землю. (1) Sidenote: (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 <sup> (или <sub>) нотации. Они обозначают соответственно индекс и верхний индекс. Тег sub позволит вам создавать небольшие числа «Википедия».

Пример надстрочный ^[1] (<sup>[1]</sup>)

Пример подстрочный _[1] (<sub>[1]</sub>)

Answer 3

Если вы ищете для чистого раствора CSS, вы из удачи. CSS не может разобрать текст и манипулировать DOM - это работа JavaScript. Если вы можете вручную изменить разметку, вы можете обернуть свои цитаты, например. (1), с семантическим элементом, например <sup>(1)</sup>, если вы хотите, чтобы он отображался как верхний индекс, или <span>(1)</span>, если вы хотите его стиль в противном случае. Учитывая, что вам нужны цитаты в стиле Википедии, первым будет путь.

Однако, если вы хотите, чтобы браузер разбирал ваши цифры в скобках на ходу, только 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

Непроверено решение регулярное выражение/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; 
    }