david riggs wrote: ยจ > 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.
"Just CSS" isn't enough for anything, since CSS needs a marked-up document to attach to. But there are several approaches to footnotes and endnotes even when using just HTML and CSS; see http://www.cs.tut.fi/~jkorpela/www/fn.html The crucial question is the intended use: would it be on screen, on paper, or both? The second question is whether a particular presentation style should be used, as often dictated by publishers or academic institutions. If the > Endnotes need to be auto-numbered, so you can add and delete them at > will, and easy to enter and update. Using just HTML or XML together with CSS, this restricts you to use on minority browsers, since IE doesn't support auto-numbering. If auto-numbering is essential, it could be handled using a preprocessor or using server-side techniques such as PHP. We don't need to do _everything_ in CSS. > <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 You seem to use HTML markup with a "custom" <n> element. This may work in a restricted environment, but you need not resort to "custom" markup if you accept some verbosity, such as <span class="fn">...</span> instead of <n>...</n>. On the other hand, either approaches results in the footnote appearing in the midst of text, with no indication of its being meant as a footnote, when your style sheet is not used. If it is important to "degrade gracefully", you would need added verbosity, at least something like <span class="fp">(</span><span class="fn">...</span><span class="fp">)</span> with .fp { display: none; } (more or less in the spirit of Ruby markup). This shouldn't be an obstacle, if the markup is programmatically generated anyway, in order to generate the numbering. > To display them with the main text, the main.css "erases" the note > text with font-size 0pt, That's a _bad_ idea for several reasons. Among other things, it fails on browsers with a minimum font size setting, as well as when using a user style sheet that forces some specific font size. I can see why you are not using the obvious display: none here, and I don't see an obvious better alternative. But I'm not convinced at all that this approach is adequate. Why would you scatter the footnote texts into the text, instead of putting them at the end of a document and inserting just footnote references (as links) into the text? > n:before {vertical-align: 50%; font-size: 10pt; > counter-increment: n-num; content: counter(n-num) " ";} For a footnote reference, especially for screen use, something like "[42]" is better for usability than reduced-size superscript-position number alone. Try clicking on a digit in 10pt font size. Moreover, vertical-align: 50% may have unexpected effects on line spacing, even when a reduced font size is used: a line containing such an element may get larger height than other lines. I think you should at least consider setting line-height. > 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, You can just put the footnotes in a separate HTML document and make the endnote references refer to it. You might even consider using frames, since this is one of the rare cases where frames would be useful, but few if any people seem to use frames for footnotes or endnotes. Jukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ ______________________________________________________________________ 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/
