Fussnoten mit HTML und JavaScript
In LibreOffice und Word ist es ein Einfaches, eine Fussnote zu einem Text hin zu fügen.
Dafür benötigt man nur einen Mausklick.
Wie aber mit HTML?
Hier ein Beispiel:
In sich-selbst referiernend wird die
Hermeneutik
als letzte Erfahrensinstanz vor der Erkenntnis
angewandt. Jegliche
Wissenschaftstheorien
bestätigen, das zwar das Empirische einen hohen Wahrheitsgehalt - jedoch die
Methoden
der empirischen Erkennis, ständig auf
ein Neues hin kritisiert werden. So bleibt der Hermeneutiker hoffnungslos "selbst-referenzierend" und
unfähig zur
Selbstbeschreibung
in jeglicher Form der Erkenntnisarbeit.
________________
Zuerst der HTML-Code
Der Quellcode ist auch im MachMal von css4.at
Unmittelbar nach dem Wort muss der Code nach folgendem Muster hinzugefügt werden!
<sup class="fn" title="Hermeneutik bedeutet die Wissenschaft des Verstehens"></sup>
<sup class="fn" title="Wie man Wissen und Erkenntnis anwenden kann"></sup>
Der sup-Tag (Superscript) hebt seinen Inhalt um einen halben Buchstaben über der normal Linie.
Das Class Attribut wird später von JavaScript noch selektiert und kann selbstverständlich auch für CSS verwendet werden.
Ins Title Attribut kommt der Fussnotentext. Das hat auch den Vorteil, dass er bei einem Mouse-Over dargestellt wird.
Das innereHTML vom sup-Tag kann leer bleiben - das JavaScript wird es später für uns durchnummerieren.
Wir brauchen jetzt noch ein Ausgabeelement - idealerweise eine orderd-list, das erspart viel Arbeit!
<ol id="meineFussnoten"></ol>
Diese positionieren wir, wo wir sie auch benötigen. In der Regel am Schluss des Lauftext.
Jetzt der JavaScript-Code
Der fleißige JavaScript-Code der uns die Arbeit abnimmt (mindestens die Arbeit des Durchnummerierens)!
<script>
var meinFussnotenArray = document.querySelectorAll(".fn");
var ausgabe = "";
for(var i = 0; i < meinFussnotenArray.length; i++) {
meinFussnotenArray[i].innerHTML = i + 1;
ausgabe = ausgabe + "<li>" + meinFussnotenArray[i].getAttribute("title") + "</li>";
}
document.getElementById("meineFussnoten").innerHTML = ausgabe;
</script>
Hier die Erklärung zum Code:
- Der querySelector gibt uns die sup-Elemente als Array zurück!
- Die _ausgabe Variable wird vereinbart.
- Die Schleife iteriert das sup-Element.
- -- Die leeren sup-Elemente werden durchnummeriert. +1 ist notwendig, weil die Iteration mit 0 beginnt!
- -- Die Ausgabe wird mit li-Elementen aufgearbeitet und mit einem getAttribute (vom title) gefüllt.
- Der "li-Sting" wird seiner "Heimat" zugewiesen.
Wichtig: Das Script muss nach dem
<ol id="meineFussnoten"></ol> Element eingefügt werden, damit der DOM es auflösen kann!
Wer gerne mit onload-Events des Body bzw. Html arbeitet, soll es gerne umschreiben und in eine Funktion packen.
Es ergibt m. E. aber keinen Sinn, weil das Script sowieso ausgeführt werden soll. In dieser Version hat es keinen Einfluss auf das Schriftbild, wenn JavaScript deaktiviert ist.
Dennoch wäre eine no-script Lösung sicher interessant.
Aber dafür gibt es die Kommentarfunktion!
