How do I style the citations eg. [1] just like they do in Wikipedia

I need to put some citations on my website and would like to style them the same way they do on Wikipedia Here is a URL so you can see an example http://en.wikipedia.org/wiki/Fractals See the little numbers in square brackets in the second and fourth line of text. That's what I'd like to do. I have a basic to average knowledge of css but after looking at their css sheet I couldn't figure it out. Any help would be appreciated.

 

I'm not sure how much Wikipedia uses CSS for that kind of stuff. It's generated automatically when people add cites.

Um, to get the same effect by hand in CSS, you'd likely do something like this:

<p>text text text text text text. <a href="#footer">[1]</a></p>

(punctuation before the ref, remember : )

This assumes you have a div with the id of "footer" where you're keeping your refs. Since I'm not going to trigger Haslayout in this anchor, test that the link brings people to the bottom of the page in IE (make the test page really really long so there's a scrollbar and then click your new link).

p {
stuff, including a font size (preferably in em) and a line-height;
}
p a {
vertical-align: super;
font-size: something really small like .7em or something;
don't set a line height
text-decoration: none;
}

I haven't actually built this so I'm not 100% sure if the vertical align can go on the anchor or has to go on the parent (p). Usually when I use vertical align it goes on the parent but we only want child text to do the alignment (to p's baseline).

I'll test.

*edit ok, tested. I gave a class to that a cause I didn't want other a's doing it. I didn't set anything on the p's, so the default was 1em. http://stommepoes.nl/
this is only going to stay for a short time, this is only my testing and bs page.

 

 <p>some stuff.<sup><a href="#footer1">[1]</a></sup></p>
============
sup {
  font-size: .7em;
  }

Code (markup):

cheers,

gary

 

Lawlz as usual, Gary's answer is the better one. Didn't occur to me, but it does indeed belong in the content with supper tags.

 

Thanks so much for your replies Stomme Poes and Gary. Your help is really appreciated!

Well I learn something new everyday. I have never come across the <sup> tag before. Never knew it existed. And.....superscript. That's the word I was wracking my brains earlier trying to remember to describe the bracketed reference number. Doh! Anyway, I've got it all working perfectly now. Thanks again.

 

Sup tag would work, but I would use it as a citation - I rarely get semantic, and I've never tested the code. If it works, I'd use it instead (I dislike presentational tags in all forms).

 <p>some stuff.<cite><a href="#footer1">[1]</a></cite></p>
============
cite {
  font-size: .7em;
  vertical-align:top;
 font-style:normal;
  }

Code (markup):

 

The <sup> and <sub> elements are not presentational. Subscripts and superscripts have implied semantic values. Consider H₂O or e=mc². These examples are from <cite><a href="http://www.w3.org/TR/html4/struct/text.html#edef-SUB">§9.2.3 Subscripts and superscripts: the SUB and SUP elements</a></cite>.

That's how you use the <cite> element, to show the actual reference. The superscripted figure is a pointer to the reference, a different matter.

gary

 

I breakin the rules here but question:

For ordinals (in Dutch, 4de or 2e for4 and second), are supper tags also the best tag, or is there some ordinal tag, or should I be trying to find a Unicode version of them (no luck so far but it's got to exist)?

Ours are "ste", "e", and "de".

*ediit apparently I'm old-fashioned and can get away with just leaving the letters large and low.

 

Apparently the superscripted ordinal indicator has gone the way of the Dodo.

I did find these, ª (#170) and º (#186), feminine and masculine ordinal indicators, but not your ste, de or e, nor the English (but I'm sure I've seen it) st, nd, rd, th.

cheers,

gary

 

I wouldn't say <sup> is the appropriate tag to use. In this case, it adds no semantic meaning - it is used purely for presentational purposes (it doesn't matter if it's a normal [1] or a small [1] that's up the top -- that I know of at least, I can't see I really paid that much attention in English )

I don't see whats wrong with using just that and positioning the anchor? (<sup> doesn't seem appropriate, and neither does site <cite> as [1] is just the number its referencing)

 

Per Bringhurst,The Elements of Typographic Style, references to footnotes and endnotes should be superscript numerals or letters, or if there are only a few footnotes, symbols eg. * † ‡, &c..

The use of bracketed note references arose to compensate for the typewriter's, early text editors' and printers' inability to render super- or subscript figures. If you use brackets, the reference should be normal text, not super.

Using superscript fills two functions. First, it visually separates the reference from the text. The reader may easily scan the text to find the references. Second, it says that the raised figure is not a part of the text. That is an implied meaning, semantics. As such, we should use the <sup> tag. We know, when we see that little raised character, that it points to a note. Do not depend on css instead of <sup> to raise the character. Text UAs and screen readers will not know to differentiate the element.

The use of brackets, [], to delimit reference pointers is a clumsy attempt to compensate. Their use has become more the norm, but the bracket lacks the traditional semantic cachet of the superscript and it lacks the visual elegance.

cheers,

gary

 

If they are required for meaning then yep sup is the way to go. I know they are used in the actual text, for referencing though at the end of the page I didn't think they were required

 

It'd be easier to be sure of your meaning if you had paid a bit more attention in English class.

Superscripts usually have an implied meaning, which make them semantic. View this little demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
        

  <title>Foot and end note pointers</title>
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="text editor"
        content="Emacs 22" />
  <meta name="author"
        content="Gary Turner" />
  <style type="text/css">
/*<![CDATA[*/

  sup {
  font-size: .75em;
  }

  #notes p {
    margin-left: 2.5em;
    position: relative;
    }

  #notes p span {
    position: absolute;
    left: -2.5em;
    text-align: right;
    width: 2em;
    }

  .pointer {
    color: gray;
    }
  /*]]>*/
  </style>
</head>

<body>
  <h1>Referencing notes</h1>

  <p>Pointers to foot or end notes may be superscript<sup>â…·</sup>
  or in square brackets at regular text size and
  alignment<span class="pointer">[††]</span>. The bracketed version
  creates a visual <q>speed-bump</q> and should probably be made
  less obtrusive by graying. That's opposite of the reason for
  using superscripts. The brackets have little implied semantic
  value, whereas superscripts are a long established typographic
  convention for pointing to notes.</p>

  <p>Superscripts usually have an implied meaning, inferred from
  the context. For example: e=mc<sup>2</sup>, M<sup lang="fr"
       xml:lang="fr">lle</sup>.</p>

  <p>The notes should follow whichever common style you prefer. The
  pointers are regular text, and outdented.</p>

  <div id="notes">
    <p><span>1.</span> this is reference 1
    <br />
    that runs over multiple lines
    <br />
    to show that the figures are outdented</p>

    <p><span>â…·.</span> this is reference â…·
    <br />
    if you use Roman numerals, you may need to allow
    <br />
    more space for them than I did here</p>

    <p><span>††.</span>Two daggers as the reference pointer</p>
  </div>
</body>
</html>

Code (markup):

cheers,

gary

 

That's what I thought - the ones at the end aren't necessary to be <sup> and could have been achieved just using the <a> (if he wanted them to be little and up the top some styling could be added)

EDIT: Ohhhhhhhhhhhhhhhhhhhhhh. I only just realised we are talking about the numbers used in the text after re-reading the OP, not the references at the end haha, I'm just going to leave this thread now I knew the ones in the actual text had to be smaller and up the top, I paid that much attention!