Fußnote einfügen

An der Cursorposition wird eine eindeutige Fußnoten-Referenz, die Referenz unter dem aktuellen Absatz eingefügt. Hinter der Referenz wird die Editor-Marke 0 und zusätzlich Editor-Marke 9 gesetzt. Letztere ermöglicht einen schnellen Rücksprung in den Text, wenn in der Fußnote ein Programmwechsel erfolgt, der Marke 0 aktualisiert.

 OSE  ist es egal, wo sich der Fußnoten-Text in der Datei befindet; wer sie lieber am Ende oder am Anfang der Datei hat, kann sie problemlos dorthin verschieben. Neue Fußnoten werden grundsätzlich unter den Absatz der Fußnote eingefügt. Befinden sich dort bereits Hyperlinks oder weitere Fußnoten, wird die neue Referenz ans Ende dieser Liste gesetzt.

 OSE  nummeriert Fußnoten fortlaufend „von oben nach unten“ anhand der Referenz in der Quelldatei. Deshalb sollten in der Reihenfolge des Auftretens mit ihrer Referenz in der Quelldatei stehen. Für das Schieben der Referenzierung gibt es Absatzfunktionen.

Fußnoten-Gestaltung

Fußnoten bestehen in der Zieldatei aus drei Elementen, die von  OSE  mit fest eingestellten Klassen erzeugt werden.

Beispiel-Fußnote → 1

Sie wird mit der Klasse fnl („Fußnotenlink“)versehen, erhält einen negativen Tabindex (damit wird sie anspringbar, bleibt jedoch aus der Tabfolge ausgeschlossen), sowie einen generische Referenzsprung zum Fußnotentext und eine ebenfalls generische Rücksprung-ID.

<a tabindex="-1" href="#fx001" class="fnl" id="fnh1">1</a>

Die Abarbeitung der Fußnoten im Text erfolgt nach dem Einlesen der Fußnoten-Texte. Deren Reihenfolge definiert die fortlaufende Nummerierung der Fußnoten-Markierung im Text, denn genau in der Reihenfolge des Auftretens werden die Texte im Fußnotenbereich angeordnet.

Der Fußnotenbereich

Die Ausgabe aller Fußnoten erfolgt „kompakt“ ohne Umbrüche (hier nur zu besseren Nachvollziehbarkeit). Sie werden von der Klasse fnb („Fußnotenbereich“) umschlossen. Jeder Fußnotentext wird als Absatz mit der Klasse fni („Fußnoteninhalt“) eingefügt. Vorangestellt wird die fortlaufend generierte Nummer, umschlossen mit der Klasse fnh („Fußnotenhochzahl“), angehängt wird eine Rücksprungmarke mit der Klasse fnz („Fußnote zurück“), die mit ihrem ID neben der Absatz-ID als Sprungmarke verwendet werden könnte.

Mehrfach identische Fußnoten-Referenzen im Text sind zulässig. Es wird die erste im Text dazu gehörende Fußnote referenziert. Das kann mit einer entsprechenden Stilvorlage (s. „Fußnote einblenden“) entzerrt werden, die den Fußnoteninhalt in einem „Fenster“ über den Text legt.

<div class="fnb">
  <p tabindex="-1" id="fx001" class="fni">
    <span class="fnh">1</span>
      Eine Musterfußnote – zum Besichtigen mit den Browser-Funktionen.
    <a id="fnz1" href="#fnh1" class="fnz"></a>
  </p>
</div>

Mehrsprachige Fußnotentitel

Generierte Fußnoten haben weder in der Referenz noch im Rücksprung eine Title-Eigenschaft im HTML-Code, denn  OSE  hat beim Erzeugen des HTML-Codes keine Kenntnis davon, welche Sprache die Seite hat.

Mit dem lang-Parameter und CSS kann ein Titel simuliert werden, der – soweit dem Autor bekannt – von Braille- und Lesehilfen für Blinde erkannt und angesagt wird. Die nachfolgenden Definitionen formatieren Fußnoten mit deutschen und englischen „Titeln“, abhängig von der im erzeugten Dateikopf eingestellten Sprache. Das kann um weitere Sprachen im Stylesheet erweitert, das Beispiel den eigenen Vorstellungen angepasst werden.

/* Fußnoten */
.fnb{margin:2em;font-size:0.8em;line-height:auto;border-top:1px solid var(--txtcol);position:relativ}
.fni{text-indent:-2em;margin-left:2em}
.fnl,.fnh{font-size:0.8em;line-height:1em;vertical-align:0.3em;}
.fnl{padding-top:2em;margin-top:-2em}
.fnh{display:inline-block;text-align:right;width:1.5rem;padding-right:0.5rem}
.fnz{padding:0 0.5em;}
.fnl:after{content:"⤦";color:red;}
.fnz:before{content:"⤣";color:red;}
.fnz:hover:after, .fnl:hover:before{color:var(--capcol);display:block;position:absolute;z-index:1;border:1px solid var(--capcol);background-color:var(--bginv);padding:0.2em;margin:0}
 
html[lang="de"] .fnz:hover:after{content:"→\a0Textnote";width:10ch;top:-1.5em;text-indent:0em}
html[lang="de"] .fnl:hover:before{content:"→\a0Fussnote";width:10ch;top:0.5em;}
html[lang="en"] .fnz:hover:after{content:"→\a0Textnote";width:10ch;top:-1.5em;text-indent:0em}
html[lang="en"] .fnl:hover:before{content:"→\a0Footnote";width:10ch;top:0.5em;}

Die Rücksprungmarke (fnl) hält etwas Abstand zum oberen Viewport-Rand. Das ist Geschmackssache.

Fußnote einblenden

Statt Herumgespringe auf der Seite kann der Fußnotentext beim Anklicken der Fußnoten-Nummer fixiert am Fensterrand angezeigt werden. Das lasst sich mit den vorangegangen Hinweis-Titel kombinieren. Wird der nachfolgenden CSS-Code dahinter eingefügt, entspricht das Anzeigeverhalten dem hier in der Hilfe:

.fni:focus .fnz{
display:none;
}
 
.fni:focus {
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 50%;
padding: 3em;
width: auto;
max-width: 60%;
height: auto;
color: var(--txtcol);
background: var(--bgcol);
z-index: 999;
border: var(--txtcol) solid 1px;
border-radius: 0.3em;
filter: drop-shadow(0 0.2rem 0.5rem var(--txtcol));
}
 
.fni:focus::after {
 
font-size:0.4em;
position: absolute;
top: 0;
right: 2em;    
padding:0;
margin: 0;
}
 
html[lang="de"] .fni:focus::after {
content: "Zum Schließen außerhalb der Box klicken";
}
 
html[lang="en"] .fni:focus::after {
content: "Click outside the box to close";
}

Damit wird die Fußnote für die Anzeige aus dem Layout herausgelöst, ohne dass dafür weiterer Code in der Seite erforderlich ist.