Dear List,
Endnotes are one of the main hurdles to weaning academics away from MS
Word to the freedom of open standards markup. I have worked out a way
with xslt, but its really overkill, and I would like to find a simple
way to do notes with just CSS, and help encourage friends to do things
the right way.
The following is one rather clumsy technique, which works in Firefox
2.0.0.6/Linux. I hope someone else has a better way.
Endnotes need to be auto-numbered, so you can add and delete them at
will, and easy to enter and update. The following shows one easy way to
mark them up (inside the "n" element):
<html><head>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="endnotes.css" title="endnotes" rel="alternate stylesheet"
type="text/css" />
<title>Endnotes with CSS</title>
</head><body><h2>CSS Comments</h2>
<p>CSS is useful for many things, but applying it to academic writing is
an exercise in frustrations.<n>But see Eric Meyer, <i>CSS the Definitive
Guide</i> for a superb analysis of what can be done with CSS.</n> One of
the practical problems is the difficulty of remembering the syntax of
both CSS and XML at the same time.<n>I recommend the O'Reilly <i>Pocket
Reference</i> series.</n></p>
</body></html>
To display them with the main text, the main.css "erases" the note text
with font-size 0pt, and adds a calculated number as the endnote number.
file main.css:
* { font-size: 13pt; font-family: Freeserif; }
body {counter-reset: n-num;}
n, n i { font-size: 0pt;}
n:before {vertical-align: 50%; font-size: 10pt;
counter-increment: n-num; content: counter(n-num) " ";}
To display just all the notes together, open another window, load the
text and select View/Page Style/endnotes (which is put in your browser
pull down by the second "<link..." line above.)
file endnotes.css
body {counter-reset: n-num;}
* { font-size: 0pt; font-family: Freeserif; }
n { font-size:14pt; display: block;}
n i {font-size: inherit;}
n:before {font-size:10pt; vertical-align: 50%;
counter-increment: n-num; content: counter(n-num) ") "}
This technique has the advantage that you can look at the endnotes all
at one time. If you want to see just one as you are reading the main
text, you can alt-F4 to the other browser window. The common technique
of href'ing to the note means that you have to jump around, and also it
is not so easy to have automatic number. Seeing the notes all at once is
crucial: I often start reading an article by going through the notes.
I used the font-size: 0pt; because the seemingly more appropriate
display:none and visibility: hidden will not work here for various reasons.
So, thats what I have. Isn't there a better way than hacking around with
font-size: 0pt? And I cannot find a way of embedding alternate style
sheets in the main file itself. The usual xslt hack of href'ing to an
id (href="#mycss1") results in a garbled cascade, not a true alternate
stylesheet.
Thanks,
David
Oberlin
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
