Offtopic Projekte
Kommentare Zurück zur Übersicht

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:
    1. Der querySelector gibt uns die sup-Elemente als Array zurück!
    2. Die _ausgabe Variable wird vereinbart.
    3. Die Schleife iteriert das sup-Element.
    4. -- Die leeren sup-Elemente werden durchnummeriert. +1 ist notwendig, weil die Iteration mit 0 beginnt!
    5. -- Die Ausgabe wird mit li-Elementen aufgearbeitet und mit einem getAttribute (vom title) gefüllt.
    6. 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!
    24. Jun 2024 - 15:58
    Hier könnte dein Kommentar stehen!

    Thomas Maier css4.at Logo
    Thomas Maier Impressum OER: CC BY NC SA 2023-11-01