Ich bin für meine Webseite am Überlegen, was ich mit Fußnoten mache, denn ich habe immer wieder in den Texten Zusatzgedanken oder Informationen, die den roten Faden abreißen lassen und den Lesefluss unterbrechen. In einem Druckdokument würde ich genau dafür Fußnoten nutzen und es gibt auch eine Markdown-Erweiterung, die [^1] als Fußnote setzt. Aber die Platzierung von Fußnoten bei Webseiten am Seitenende finde ich nervig, weil man immer hin- und her springen muss. Besser gefällt ich eine Platzierung direkt unter dem Absatz mit einer entsprechenden Gestaltung.

Aber ich habe auch entdeckt, dass man mit float und negativem margin Elemente nebeneinander und auch über den Textbereich hinaus in den Rand verschieben kann. Da ich auf der Seite eh viel Platz am rechten Rand habe, wäre es also schön, diese Anmerkungen als Randnotiz zu haben.

Die Idee eine Infobox oder das title-Attribut zu nutzen, gefällt mir gar nicht, weil das tastaturfeindlich ist und nicht einheitlich in der Seite liegt.

Weitere Informationsquellen

• Handling footnotes and references in HTML
• HTML-Standard zu Fußnoten
• CSS-Vorschlag zu Fußnoten
• Accessible Footnotes with CSS (Barrierefreiheit)

Randnotizen

Platzierung

Das Problem an Randnotizen per float: right ist, dass sie vor dem eigentlich Abschnitt kommen müssen, damit sie neben ihm stehen können. Ich habe keinen Weg gefunden, die Randnotizen neben den Absatz zu platzieren, wenn <section class=footnotes> erst nach dem <p> kommt. Dies ist einerseits das Schema, das Markdown generiert und außerdem soll es ja auch so aussehen, wenn die Anzeige zu klein ist und der Platz am Rand fehlt.

#content .sidenotes {
  clear: right;
  float: right;

  width: 35%;
  margin-right: -35%;

  font-size: 80%;
  line-height: 120%;

  position: relative; /* required for z-index */
  z-index: 100; /* hover above the div on the right side */
}

Daher ist die Idee, einfach mit Javascript den Paragraphen und die Fußnoten zu tauschen, sollte ausreichend Platz vorhanden sein. Um die Formatierung mit CSS zu erleichtern, soll dann der Abschnitt nicht mehr footnotes, sondern sidenotes heißen. Da ein Handy auch während der Darstellung gedreht werden kann, muss die Umwandlung auch in die umgekehrte Richtung funktionieren.

function toggleFootSidenotes(ev) {
    if (window.innerWidth < 1160 || ev.type === 'beforeprint') {
        // convert all sidenotes to footnotes
        document.querySelectorAll('.sidenotes').forEach((el) => {
            const next = el.nextElementSibling;
            if (next !== null && next.nodeName === 'P')
                el.parentNode.insertBefore(el, next.nextSibling);
            el.classList.add('footnotes');
            el.classList.remove('sidenotes');
        });
    } else {
        // convert all footnotes to sidenotes
        document.querySelectorAll('.footnotes').forEach((el) => {
            const prev = el.previousElementSibling;
            if (prev !== null && prev.nodeName === 'P')
                el.parentNode.insertBefore(el, prev);
            el.classList.add('sidenotes');
            el.classList.remove('footnotes');
        });
    }
}

toggleFootSidenotes();
window.addEventListener('resize', toggleFootSidenotes);

Für den Papierausdruck

Für den tatsächlichen Druck oder den Export als PDF-Datei sollen die Fußnoten nicht als Randnotizen erscheinen. Meist lese ich PDF-Dateien am Bildschirm (oder auf dem Pocket-Book), wo die Platzierung direkt nach dem Absatz auch praktisch wäre, um nicht hin und her springen zu müssen. Es gibt auch noch einen Vorschlag für Fußnotenplatzierung beim Druck mit CSS, aber dieser ist noch nicht umgesetzt.

Daher müssen vor dem Ausdruck alle Randnotizen in Fußnoten umgewandelt werden und ggf. danach wieder alle in Randnotizen.

window.addEventListener('beforeprint', toggleFootSidenotes);
window.addEventListener('afterprint', toggleFootSidenotes);

Hervorhebung

Wenn die Fußnoten und der Text nah beieinander stehen und sehr wahrscheinlich gleichzeitig sichtbar sind, kann sie Zuordnung auch gut durch das Überfliegen mit der Maus verdeutlicht werden. Mit einfachen CSS-Mitteln geht dies zwar nicht, aber mit Javascript und den Ereignissen mouseover und mouseout.

document.querySelectorAll('a.footnote-ref, .footnotes li, .sidenotes li').forEach((el) => {
    el.addEventListener("mouseover", toggleFootnoteHighlight);
    el.addEventListener("mouseout", toggleFootnoteHighlight);
});

function toggleFootnoteHighlight(ev) {
    let id;
    if (this.nodeName === 'LI') {
        const bref = this.querySelector('.footnote-backref');
        if (bref === null) {
            console.warn('Footnote ' + this.id + " doesn't contain a backref");
            return;
        }
        id = bref.hash.substr(1);
    } else {
        id = this.hash.substr(1);
    }
    const el = document.getElementById(id);
    if (el === null) {
        console.warn('Element with id ' + id + ' not found');
    } else if (ev.type === 'mouseover') {
        el.classList.add('highlight');
    } else {
        el.classList.remove('highlight');
    }
}

Ein Beispiel

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste der Semantik, eines großen Sprachozeans1. Ein kleines Bächlein namens Duden fließt durch ihren Ort2 und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesisches Land, in dem einen gebratene Satzteile in den Mund fliegen.

Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloss eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum1, hinauszugehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.