How to shrink the font size of numbers in parentheses? - html

Question

I have an essay with sidenotes. The page has two columns, one for the essay, another for the sidenotes. If a sentence has a sidenote, it is followed by a number in parentheses. The number is the sidenote number. For example: Essay: The sun circles the earth. (1) Sidenote: (1) Wrong!
My goal is to make all the numbers+parentheses smaller. I assume there is a simple CSS solution.
I should add that there are 80 different notes, hence my need for a simple, time-saving solution. Is there one that would allow me to say, "for every (n) where n is a number, make font 8pt"?

Answer 1

If you're looking for a pure CSS solution, you're out of luck. CSS is unable to parse text and manipulate the DOM—that is the work of JavaScript. If you are able to manually change the markup, you can wrap your citations, e.g. (1), with a semantic element, such as <sup>(1)</sup> if you want it to appear as superscript, or <span>(1)</span> if you want to style it otherwise. Given that you wanted Wikipedia-style citations, the former would be the way to go.
However, if you want the browser to parse your digits in parenthesis on-the-go, CSS alone is insufficient—you will have to use JS. As mentioned before, the best way to find such citations is to look for a format, for example, the following regex pattern will probably suffice: \(\d+\). However, it again depends on how you want them to be match. If you do not want them to match erroneously to normal bracketed numbers, such as within sentences, or in bulleted points, you will have to include a negated whitespace character before it: [^\s]\(\d+\).
Here is a simple example with JS+CSS combined:
$(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 2

If you want a CSS solution, you could use the following:
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;
}
The style in the sidenote-number class will be applied to the text inside of the spans.
Demo

Answer 3

What you may be looking for is the HTML <sup> (or <sub>) notation.
They stand for subscript and superscript respectively. The sub tag will allow you to create 'Wikipedia like' small numbers.
Example of superscript [1] (<sup>[1]</sup>)
Example of subscript [1] (<sub>[1]</sub>)

Answer 4

Here is a solution based on my comment. It amounts to a trivialized reference management system like bibtex.
Comment:
Maybe what you really want, is to use
every place you want a numbered side note, and then use javascript to
go through and automatically number and format them. That would be a
tradeoff between having to declare the span classes but not having to
keep track of your sidenote numbers.
This way, instead of hard-coding the side note numbers, you could add, remove or rearrange the notations, and they would still be automatically numbered properly.
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

Untested regex/javascript/jquery solution:
$(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;
}