Mosaikum 1.0
Von KerLeone
Mosaikum 1.0
Zeitgemäße Verwendung von Fußnoten
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci.1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.2 Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Hier bemerkt man übrigens das erste ärgerliche Problem, nämlich, dass hochgestellter Text in den meisten Browsern kaum mehr lesbar ist und obendrein bei manchen Schriftarten die Zeilen verschiebt. Und so wurde die Fußnote erzeugt:<a href="#Note1"><sup>1</sup></a> --- <a name="Note1"><sup>1</sup></a> <small>Hier der Text zu der Fußnote</small>Hier kann man aber bereits mit CSS herumtricksen und auf das <sup>-Element verzichten.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci.1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.2 Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Diese Fußnote ist wesentlich besser zu lesen und kann an jeden Text beliebig in Hochstellung und Font angepasst werden, ohne dass sich dadurch der Zeilenabstand ändert. Diese nachträgliche Änderung vollziehe ich übrigens immer im Stylesheet von Dokumenten, die ich mit Open-Office erstellt und nach HTML konvertiert habe. Hier der Code für diese Art von Fußnote: Anweisung im CSS-Bereich:
.besserefussnote {
font-size: 85%;
position:relative;
top:-7px;
margin-right:8px;
}
Und die Auszeichnung im Text:
<a href="#Note2" class="besserefussnote">2</a>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci.*(Und hier der Text der Fußnote.) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.*(Und hier der Text der Fußnote.) Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Diese Information ist angenehmer zu lesen und bieten darüberhinaus mehrere Vorteile:
.fn {color:#0000FF; cursor:pointer}
.fnt {display:none; color:#800000}
So ist die Fußnote im HTML-Text eingebunden:
<span class="fn" onclick="zeigen(this)">*<span class="fnt"> Und hier der Text der Fußnote.</span></span>Der innere Span-Tag umfasst den Fußnotentext und ist im Stylesheet als unsichtbar markiert (display:none). In den äußeren Span-Tag, der momentan nur mit einem Sternchen gefüllt ist, wird später die Fußnotennummer hineingeneriert.* (Hier kann man auch jedes andere Zeichen einfügen. Es hat sich gezeigt, dass Opera einen leeren Tag im Nachhinein nicht mehr füllen kann. Man sollte nur kein Leerzeichen verwenden, denn dann bekommt der Internet Explorer Probleme, falls vor der Fußnote ebenfalls ein Leerzeichen steht. Er meint vermutlich, zwei Leerzeichen hintereinander muss er nicht darstellen, und füllt im Nachhinein ebenfalls keine Nummer mehr ein.) Sie wird mit cursor:pointer und der blauen Farbe wie ein Link aussehen. Mit dem Javascript-Befehl onClick wird später beim Klicken auf die Nummer die Funktion aufgerufen, die den Text sichtbar macht. Mit dieser Technik werden die Fußnoten im Nachhinein sichtbar. Vorher müssen die Fußnoten allerding automatisch nummeriert werden, und dafür gibt es zwei Möglichkeiten.
<body onLoad="wechseln()">Die Funktion sucht in einer while-Schleife nach allen span-Elementen des Dokuments, ein Zähler i nummeriert diese, um sie später konkret ansprechen zu können. Sobald eines davon davon der Klassennamen fn trägt, wird dem Element der Inhalt des Zählers fnzahl zugewiesen, mit Klammern und der Zähler wird erhöht. Am Ende wird der Zähler i erhöht und der nächste span-Tag geprüft.
function wechseln() {
var i = 0;
var fnzahl=1;
while (document.getElementsByTagName("span")[i] != null) {
if (document.getElementsByTagName("span")[i].className
== "fn") {
document.getElementsByTagName("span")[i].firstChild.data
= "("+fnzahl+")";
fnzahl++;
}
i++;
}
}
.fncss:before { content:"(" counter(fnzahl) ")";
counter-increment:fnzahl
}
Den Rest erledigt der Browser, zumindest der Opera-Browser, denn das ist der Nachteil der Variante: Der Internet-Explorer, und auch Mozilla/Netscape unterstüzen dieses sogenannte Pseudoformat noch nicht. Für die Zukunft ist das aber ein interessante Sache, denn auch Kapitel können damit automatisch nummeriert werden.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci. (Und hier der Text der Fußnote.) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. (Und hier der Text der Fußnote.) Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<html><head><title>Fussnoten mit Javascript</title></head>
<script language="JavaScript">
<!--
//Fussnotenscript von KerLeone (http://mosaikum.org)
function zeigen(FnTag) {
if (FnTag.childNodes[1].style.display=="inline") {
FnTag.childNodes[1].style.display="none";
}
else {
FnTag.childNodes[1].style.display="inline";
}
}
function wechseln() {
var i = 0;
var fnzahl=1;
while (document.getElementsByTagName("span")[i] != null) {
if (document.getElementsByTagName("span")[i].className
== "fn") {
document.getElementsByTagName("span")[i].firstChild.data
= "("+fnzahl+")";
fnzahl++;
}
i++;
}
}
//-->
</script>
<style type="text/css">
<!--
.fn {color:#0000FF; cursor:pointer}
.fnt {display:none; color:#800000}
-->
</style>
<body onLoad="wechseln()">
Duis eum nulla faci.<span class="fn" onclick="zeigen(this)">*
<span class="fnt">(Und hier der Text der Fußnote.)</span></span>
</body>
</html>